之前代碼里，todos的列表已經(jīng)完成了，但是數(shù)據(jù)都是之前固定在數(shù)據(jù)庫(kù)中的，而且所有的值都是提前設(shè)置好的固定值，這當(dāng)然是不可行的，因?yàn)槲覀兪且粋€(gè)記事工具，記事功能都沒有，那算什么記事軟件，接下來的內(nèi)容，應(yīng)該算是應(yīng)該記事功能開發(fā)的前傳。

記事功能##

3.JPG

再次貼上這張圖，分析一下我們?nèi)绻浭碌臅r(shí)候，都需要那些內(nèi)容：

• 日期時(shí)間
• 標(biāo)題
• 內(nèi)容
• 定位
• 天氣
• 心情

接下來我們分析一下這些內(nèi)容的來源和做法：

1. 日期時(shí)間就不用說了，取提交后服務(wù)器的系統(tǒng)時(shí)間。
2. 標(biāo)題和內(nèi)容同樣簡(jiǎn)單，都是用戶手動(dòng)輸入的
3. 心情略微麻煩些，需要找到若干個(gè)icon，然后由用戶選擇當(dāng)前的心情
4. 天氣略微麻煩一些，需要找第三方的接口，獲取當(dāng)前手機(jī)所在地的天氣情況
5. 定位，是天氣的前提，也是輸入的一個(gè)屬性，下面要終點(diǎn)介紹。

定位##

在現(xiàn)在的開發(fā)服務(wù)器內(nèi)，是無法獲取定位的，需要通過手機(jī)來獲取定位信息，這里就需要先將代碼打包成apk(以安卓系統(tǒng)為例)，然后通過手機(jī)獲取經(jīng)緯度信息，從而定位，然后根據(jù)定位獲得的經(jīng)緯度來獲取所在的城市，街道等名稱，已經(jīng)所在城市街道的天氣情況。

打包(Cordova)##

要使程序跑在手機(jī)上，那么先決條件就是要進(jìn)行打包，也就是生成一個(gè)apk的文件(不考慮ios)，這里我選擇了最簡(jiǎn)單，也是目前比較流行的一條路，cordova。

開始的時(shí)候，想使用與vue最般配的打包方式weex，但試用了一周之后，發(fā)現(xiàn)這個(gè)的技術(shù)棧有點(diǎn)復(fù)雜，并且他與cordova有一個(gè)本質(zhì)的區(qū)別，他是使用js開發(fā)原生控件，而cordova是內(nèi)嵌瀏覽器。這也意味著在開始沒有規(guī)劃的情況下，有些css文件必須需要重寫以適應(yīng)，所以最終，還是回退到了cordova這種內(nèi)嵌瀏覽器的方式。

就如剛剛所說，cordova是目前我能想到的最簡(jiǎn)單一種方式，但是，因?yàn)槲覀兊哪繕?biāo)是打包apk程序，所以在使用cordova之前還需要進(jìn)行一下準(zhǔn)備工作。

安裝Android環(huán)境###

這一步是比較麻煩的一步，由于眾所周知的原因，在國(guó)內(nèi)是無法訪問android開發(fā)者官網(wǎng)的，所以需要在國(guó)內(nèi)的鏡像下載sdk等內(nèi)容，我是在androiddevtools進(jìn)行的下載，進(jìn)入站點(diǎn)后：

選擇Android SDK 工具
選擇SDK Tools
點(diǎn)擊android-sdk_r24.4.1-windows.zip

下載之后，解壓放到自己喜歡的位置(注意目錄中最好不要有空格和中文)，然后雙擊SDK Manager.exe，選擇自己所需要的sdk，我的部分選擇：

1.PNG

安裝完成之后，編譯android需要從環(huán)境變量中查找sdk環(huán)境，所以需要配置環(huán)境變量：

2.PNG

當(dāng)然，最終還要在path中進(jìn)行配置：

3.PNG

最后使用echo %android_home% 輸出sdk所在地址即可

安裝gradle###

Gradle 是 Android 現(xiàn)在主流的編譯工具，所以，編譯android程序還需要配置gradle，這個(gè)就比較簡(jiǎn)單了，在gradle官網(wǎng)下載，然后同android一樣，保存到一個(gè)沒有空格和中文的目錄下，配置環(huán)境變量即可，最終扔需配置到path內(nèi)，最后使用命令測(cè)試一下：

4.PNG

出現(xiàn)類似這種畫面，即代表安裝完成。

安裝cordova###

前戲做完，終于輪到了正菜，接下來就安裝cordova工具，因?yàn)橹耙呀?jīng)安裝了npm，這步就非常的簡(jiǎn)單了

npm install -g cordova  //全局安裝

創(chuàng)建項(xiàng)目

接下來，首先忘記之前的項(xiàng)目，創(chuàng)建一個(gè)測(cè)試項(xiàng)目用于測(cè)試：

cordova create mydiary com.niufennan.jtodos mydiary

完成之后，可以看見測(cè)試目錄下多出了mydiary目錄，這個(gè)就是項(xiàng)目目錄。接下來進(jìn)入項(xiàng)目目錄：

cd mydiary

安裝android平臺(tái)

cordova platform add android@6.4.0

6.4.0為版本信息，當(dāng)前最新及默認(rèn)為7.0.*版本，但是安裝7.0版本后會(huì)發(fā)生與插件不匹配的現(xiàn)象，經(jīng)過多次測(cè)試，都沒有找到方法，差點(diǎn)導(dǎo)致從入門到放棄事件，所以最終妥協(xié)了，選擇了6.4版本。

安裝百度地圖插件###

因?yàn)閏ordova框架現(xiàn)在默認(rèn)使用谷歌瀏覽器內(nèi)核(cordova-plugin-geolocation)定位，但是由于墻的存在,所以這個(gè)定位目前來說是 無法使用的，于是用百度定位就成了一個(gè)選擇。

百度定位首先要申請(qǐng)一個(gè)百度定位sdk的key，注意要不要選擇瀏覽器而要選擇androidsdk

5.PNG

注意包名就是創(chuàng)建項(xiàng)目時(shí)輸入的com.niufennan.jtodos,SHA1的生成方法可以自行百度。

關(guān)于cordova安裝百度定位插件的文章有好多，這里就不在詳細(xì)描述，大概說一下步驟：

安裝插件：

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));
        }
    );
},

注意，定位必須使用真機(jī)測(cè)試

插入我的老紅米，然后運(yùn)行cordova run：

結(jié)果：

6.jpg

定位成功，在百度地圖上測(cè)試經(jīng)緯度，基本符合當(dāng)前地點(diǎn)。

此章暫時(shí)告一段落，下一章將進(jìn)行天氣，心情等功能的實(shí)現(xiàn)，并看篇幅決定是否進(jìn)行融合

謝謝觀看