微信小程序開發：注意事項和優化實踐

時間：2019-10-10 01:22:07 | 來源：

微信小程序開發：注意事項和優化實踐

不要換行寫

微信開發者工具不會對代碼進行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加負擔。

JavaScript 支持情況

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

分享事件不支持異步

如果你想自定義分享圖片，則在生命周期onShareApp

Message中編寫如下所示：

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

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

小程序有并發限制

wx.request、wx.uploadFile、wx.downloadFile 的最大并發限制是 10 個。所有為了保險起見，需要寫個請求隊列，如果并發量大于10，則等待請求。

循環中添加key

對于經常要更新的列表需要加上key值，key值相當于索引，但是key值不要用index ,因為index在增加刪除的時候可能不變產生混亂，推薦用唯一標示id ，對數據改變之后的diff更新比較有很大的性能提升。PS：如果是單純只顯示的列表，不需要操作更新，那不需要加key 。

http需變https

HTTP是明文傳輸有篡改內容的風險，而且有些安卓機會不兼容。所以我們需要使用https。所以開需求評審的時候，要注意后端要寫成https，如果是運營配的數據，后端最好有個轉https方法，輸入了url自動轉成https鏈接。

在微信開發者工具中，可勾選”不校驗合法域名、web-view（業務域名）、TLS版本以及HTTPS證書”規則即可用http，但是在實體里并沒有這個選項，所以建議開發時就用https路徑。