微信小程序開發注意指南和優化實踐
- 2019 年 10 月 6 日
- 筆記
「
轉眼間已經參與過好幾個小程序的開發了，下面我將開發中的那些注意點和各位小夥伴們分享下，妥妥的乾貨一枚。
」
WXML
1
不要換行寫
微信開發者工具不會對代碼進行trim操作，如果代碼中換行，頁面也直接換行。
2
wx:if vs hidden
一般來說，wx:if有更高的切換消耗而hidden有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。
3
圖片處理
1.大圖片也會造成頁面切換的卡頓有一部分小程序會在頁面中引用大圖片，在頁面後退切換中會出現掉幀卡頓的情況。
2.圖片占容量代碼包限制是2MB，圖片佔用空間較大，建議都上傳到CDN 上，代碼里直接引用鏈接。
3.大圖片小點擊位 小程序主要在手機端運行，手機屏幕大小有限，所以盡量點擊位大點。
4.圖片截取存在圖片沒有按原圖寬高比例顯示，可以設置 image 組件的 mode 屬性，來保持原圖寬高比。
5.CSSSprites所有零星圖片都包含到一張大圖中，減少請求數。
4
WXS模塊
每個 wxs 模塊均有一個內置的 module 對象。 直接在wxml中引入，可以將寫需要轉化數據的寫進去，防止給setData加負擔。
WXSS
1
Css偽類看不到
在微信開發者工具中， Styles不會顯示Css偽類，喜歡寫::before或:first-child的小夥伴們請注意了，你的偽類在控制台是看不到的,所以本妹子不建議在小程序里用 Css 偽類，以防找不到問題點不好修復bug。 小程序button自帶給after偽類添加了邊框，通過開發者工具是看不到 after ,我們需要自行去掉邊框。
button::after { border: none;}
hover偽類則可以用小程序自帶的屬性hover-class代替。
2
自定義顏色限制
不是所以顏色配置都能隨心所欲，比如導航欄標題顏色，僅支持black / white；下拉 loading 的樣式，僅支持 dark / light。所以出視覺圖關注下。 滾動區域沒有開啟慣性滾動 當加了overflow: scroll時，IOS 下需要額外設置：-webkit-overflow-scrolling: touch，來開啟慣性滾動。
JS
1
JavaScript 支持情況
如果需要支持到 IOS8 話，建議下面 js 方法都不使用。
2
分享事件不支持異步
如果你想自定義分享圖片，則在生命周期onShareApp
Message中編寫如下所示：
Page({ onShareAppMessage: function (res) { return { title: '自定義轉發標題', imageUrl: 'https://raoenhui.github.io/images/logo.png' } }}
但是 onShareAppMessage 不能支持異步，如果你想從接口裡獲取分享圖片URL，必須在 onLoad 提前讀取並放入Data中。
3
小程序有並發限制
wx.request、wx.uploadFile、wx.downloadFile 的最大並發限制是 10 個。所有為了保險起見，需要寫個請求隊列，如果並發量大於10，則等待請求。
4
循環中添加key
對於經常要更新的列表需要加上key值，key值相當於索引，但是key值不要用index ,因為index在增加刪除的時候可能不變產生混亂，推薦用唯一標示id ，對數據改變之後的diff更新比較有很大的性能提升。PS：如果是單純只顯示的列表，不需要操作更新，那不需要加key 。
5
http需變https
HTTP是明文傳輸有篡改內容的風險，而且有些安卓機會不兼容。所以我們需要使用https。 所以開需求評審的時候，要注意後端要寫成https，如果是運營配的數據，後端最好有個轉https方法，輸入了url自動轉成https鏈接。 在微信開發者工具中，可勾選」不校驗合法域名、web-view（業務域名）、TLS版本以及HTTPS證書」規則即可用http，但是在實體里並沒有這個選項，所以建議開發時就用https路徑。
原文作者：騰訊高級工程師 王貝珊
原文鏈接：
http://www.wxapp-union.com/article-5256-1.html
-拼團來襲-
最高優惠可達70元 趕緊掃碼了解吧！！
點擊閱讀原文，馬上拼團
