小程序開發(fā)入門
最近開發(fā)了幾個(gè)微信小程序，現(xiàn)在將其中比較重要的點(diǎn)列出來，供參考。在文中，開發(fā)者服務(wù)器（以下簡(jiǎn)稱：服務(wù)端）。
項(xiàng)目結(jié)構(gòu)
新建項(xiàng)目的過程略，請(qǐng)參考微信小程序官網(wǎng)。假設(shè)你現(xiàn)在已經(jīng)完成了項(xiàng)目的創(chuàng)建過程，那么擺在你面前的應(yīng)該是類似這樣的一個(gè)目錄。
[圖片上傳失敗...(image-d135ac-1528371907882)]
如上圖所示，我們看到的目錄結(jié)構(gòu)大致如下：
---------pages（各個(gè)頁面的目錄）
-----pages1（頁面一）
----page1.js(js代碼在這)
----page1.wxml（頁面布局）
----page1.wxss（css文件）
-----pages2(頁面二)
......
---------utils（此目錄包含各種util方法）
---------app.js（類似于Android的Application，維護(hù)著小程序App的生命周期以及globalData）
---------app.json（小程序Pages的清單文件）
---------app.wxss（全局樣式）
---------project.config.json（項(xiàng)目配置文件）
路由&&生命周期
小程序里面的路由全部由框架自己實(shí)現(xiàn)，我們只需要簡(jiǎn)單調(diào)用即可。
| 路由方式 | 觸發(fā)時(shí)機(jī) | 路由前頁面 | 路由后頁面 |
|---|---|---|---|
| 初始化 | 小程序打開第一個(gè)頁面 | onLoad,onShow | |
| 打開新頁面 | wx.navigateTo 或使用組件<navigator open-type="navigateTo"/>
|
onHide | onLoad,onShow |
| 頁面重定向 | 調(diào)用 API wx.redirectTo 或使用組件 <navigator open-type="redirectTo"/>
|
onUnload | onLoad, onShow |
| 頁面返回 | 調(diào)用 API wx.navigateBack 或使用組件<navigator open-type="navigateBack">或用戶按左上角返回按鈕 |
onUnload | onShow |
| 重啟動(dòng) | 調(diào)用 API wx.reLaunch 或使用組件 <navigator open-type="reLaunch"/>
|
onUnload | onLoad, onShow |
| Tab 切換 | 調(diào)用 API wx.switchTab 或使用組件 <navigator open-type="switchTab"/> 或用戶切換 Tab |
略 | 略 |
登錄
登錄
小程序的登錄如上圖所示，具體分為如下兩步：
1. 小程序調(diào)用wx.login()獲取臨時(shí)登錄憑證code，并回傳到開發(fā)者服務(wù)器。
2. 服務(wù)端以code換取用戶唯一標(biāo)識(shí)openid和會(huì)話密鑰session_key。之后開發(fā)者服務(wù)器根據(jù)用戶標(biāo)識(shí)來生成自定義登錄態(tài)，用于后續(xù)業(yè)務(wù)邏輯中前后端交互時(shí)識(shí)別用戶身份。
所以小程序登錄這塊的實(shí)現(xiàn)應(yīng)該是這樣：
App({
onLaunch: function() {
wx.login({
success: function(res) {
if (res.code) {
//發(fā)起網(wǎng)絡(luò)請(qǐng)求（請(qǐng)求我們自己的服務(wù)器，將code上傳）
wx.request({
url: 'https://test.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('登錄失敗！' + res.errMsg)
}
}
});
}
})
至此，一個(gè)簡(jiǎn)單的登錄過程就實(shí)現(xiàn)了，但是我們不能每次進(jìn)入小程序或者每次進(jìn)入每個(gè)頁面就登錄，所以wx.login()調(diào)用時(shí)機(jī)就很重要，微信給我們提供了一個(gè)方法wx.checkSession用來檢查用戶當(dāng)前session_key是否有效，判斷小程序是否需要重新登錄。所以一個(gè)較為完成的登錄流程應(yīng)該是這樣：
wx.checkSession({
success: function(){
//session_key 未過期，并且在本生命周期一直有效
},
fail: function(){
// session_key 已經(jīng)失效，需要重新執(zhí)行登錄流程
wx.login() //重新登錄
....
}
})
事件傳參
舉個(gè)例子，我們有個(gè)按鈕，點(diǎn)擊按鈕觸發(fā)某個(gè)函數(shù)，我們需要給該函數(shù)傳參，我們?cè)趺醋瞿兀?/h6>
<button bindtap='submit' data-name="測(cè)試">測(cè)試</button>
submit: function(e){ //在響應(yīng)方法里我們這么取參數(shù)
console.log(e.target.dataset.name)
}
<button bindtap='submit' data-name="測(cè)試">測(cè)試</button>
submit: function(e){ //在響應(yīng)方法里我們這么取參數(shù)
console.log(e.target.dataset.name)
}
總結(jié)起來就是，data-{property}，用來傳遞相關(guān)參數(shù)。
動(dòng)畫
一般實(shí)現(xiàn)動(dòng)畫有兩種思路，第一種就是使用wx.createAnimation(OBJECT)小程序提供的動(dòng)畫API，還有一種就是用canvas畫圖的形式，通過setData改變數(shù)值，從而達(dá)到實(shí)現(xiàn)動(dòng)畫的目的。一般，我們采取第一種實(shí)現(xiàn)方式，通過canvas的方式不推薦，因?yàn)樾枰^為頻繁的調(diào)用setData，從而對(duì)性能產(chǎn)生影響。
Canvas繪圖
小程序定義了豐富的繪圖方法，在此就不一一列舉了。有兩個(gè)比較重要的提一下。一個(gè)是save() ，另一個(gè)是restore()。舉個(gè)例子看一下：
const ctx = wx.createCanvasContext('myCanvas')
// save the default fill style
ctx.save()
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
// restore to the previous saved state
ctx.restore()
ctx.fillRect(50, 50, 150, 100)
ctx.draw()
運(yùn)行結(jié)果如下：
save_restore
可以看到，save保存了當(dāng)前繪圖上下文的狀態(tài)，restore用來恢復(fù)到之前保存的狀態(tài)。
優(yōu)化
優(yōu)化工具
1. 微信提供了性能面板，我們可以借助于它來了解小程序當(dāng)前的性能。
2. Android平臺(tái)可以借助于性能 Trace 工具來進(jìn)行分析，具體操作步驟見官網(wǎng)。
https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tools.html
優(yōu)化建議
一. setData 是小程序開發(fā)中使用最頻繁的接口，也是最容易引發(fā)性能問題的接口（這也就是為什么動(dòng)畫不推薦使用canvas+setData的方式實(shí)現(xiàn)）。所以在使用setData的時(shí)候，應(yīng)注意：
1. 避免頻繁的去 setData
2. 避免每次 setData 都傳遞大量新數(shù)據(jù)
3. 避免后臺(tái)態(tài)頁面進(jìn)行 setData
二.避免使用大圖片
三.上傳圖片時(shí)，注意對(duì)圖片進(jìn)行壓縮傳輸，避免使用原圖
四.使用微信緩存時(shí)，及時(shí)清理緩存數(shù)據(jù)。wx.removeStorage(OBJECT)
五.及時(shí)清理不再使用的代碼，庫(kù)以及圖片資源。
六.避免使用相似度極高的圖片，舉個(gè)例子，比如：向左，向右的箭頭，我們可以不使用兩個(gè)圖片資源，引用一個(gè)圖片資源，然后使用css來控制顯示。
需要注意的點(diǎn):
1. canvas 組件是由客戶端創(chuàng)建的原生組件，它的層級(jí)是最高的，不能通過 z-index 控制層級(jí)。應(yīng)該使用cover-view,覆蓋在原生組件之上的文本視圖，可覆蓋的原生組件除了canvas，還有map、video、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image。示例如下：
<canvas>
<cover-view class="controls">
<cover-view class="play" bindtap="play">
<cover-image class="img" src="/path/to/icon_play" />
</cover-view>
</canvas>
2.小程序頁面數(shù)據(jù)傳遞方式。?key1=value1&key2=value2...。當(dāng)傳遞json串時(shí)，不能這么做，因?yàn)閖son里面帶有？時(shí)會(huì)解析出錯(cuò)。所以可以借助于小程序緩存來實(shí)現(xiàn)。比如A--->B頁面：
A頁面：
let data = JSON.stringify(params)
//保存數(shù)據(jù)到本地緩存
B頁面：
//取出緩存數(shù)據(jù)
JSON.parse(data)
2.ios滑動(dòng)卡頓
-webkit-overflow-scrolling: touch;
微信獲取用戶信息
在以往我們進(jìn)入一個(gè)小程序的時(shí)候，會(huì)出現(xiàn)一個(gè)彈框，類似這樣：
[圖片上傳失敗...(image-a9ec58-1528371907882)]
wx.getUserInfo(OBJECT) //通過這個(gè)方法，我們可以喚起彈框，用于獲取用戶信息
此接口有調(diào)整，使用該接口將不再出現(xiàn)授權(quán)彈窗，請(qǐng)使用 <button open-type="getUserInfo"></button> 引導(dǎo)用戶主動(dòng)進(jìn)行授權(quán)操作。如果使用會(huì)出現(xiàn)如下提示：
[圖片上傳失敗...(image-e7fe3b-1528371907882)]
