如果你想开发一个应用(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:

结果:

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

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

谢谢观看