在開發(fā)小程序的時候，或多或少都會遇到些問題，也有很多容易被忽略的問題；前端以提升用戶體驗為主，適當規(guī)避問題、優(yōu)化代碼可提升性能，可大大提升用戶體驗。
注意事項
1. 自定義組件
自定義組件內wxss里不能使用標記選擇器、ID選擇器、屬性選擇器；
/* 錯誤 */
#id{...}
image{...}
a[href]{...}
/* 正確 */
.class{...}
2. wx:for
wx:for必須和wx:key一起使用，wx:key也要給值，不能為空；
<view wx:for="{{list}}" wx:key="index">...</view>
3. 本地資源不能通過wxss獲取
- background-image：可以使用網(wǎng)絡圖片或者base64格式
/*網(wǎng)絡圖片*/
background-image: url(https://www.test.com/images/test.jpg);
/*base64圖片*/
background-image: url(data:image/png;base64,...);
- 使用image標簽
<image src="/images/test.png"></image>
4. getCurrentPages
不要在onLaunch的時候調用getCurrentPages()，因為這個時候page還沒有生成，只會獲取到一個空對象。
5. tabbar
- tabbar頁面只能使用switchTab進行跳轉。
wx.switchTab({
url: "../index/index"
})
- tabbar最少配置2個，最多配置5個。
- tabBar的iconPath和selectedIconPath屬性可以接受一個圖片的路徑，這個圖片必須是本地圖片不能是網(wǎng)絡圖片。
"list": [
{
"pagePath": "index/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "組件"
},
{
"pagePath": "index/index2",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "接口"
}
]
6. 一個頁面正常顯示，必須經(jīng)歷的3個生命周期：
首先onLoad，其次onShow，最后onReady。
onLoad: function() {...},
onShow: function() {...},
onReady: function() {...}
7. 全局變量
常用（通用）變量，建議在app.js里定義全局變量，方便調用。
globalData: {
appid: "123456",
requestUrl: "https://www.test.com/"
}
使用方法，使用頁面直接調用：
var app = getApp();
...
onLoad: function(){
let appid = app.globalData.appid;
}
8. wx.request注意事項
- url中不能有端口。
- wx.request的默認超時時間和最大超時時間都是60s。
- wx.request的最大并發(fā)數(shù)是5，也就同時只能發(fā)起5個請求。
- 請求地址必須是https開頭。
wx.request({
url: "https://www.test.com",
method: "POST",
data: {
token: "token"
},
success: function(res) {
...
}
})
9. 一個應用同時只能打開5個頁面
wx.navigateTo打開頁面不會銷毀之前的頁面，如果頁面層數(shù)較多注意使用 wx.redirectTo。
更多小程序跳轉方式請前往：【微信小程序：頁面跳轉及參數(shù)傳遞】
10. json文件
json文件中不能有注釋，否則編譯不通過。
// 錯誤
"window": {
"navigationBarTitleText": "華美整唄" // 設置名字
}
// 正確
"window": {
"navigationBarTitleText": "華美整唄"
}
11. pages
小程序頁面必須在pages進行配置，否則不能訪問。
"pages": [
"pages/login/login",
"pages/index/index"
]
12. image
- image組件默認寬度300px、高度240px，如不設置，則顯示默認寬高。
-
image組件中二維碼/小程序碼圖片不支持長按識別，僅在wx.previewImage中支持長按識別。
在這里插入圖片描述
13. 分享
- 小程序中的分享只能分享到聊天或群里，不能分享到朋友圈。
- 掃描所分享的二維碼圖片，只能跳轉到正式版，無法跳轉到線下版本；
-
如果需要測試二維碼參數(shù)是否正確或者模擬掃碼場景，可以在開發(fā)者工具通過二維碼編譯：
在這里插入圖片描述
優(yōu)化類
1. setData
- 開發(fā)過程中，盡量少去setData，大量的setData數(shù)據(jù)會導致頁面卡頓或下拉延時等。
- 不宜一次setData過多新數(shù)據(jù)，每次setData都會生成一個腳本，數(shù)據(jù)量太大會導致腳本編譯執(zhí)行時間過長，占用webView js線程。
- 在wxml里沒有用到的變量等最好不要setData。
2. 圖片
-
圖片過大或者過多都有可能導致iOS客戶端內存占用上升，從而觸發(fā)系統(tǒng)回收小程序頁面。
在這里插入圖片描述 - 圖片盡量都放在遠程靜態(tài)資源里，不要放到代碼包里。
- 圖片盡量在不同地方生成不同尺寸圖片，如：列表頁200px，詳情頁750px；
3.代碼包優(yōu)化（小程序代碼包大小是2M）
- 兩個及以上頁面要封裝。
- 不使用的代碼和資源要及時清除。
- 能用代碼解決的盡量不要用圖片，如：圖標等。
4. 緩存
- 只要用戶不主動清除緩存，則緩存一直存在。
- 注意移除和清除的區(qū)別，刪除某一個key的緩存，使用wx.removeStorage；清除所有緩存使用wx.clearStorage。
- 小程序的緩存永久存在（可以設置定時清除），不存在過期時間這個概念。
- 小程序的本地緩存有容量上限，最大不允許超過10MB。
5. 動畫
小程序最大特點就是：快；大量使用動畫效果將大大消耗手機性能，降低用戶體驗，雖然現(xiàn)在手機性能比以前好多了，但是動畫還是適量使用即可。
6. 數(shù)據(jù)加載
避免首頁進入時加載過多數(shù)據(jù)，不然會因為數(shù)據(jù)過大導致用戶看到一定時間的白屏，此時我們應該做分屏加載，保證用戶進入立馬就能看到首屏內容。
總結
上面都是在小程序開發(fā)過程發(fā)現(xiàn)的問題及優(yōu)化事項，注意事項遠不如此，希望大家把自身發(fā)現(xiàn)的一些該注意的問題發(fā)出來，方便更多的人，本文持續(xù)更新！
