若是你想开发一个应用(1-18)

以前代码里，todos的列表已经完成了，可是数据都是以前固定在数据库中的，并且全部的值都是提早设置好的固定值，这固然是不可行的，由于咱们是一个记事工具，记事功能都没有，那算什么记事软件，接下来的内容，应该算是应该记事功能开发的前传。

记事功能

再次贴上这张图，分析一下咱们若是记事的时候，都须要那些内容：

• 日期时间
• 标题
• 内容
• 定位
• 天气
• 心情

接下来咱们分析一下这些内容的来源和作法：

1. 日期时间就不用说了，取提交后服务器的系统时间。
2. 标题和内容一样简单，都是用户手动输入的
3. 心情略微麻烦些，须要找到若干个icon，而后由用户选择当前的心情
4. 天气略微麻烦一些，须要找第三方的接口，获取当前手机所在地的天气状况
5. 定位，是天气的前提，也是输入的一个属性，下面要终点介绍。

定位

在如今的开发服务器内，是没法获取定位的，须要经过手机来获取定位信息，这里就须要先将代码打包成apk(以安卓系统为例)，而后经过手机获取经纬度信息，从而定位，而后根据定位得到的经纬度来获取所在的城市，街道等名称，已经所在城市街道的天气状况。

打包(Cordova)

要使程序跑在手机上，那么先决条件就是要进行打包，也就是生成一个apk的文件(不考虑ios)，这里我选择了最简单，也是目前比较流行的一条路，cordova。

开始的时候，想使用与vue最般配的打包方式weex，但试用了一周以后，发现这个的技术栈有点复杂，而且他与cordova有一个本质的区别，他是使用js开发原生控件，而cordova是内嵌浏览器。这也意味着在开始没有规划的状况下，有些css文件必须须要重写以适应，因此最终，仍是回退到了cordova这种内嵌浏览器的方式。

就如刚刚所说，cordova是目前我能想到的最简单一种方式，可是，由于咱们的目标是打包apk程序，因此在使用cordova以前还须要进行一下准备工做。

安装Android环境

这一步是比较麻烦的一步，因为众所周知的缘由，在国内是没法访问android开发者官网的，因此须要在国内的镜像下载sdk等内容，我是在androiddevtools进行的下载，进入站点后：

选择Android SDK 工具
选择SDK Tools
点击android-sdk_r24.4.1-windows.zip

下载以后，解压放到本身喜欢的位置(注意目录中最好不要有空格和中文)，而后双击SDK Manager.exe，选择本身所须要的sdk，个人部分选择：

安装完成以后，编译android须要从环境变量中查找sdk环境，因此须要配置环境变量：

固然，最终还要在path中进行配置：

最后使用echo %android_home% 输出sdk所在地址便可

安装gradle

Gradle 是 Android 如今主流的编译工具，因此，编译android程序还须要配置gradle，这个就比较简单了，在gradle官网下载，而后同android同样，保存到一个没有空格和中文的目录下，配置环境变量便可，最终扔需配置到path内，最后使用命令测试一下：

出现相似这种画面，即表明安装完成。

安装cordova

前戏作完，终于轮到了正菜，接下来就安装cordova工具，由于以前已经安装了npm，这步就很是的简单了

npm install -g cordova  //全局安装

建立项目

接下来，首先忘记以前的项目，建立一个测试项目用于测试：

cordova create mydiary com.niufennan.jtodos mydiary

完成以后，能够看见测试目录下多出了mydiary目录，这个就是项目目录。接下来进入项目目录：

cd mydiary

安装android平台

cordova platform add android@6.4.0

6.4.0为版本信息，当前最新及默认为7.0.*版本，可是安装7.0版本后会发生与插件不匹配的现象，通过屡次测试，都没有找到方法，差点致使从入门到放弃事件，因此最终妥协了，选择了6.4版本。

安装百度地图插件

由于cordova框架如今默认使用谷歌浏览器内核(cordova-plugin-geolocation)定位，可是因为墙的存在,因此这个定位目前来讲是 没法使用的，因而用百度定位就成了一个选择。

百度定位首先要申请一个百度定位sdk的key，注意要不要选择浏览器而要选择androidsdk

注意包名就是建立项目时输入的com.niufennan.jtodos,SHA1的生成方法能够自行百度。

关于cordova安装百度定位插件的文章有好多，这里就不在详细描述，大概说一下步骤：

安装插件：

cordova plugin add https://github.com/liangzhenghui/cordova-qdc-baidu-location --variable API_KEY="key"

修改www目录下，js目录中的index.js文件
修改onDeviceReady方法(加载完成方法)：

onDeviceReady: function() {
    this.receivedEvent('deviceready');
    baidu_location.getCurrentPosition(
        function(data){ 
            console.log("success"); //定位成功
            alert(JSON.stringify(data)); 
            console.log(JSON.stringify(data)); 
        },
        function(data){
            console.log("fail");  //定位失败
            console.log(data); 
            alert(JSON.stringify(data));
        }
    );
},

注意，定位必须使用真机测试

插入个人老红米，而后运行cordova run：

结果：

定位成功，在百度地图上测试经纬度，基本符合当前地点。

此章暂时告一段落，下一章将进行天气，心情等功能的实现，并看篇幅决定是否进行融合

谢谢观看