微信小程序練手 demo 之天氣小程序總結(流水帳)

想大體瞭解微信小程序的基礎結構，加上以前沒有寫過 MVVM 結構，也藉此瞭解一下，因爲以前寫過天氣的 demo，此次也用比較熟悉的天氣預報做爲實現的功能，所使用的接口是和風天氣，利用到的 API 有 實況天氣， 多日天氣預報， 逐小時天氣預報， 生活指數， 固然實際上還有空氣質量、歷史天氣等其餘數據，此處使用幾個做爲展現。

微信小程序開發以前須要註冊微信公衆平臺，在 微信小程序 · 簡易教程 處有詳細的步驟，註冊完下載微信開發者工具，填寫申請完開發者帳號之後的 AppID(在 mp.weixin.com 開發 -> 開發設置 中查看)，而後直接選擇 建立 QuickStart 項目 (剛開始沒看清楚選成雲開發了，後來才發現跟教程的不太對，以後再接觸雲開發吧……)，而後到如下的圖片界面：

每一個頁面的結構基本由 xx.js xx.wxml xx.wxss xx.json 構成，相似 HTML + CSS + JavaScript，本身體會與後者不一樣的是：

• wxml 相似於 HTML，可是小程序規定了所能使用的組件(構成頁面的基本單位)，有 view ，button，web-view等等，此外還使用自定義組件，自定義組件須要在 json 文件中先聲明，再寫 wxml 模板，js 中註冊，詳細步驟在 微信小程序 · 自定義組件。在寫這個天氣 demo 時只用到了小程序提供的基礎組件，自定義組件還須要進一步瞭解，

• wxss 相似於 CSS，只是在選擇器中作了不少限制，例如子選擇器a > b，後代選擇器a b，是不可用的，提倡直接使用 .class
• js 與 JavaScript 相似，只是執行環境不一樣，不須要像瀏覽器端，寫document window等內置對象，語法是類似的，只要稍微熟悉一下就能夠了
• json 配置頁面功能，若是寫過 Chrome 的擴展的話，應該很熟悉了，就跟manifest.json相似，小程序裏能夠配置權限，是否全局開啓下拉刷新，是否禁止上下滾動等等

大體看了一遍文檔之後，開始以 quickstart 項目爲模板寫上本身的代碼，頁面佈局以下：

因而以上面的結構分好各塊代碼，每塊使用一個 view包括，內部按內容再細分，其中，每小時天氣預報與多日天氣預報因爲信息過多，採用 scroll-view 展現，以滑動的形式瀏覽所有數據。實況天氣中數據不是不少，直接的分塊的 view中把各個組件寫上，並寫上對應的數據綁定變量，每小時、多日、生活指數中，因爲是多個相似的數據，採用 view wx:for的形式，獲取數據後循環渲染。

樣式的部分，每小時、多日天氣預報的樣式使用 item { flex: 1 }使每一小塊均勻分佈，生活指數分兩列顯示，容器 flex 佈局，flex-wrap 設置爲 wrap，給每一個 item 設置 { width: 50%; }。

而後就是編寫 js，在進入小程序之後，首先利用微信的請求定位，獲取到對應的經緯度，再經過 騰訊位置服務 轉換爲具體的地理位置顯示，再把獲取到的地理位置做爲參數向和風天氣發出請求，獲得響應之後得到響應的數據，其中一部分數據須要通過處理簡化，而後保存到 page.data，同時視圖層渲染對應的數據

獲取到的天氣數據中，日期是包含年份的，一般看天氣的信息有月日便可，因而在得到響應的數據之後先對日期的部分進行處理：

for (let i = 0; i < he.daily_forecast.length; i++) { // 去掉日期中的年份
            res.data.daily_forecast[i].date = res.data.daily_forecast[i].date.slice(5)
}

而後再進行 setData 操做

在大體基本功能完成後，實況天氣的上方新加了一個 input，用於手動輸入城市查詢那個城市的天氣，手動輸入查詢的城市不通過微信定位，直接把輸入的內容做爲參數向天氣接口查詢，成功則顯示對應的城市及具體的天氣，若是查詢的城市有誤，則彈出 toast 提示查詢失敗。在手動查詢城市天氣完之後，清空 input 的內容，所以須要在 input 的組件中加上 value={{inputValue}}，查詢完之後把 page.data.inputValue 值置爲空。另外，在真機體驗時發現若是網絡很差，會加載得很慢，等待時間會很長，數據一直顯示不了，因而在進入小程序時先加載一個 loading，在請求成功時去掉 loading，優化用戶體驗。添加了下拉刷新，首先在 json 中設置 "enablePullDownRefresh": true，而後在 js 中寫對應的函數便可

onPullDownRefresh: function() { 
    getWeather()
}

關於騰訊位置服務的使用，首先下載相關的 js sdk，而後在微信公衆平臺的開發設置中設置 request 合法域名，添加 https://apis.map.qq.com(一樣地，所用到的天氣 API 的地址也是如此)，而後引入 js sdk 並實例化就可使用了

// 引入SDK核心類
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
Page({
    onLoad: function () {
            // 實例化API核心類
            qqmapsdk = new QQMapWX({
                key: '申請的key'
            });
        },
    onShow: function () {
            qqmapsdk...
    }
})

整個小程序 demo 的過程當中，沒遇到太大的困難，大概也是由於寫的是比較簡單的練手項目而已，不少小程序的功能還沒用到，例如多個頁面之間的數據傳遞，路由，插件等等，還須要進一步學習。另外，微信開發者工具備時候會出現打不了中文的狀況，搜了一下是個常見的 bug，須要重啓微信開發者工具。調試工具中沒法查看僞元素樣式也有點不方便，但願以後微信開發者工具能改進這方面，這樣的話體驗可以能好。

另外附上個人微信小程序 demo，能夠掃碼體驗一下(圖標本身瞎畫的晴天娃娃)，因爲還須要優化，體驗不佳的話還請諒解