微信小程序開發注意指南和優化實踐

前言

轉眼間已經參與過我廠好幾個小程序的開發了，下面本妹子將開發中的那些注意點和各位小夥伴們分享下，妥妥的乾貨一枚。

1、WXML

不要換行寫，有空格不行

微信開發者工具不會對代碼進行trim操做，若是代碼中換行，頁面也直接換行。

wx:if vs hidden

通常來講，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。所以，若是須要頻繁切換的情景下，用 hidden 更好，若是在運行時條件不大可能改變則 wx:if 較好。

圖片處理

1.大圖片也會形成頁面切換的卡頓
有一部分小程序會在頁面中引用大圖片，在頁面後退切換中會出現掉幀卡頓的狀況。
2.圖片佔容量
代碼包限制是2MB，圖片佔用空間較大，建議都上傳到CDN上，代碼裏直接引用連接。
3.大圖片小點擊位
小程序主要在手機端運行，手機屏幕大小有限，因此儘可能點擊位大點。
4.圖片截取
存在圖片沒有按原圖寬高比例顯示，能夠設置image組件的mode屬性，來保持原圖寬高比。
5.CSSSprites
全部零星圖片都包含到一張大圖中，減小請求數

WXS 模塊

每一個 wxs 模塊均有一個內置的 module 對象。
直接在wxml中引入，能夠將寫須要轉化數據的寫進去，防止給setData加負擔

使用了過大的 WXML 節點數目

一個太大的WXML節點樹會增長內存的使用，樣式重排時間也會更長，建議一個頁面使用少於1000個WXML的節點，節點樹深度少於30層，子節點數不大於60個

2、WXSS

Css僞類看不到

在微信開發者工具中，Styles不會顯示Css僞類，喜歡寫::before或:first-child的小夥伴們請注意了，你的僞類在控制檯是看不到的,因此本妹子不建議在小程序裏用Css僞類，以防找不到問題點很差修復bug。

小程序button自帶給after僞類添加了邊框，經過開發者工具是看不到after,咱們須要自行去掉邊框。

button::after {
  border: none;
}

hover僞類則能夠用小程序自帶的屬性hover-class代替。

部分CSS3屬性不能用

如transform:rotate(180deg)，不能用。

自定義顏色限制

不是因此顏色配置都能爲所欲爲，好比導航欄標題顏色，僅支持 black / white；下拉 loading 的樣式，僅支持 dark / light。因此出視覺圖關注下。

滾動區域沒有開啓慣性滾動

當加了overflow: scroll時，IOS下須要額外設置：
-webkit-overflow-scrolling: touch，來開啓慣性滾動。

3、JS

JavaScript 支持狀況

若是須要支持到IOS8話，建議下面js方法都不使用。

分享事件不支持異步

若是你想自定義分享圖片，則在生命週期onShareAppMessage中編寫以下所示：

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

可是onShareAppMessage不能支持異步，若是你想從接口裏獲取分享圖片URL，必須在onLoad提早讀取並放入Data中

小程序有併發限制

wx.request、wx.uploadFile、wx.downloadFile 的最大併發限制是 10 個。

全部爲了保險起見，須要寫個請求隊列，若是併發量大於10，則等待請求。

採用公共方法和組件

編寫公共方法和組件，能夠避免重複造輪子。
1.公共埋點方法
2.各類處理js的方法（轉https，throttle，formatTime等）
3.公共組件（iphonex兼容組件，倒計時組件等）

catch綁定事件

好比catchtouchmove彈框禁止滑動
bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定能夠阻止冒泡事件向上冒泡。

循環中添加key

對於常常要更新的列表須要加上key值，key值至關於索引，可是key值不要用index,由於index在增長刪除的時候可能不變產生混亂，推薦用惟一標示id，對數據改變以後的diff更新比較有很大的性能提高。
PS：若是是單純只顯示的列表，不須要操做更新，那不須要加key。

巧用nextTick

小程序和vue寫法比較類似，也有nextTick ,在當前同步流程結束後，下一個時間片執行 。
好比有些取視圖層的數據，能夠等頁面上流程結束後再取比較準確

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

處理後臺運行的js

setTimeout必定伴隨着clearTimeout
setInterval必定伴隨着clearInterval
這些咱們常常會滾動算高度，倒計時，動畫中用到。當我跳到了另一個頁面還在運行，當心後臺頁面的js

wx.hide的坑

兩個都是基於同一個原生toast實例實現的，wx.showLoading()與wx.showToast(), 同時只能顯示一個，
wx.hideLoading()也會隱藏Toast ; wx.hideToast()也會隱藏Loading，
失敗的提示toast會一閃而過的問題，可能時由於調用了wx.hideLoading()。

http需變https

HTTP是明文傳輸有篡改內容的風險，並且有些安卓機會不兼容。因此咱們須要使用https。 因此開需求評審的時候，要注意後端要寫成https，若是是運營配的數據，後端最好有個轉https方法，輸入了url自動轉成https連接。

在微信開發者工具中，可勾選"不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書"規則便可用http，可是在實體裏並無這個選項，因此建議開發時就用https路徑。

埋點的坑

埋點用公共方法，頁面曝光pv埋點放入onshow生命週期中更加準確。

預加載

1.數據預加載
上個頁面就將接口請求好，存到對象中，下個頁面直接從對象中拿，有利有弊，從業務角度出發看是否須要預加載數據
storage也能夠存儲數據，同一個微信用戶，同一個小程序 storage 上限爲 10MB。

1. 分包預加載preloadRule

preloadRule預下載分包行爲在進入某個頁面時觸發，享有共同的預下載大小限額 2M。

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

3.圖片預加載
對視覺效果要求愈來愈高，多張圖片若是想動畫顯示流暢，能夠先加載圖片，直接用request先請求圖片下來。

setData注意點

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

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

3. 後臺態頁面進行 setData

當頁面進入後臺態（用戶不可見），不該該繼續去進行setData，後臺態頁面的渲染用戶是沒法感覺的，另外後臺態頁面去setData也會搶佔前臺頁面的執行。也就是上文提到的不要忘了clearTimeout、clearInterval。

4、其餘

使用分包

因爲小程序包大小有限制，整個小程序全部分包(包括獨立分包和普通分包)大小不超過 8M，單個分包/主包大小不能超過 2M，建議把首屏不須要展現的都放入分包中，分包就像H5打出的chunk包同樣，能夠按需加載。

及時清理沒有使用到的代碼和資源

在平常開發的時候，咱們可能引入了一些新的庫文件，而過了一段時間後，因爲各類緣由又再也不使用這個庫了，咱們經常會只是去掉了代碼裏的引用，而忘記刪掉這類庫文件了。目前小程序打包是會將工程下全部文件都打入代碼包內，也就是說，這些沒有被實際使用到的庫文件和資源也會被打入到代碼包裏，從而影響到總體代碼包的大小。

sitemap 配置

小程序根目錄下的 sitemap.json文件用於配置小程序及其頁面是否容許被微信索引，文件內容爲一個 JSON 對象，若是沒有 sitemap.json ，則默認爲全部頁面都容許被索引.

單元測試

miniprogram-simulate

模擬 touch 事件、自定義事件觸發
選取子節點
更新自定義組件數據
觸發生命週期

檢測工具

開發者工具自帶檢測評分頁面，能夠分析頁面存在的問題。

wxss 覆蓋率較低，有些動畫樣式好比@keyframes是檢測不到的。

以及能夠經過性能面板查看頁面性能。

其中培訓視頻以上傳到B站中，歡迎小夥伴們來圍觀評論^ ^
https://www.bilibili.com/video/av56083647

相關連接

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

Happy coding .. :)