小程式那些事-入門篇

以我們的DEMO專案為例，小程式最主要的頁面結構如下圖所示：

• app.json 小程式全域性配置檔案，主要用於小程式頁面路徑、頁面視窗表現、網路超時等配置。
• app.js 小程式全域性註冊入口，App()用來註冊一個小程式，全域性只有一個，全域性的資料也可以放到這裡面來操作。
• app.wxss 定義全域性的一些樣式檔案。
• project.config.json 小程式專案配置檔案，類似package.json，可配置編譯引數以及小程式appid等資訊。
• page.json 與app.json相近的一個配置檔案，不過只對當前頁面生效，裡面的配置會覆蓋全域性app.json的配置，並且新增滾動條相關配置。

生命週期

• onLoad 在page load的時候會執行這個鉤子，並可以獲得跳轉相應的引數。
• onShow 小程式在每次顯示的時候會觸發這個鉤子，包括頁面載入後的顯示以及home之後再啟用檢視時候的顯示。
• onHide 與上面類似，不過是在隱藏的時候觸發
• onLaunch 小程式初始化完成會觸發這個鉤子，一次APP週期只觸發一次
• onError 全域性監聽錯誤鉤子，小程式有任何錯誤都會觸發這個鉤子，建議可以全域性埋點錯誤量

具體各個生命週期的細節及流程，可以參考下圖：

資料繫結&渲染

資料繫結使用 Mustache 語法（雙大括號）將變數包起來，類似Vue的繫結方式，具體可見下圖：

條件渲染有wx-if與wx-hidden，if為惰性的，只在要顯示的時候才會渲染，而hidden則是載入的時候就渲染，只不過隱藏而已，具體用法如下：

在元件上使用 wx:for 控制屬性繫結一個陣列，即可使用陣列中各項的資料重複渲染該元件，預設陣列的當前項的下標變數名預設為 index，陣列當前項的變數名預設為 item，也可以通過wv:for-item自定義item名，注意這裡的條件渲染不能像我們常用的for迴圈那樣使用，具體用法見下圖：

導航

• wx.navigateTo 保留當前頁面，跳轉到應用內的某個頁面，可攜帶引數，在onLoad的時候獲取。
• wx.navigateBack 預設返回到上一頁，根據引數不同可以一次返回到多個路由棧之前的頁面。
• wx.redirectTo 關閉當前頁面棧，並跳轉到下一個頁面。
• wx.reLaunch 關閉所有頁面，開啟發哦應用的某個頁面，但是值得注意的是APP的onLaunch不會觸發執行。
• wx.switchTab 跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面

具體用法如下：

地圖

• scale 調整縮放級別，取值範圍為5-18
• longitude（latitude） 設定地圖中心的經緯度，注意如果我們要設定自己的位置，getLocation 時候需要設定成gcj02，而且同時兩個不同type獲取位置的時候type會自動覆蓋。
• markers 地圖覆蓋物，不支援調整圖層優先順序。
• polyline 可以繪製一組給定的經緯度路徑，小程式不制止畫區域並填充，如果有需求可以用路線代替，區域api將在後面小程式會支援。
• bindregionchange 視野發生變化的時候觸發，一般監聽地圖變化去執行操作需要根據實際需求對這個監聽進行節流或者近距離去抖操作，以免頻繁無用操作。
• include-points 縮放視野以包含所有給定的座標點，如果需要的是中心點不動的最佳檢視則需要去手動計算對角兩個座標點，然後放大或者縮小地圖。
• show-location 顯示帶有方向的當前定位點，安卓和IOS的圖示不一樣，且不可修改圖示，如果有特殊圖示需求的可以嘗試用maekers代替當前定位。

• getCenterLocation 獲取當前地圖中心的經緯度，返回的是 gcj02 座標系，在多次setCenter之後，有些手機上獲取不準確，可能獲取到前一個位置。
• moveToLocation 將地圖中心移動到當前定位點，需要配合map元件的show-location使用，如果跟小程式的埋點方法同時使用的時候IOS上會有大概率失效。
• getScale 獲取當前地圖的縮放級別
• getRegion 獲取當前地圖的視野範圍
• translateMarker 平移marker，帶動畫

WEBVIEW

web-view 元件是一個可以用來承載網頁的容器，會自動鋪滿整個小程式頁面。個人型別與海外型別的小程式暫不支援使用，元件本身只有兩個屬性可配置：

<web-view/>網頁中可使用JSSDK 1.3.2及以上版本提供的介面呼叫微信的api，支援主流JS SDK方法，並且同時也可以呼叫部分小程式api，具體可呼叫介面如下：

1. 通過傳送約定好的資料，並且呼叫後退方法，小程式監聽到特定的資料做相應的操作。
2. 傳送約定好的資料，小程式呼叫分享，獲取資料並執行相應操作，這個方案可以實現我們在微信裡常用的H5自定義分享功能
3. H5跳轉到某個小程式頁面，並攜帶相應引數，此場景多用於H5呼叫支付，小程式可以和H5約定好協議，包裝支付元件

除錯工具

為了幫助開發者簡單和高效地開發和除錯微信小程式，微信官方在原有的公眾號網頁除錯工具的基礎上，推出了全新的 微信開發者工具，整合了公眾號網頁除錯和小程式除錯兩種開發模式。大體介面長這樣：

• 需要微信授權開發者許可權才能真機掃碼除錯
• 如果線下域名沒法授權，需要在除錯工具設定裡面勾選不校驗安全域名及業務域名等
• 同一個二維碼同時只能一人使用

• 需要微信授權才能掃碼預覽
• 如果是線下環境需要開啟在小程式右上角開啟除錯模式，不然webview不能開啟非業務域名
• 同一個可多人預覽，不過有25分鐘有效期，過期需要重新生成

其他

1. 小程式更新並不是全量更新，98%使用者會實時更新，但是有少量使用者會延遲幾天更新，如果產品有強更需求，可以用getUpdateManager下載更新，並提示使用者更新。
2. 上線之前記得Double Check業務域名及安全域名的配置知否遺漏，包括H5裡面有應用iframe的也需要新增安全域名。
3. 小程式資料助手很好用，分析資料非常方便，雖然有些小BUG。
4. 整體來說微信小程式還是不錯的，期待能變得更好。