若是你想開發一個應用(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：

結果：

定位成功，在百度地圖上測試經緯度，基本符合當前地點。

此章暫時告一段落，下一章將進行天氣，心情等功能的實現，並看篇幅決定是否進行融合

謝謝觀看