前言

轉(zhuǎn)眼間已經(jīng)參與過我廠好幾個(gè)小程序的開發(fā)了，下面本妹子將開發(fā)中的那些注意點(diǎn)和各位小伙伴們分享下，妥妥的干貨一枚。

一、WXML

不要換行寫，有空格不行

微信開發(fā)者工具不會(huì)對(duì)代碼進(jìn)行trim操作，如果代碼中換行，頁(yè)面也直接換行。

wrap.png

wx:if vs hidden

一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運(yùn)行時(shí)條件不大可能改變則 wx:if 較好。

圖片處理

1.大圖片也會(huì)造成頁(yè)面切換的卡頓
有一部分小程序會(huì)在頁(yè)面中引用大圖片，在頁(yè)面后退切換中會(huì)出現(xiàn)掉幀卡頓的情況。
2.圖片占容量
代碼包限制是2MB，圖片占用空間較大，建議都上傳到CDN上，代碼里直接引用鏈接。
3.大圖片小點(diǎn)擊位
小程序主要在手機(jī)端運(yùn)行，手機(jī)屏幕大小有限，所以盡量點(diǎn)擊位大點(diǎn)。
4.圖片截取
存在圖片沒有按原圖寬高比例顯示，可以設(shè)置image組件的mode屬性，來保持原圖寬高比。
5.CSSSprites
所有零星圖片都包含到一張大圖中，減少請(qǐng)求數(shù)

WXS 模塊

每個(gè) wxs 模塊均有一個(gè)內(nèi)置的 module 對(duì)象。
直接在wxml中引入，可以將寫需要轉(zhuǎn)化數(shù)據(jù)的寫進(jìn)去，防止給setData加負(fù)擔(dān)

使用了過大的 WXML 節(jié)點(diǎn)數(shù)目

一個(gè)太大的WXML節(jié)點(diǎn)樹會(huì)增加內(nèi)存的使用，樣式重排時(shí)間也會(huì)更長(zhǎng)，建議一個(gè)頁(yè)面使用少于1000個(gè)WXML的節(jié)點(diǎn)，節(jié)點(diǎn)樹深度少于30層，子節(jié)點(diǎn)數(shù)不大于60個(gè)

二、WXSS

Css偽類看不到

在微信開發(fā)者工具中，Styles不會(huì)顯示Css偽類，喜歡寫::before或:first-child的小伙伴們請(qǐng)注意了，你的偽類在控制臺(tái)是看不到的,所以本妹子不建議在小程序里用Css偽類，以防找不到問題點(diǎn)不好修復(fù)bug。

小程序button自帶給after偽類添加了邊框，通過開發(fā)者工具是看不到after,我們需要自行去掉邊框。

button::after {
  border: none;
}

hover偽類則可以用小程序自帶的屬性hover-class代替。

自定義顏色限制

不是所以顏色配置都能隨心所欲，比如導(dǎo)航欄標(biāo)題顏色，僅支持 black / white；下拉 loading 的樣式，僅支持 dark / light。所以出視覺圖關(guān)注下。

滾動(dòng)區(qū)域沒有開啟慣性滾動(dòng)

當(dāng)加了overflow: scroll時(shí)，IOS下需要額外設(shè)置，來開啟慣性滾動(dòng)。

  -webkit-overflow-scrolling: touch

translateZ

有些動(dòng)畫效果，如swiper中有絕對(duì)定位，切換時(shí)有卡頓效果，可以添加下面

transform: translateZ(0);

開啟3D引擎，觸發(fā)GPU加速，讓動(dòng)畫更流暢。

三、JS

JavaScript 支持情況

如果需要支持到IOS8話，建議下面js方法都不使用。

image.png

分享事件不支持異步

如果你想自定義分享圖片，則在生命周期onShareAppMessage中編寫如下所示：

Page({
  onShareAppMessage: function (res) {
    return {
      title: '自定義轉(zhuǎn)發(fā)標(biāo)題',
      imageUrl: 'https://blog.frontendx.cn/images/logo.png'
    }
  }
})

但是onShareAppMessage不能支持異步，如果你想從接口里獲取分享圖片URL，必須在onLoad提前讀取并放入Data中

小程序有并發(fā)限制

wx.request、wx.uploadFile、wx.downloadFile 的最大并發(fā)限制是 10 個(gè)。

所有為了保險(xiǎn)起見，需要寫個(gè)請(qǐng)求隊(duì)列，如果并發(fā)量大于10，則等待請(qǐng)求。

采用公共方法和組件

編寫公共方法和組件，可以避免重復(fù)造輪子。
1.公共埋點(diǎn)方法
2.各種處理js的方法（轉(zhuǎn)https，throttle，formatTime等）
3.公共組件（iphonex兼容組件，倒計(jì)時(shí)組件等）

catch綁定事件

比如catchtouchmove彈框禁止滑動(dòng)
bind事件綁定不會(huì)阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

循環(huán)中添加key

對(duì)于經(jīng)常要更新的列表需要加上key值，key值相當(dāng)于索引，但是key值不要用index,因?yàn)?code>index在增加刪除的時(shí)候可能不變產(chǎn)生混亂，推薦用唯一標(biāo)示id，對(duì)數(shù)據(jù)改變之后的diff更新比較有很大的性能提升。
PS：如果是單純只顯示的列表，不需要操作更新，那不需要加key。

巧用nextTick

小程序和vue寫法比較相似，也有nextTick,在當(dāng)前同步流程結(jié)束后，下一個(gè)時(shí)間片執(zhí)行 。
比如有些取視圖層的數(shù)據(jù)，可以等頁(yè)面上流程結(jié)束后再取比較準(zhǔn)確

wx.nextTick(() => {
      query.select('.percent-line-toast').boundingClientRect() 
    })

處理后臺(tái)運(yùn)行的js

setTimeout一定伴隨著clearTimeout
setInterval一定伴隨著clearInterval
這些我們經(jīng)常會(huì)滾動(dòng)算高度，倒計(jì)時(shí)，動(dòng)畫中用到。當(dāng)我跳到了另外一個(gè)頁(yè)面還在運(yùn)行，小心后臺(tái)頁(yè)面的js

wx.hide的坑

兩個(gè)都是基于同一個(gè)原生toast實(shí)例實(shí)現(xiàn)的，wx.showLoading()與wx.showToast(), 同時(shí)只能顯示一個(gè)，
wx.hideLoading()也會(huì)隱藏Toast ; wx.hideToast()也會(huì)隱藏Loading，
失敗的提示toast會(huì)一閃而過的問題，可能時(shí)因?yàn)檎{(diào)用了wx.hideLoading()。

http需變https

HTTP是明文傳輸有篡改內(nèi)容的風(fēng)險(xiǎn)，而且有些安卓機(jī)會(huì)不兼容。所以我們需要使用https。 所以開需求評(píng)審的時(shí)候，要注意后端要寫成https，如果是運(yùn)營(yíng)配的數(shù)據(jù)，后端最好有個(gè)轉(zhuǎn)https方法，輸入了url自動(dòng)轉(zhuǎn)成https鏈接。

在微信開發(fā)者工具中，可勾選"不校驗(yàn)合法域名、web-view（業(yè)務(wù)域名）、TLS 版本以及 HTTPS 證書"規(guī)則即可用http，但是在實(shí)體里并沒有這個(gè)選項(xiàng)，所以建議開發(fā)時(shí)就用https路徑。

https.png

埋點(diǎn)的坑

埋點(diǎn)用公共方法，頁(yè)面曝光pv埋點(diǎn)放入onshow生命周期中更加準(zhǔn)確。

預(yù)加載

1.數(shù)據(jù)預(yù)加載
上個(gè)頁(yè)面就將接口請(qǐng)求好，存到對(duì)象中，下個(gè)頁(yè)面直接從對(duì)象中拿，有利有弊，從業(yè)務(wù)角度出發(fā)看是否需要預(yù)加載數(shù)據(jù)
storage也可以存儲(chǔ)數(shù)據(jù)，同一個(gè)微信用戶，同一個(gè)小程序 storage 上限為 10MB。

2. 分包預(yù)加載preloadRule
   preloadRule預(yù)下載分包行為在進(jìn)入某個(gè)頁(yè)面時(shí)觸發(fā)，享有共同的預(yù)下載大小限額 2M。

"preloadRule": {
    "sub1/index": {
      "packages": ["important"]
    }
}

3.圖片預(yù)加載
對(duì)視覺效果要求越來越高，多張圖片如果想動(dòng)畫顯示流暢，可以先加載圖片，直接用request先請(qǐng)求圖片下來。

setData注意點(diǎn)

1. 頻繁的去 setData
存在將未綁定在 WXML 的變量都不需要傳入 setData。
2. 每次 setData 都傳遞大量新數(shù)據(jù)，可局部更新

this.setData({
    list[index] = newList[index]
})

3. 后臺(tái)態(tài)頁(yè)面進(jìn)行 setData

當(dāng)頁(yè)面進(jìn)入后臺(tái)態(tài)（用戶不可見），不應(yīng)該繼續(xù)去進(jìn)行setData，后臺(tái)態(tài)頁(yè)面的渲染用戶是無法感受的，另外后臺(tái)態(tài)頁(yè)面去setData也會(huì)搶占前臺(tái)頁(yè)面的執(zhí)行。也就是上文提到的不要忘了clearTimeout、clearInterval。

小程序web-view返回鍵

web-view內(nèi)嵌的H5頁(yè)面中再用location.href跳轉(zhuǎn)到其他H5頁(yè)面，小程序左上角是沒有返回鍵。
如果需要返回鍵，建議新開web-view,這樣相當(dāng)于打開了個(gè)新的帶web-view小程序原生頁(yè)，這樣返回就會(huì)出來了。

小程序插件限制

image.png

小程序更新

路徑不存在的情況會(huì)同步更新代碼包。但是后面版本，如果用戶微信中已經(jīng)有此小程序，新發(fā)的小程序版本在用戶微信本地不會(huì)自動(dòng)更新。
需要開發(fā)者需要自己做好新老版本兼容。
或者采用強(qiáng)制更新小程序,此時(shí)強(qiáng)制小程序會(huì)重啟并使用新版本。

四、其他

使用分包

由于小程序包大小有限制，整個(gè)小程序所有分包(包括獨(dú)立分包和普通分包)大小不超過 8M，單個(gè)分包/主包大小不能超過 2M，建議把首屏不需要展示的都放入分包中，分包就像H5打出的chunk包一樣，可以按需加載。

及時(shí)清理沒有使用到的代碼和資源

在日常開發(fā)的時(shí)候，我們可能引入了一些新的庫(kù)文件，而過了一段時(shí)間后，由于各種原因又不再使用這個(gè)庫(kù)了，我們常常會(huì)只是去掉了代碼里的引用，而忘記刪掉這類庫(kù)文件了。目前小程序打包是會(huì)將工程下所有文件都打入代碼包內(nèi)，也就是說，這些沒有被實(shí)際使用到的庫(kù)文件和資源也會(huì)被打入到代碼包里，從而影響到整體代碼包的大小。

sitemap 配置

小程序根目錄下的 sitemap.json文件用于配置小程序及其頁(yè)面是否允許被微信索引，文件內(nèi)容為一個(gè) JSON 對(duì)象，如果沒有 sitemap.json ，則默認(rèn)為所有頁(yè)面都允許被索引.

image.png

單元測(cè)試

miniprogram-simulate

模擬 touch 事件、自定義事件觸發(fā)
選取子節(jié)點(diǎn)
更新自定義組件數(shù)據(jù)
觸發(fā)生命周期

檢測(cè)工具

開發(fā)者工具自帶檢測(cè)評(píng)分頁(yè)面，可以分析頁(yè)面存在的問題。

image.png

以及可以通過性能面板查看頁(yè)面性能。

image.png

其中培訓(xùn)視頻以上傳到B站中，歡迎小伙伴們來圍觀評(píng)論^ ^
https://www.bilibili.com/video/av56083647

相關(guān)鏈接

• 微信開發(fā)指南
• 原文地址:https://raoenhui.github.io/wechat/2019/06/18/miniapp/index.html
• 視頻地址:https://www.bilibili.com/video/av56083647

本文章將持續(xù)更新中...,歡迎小伙伴們一起提建議
Happy coding .. :)