微信小程序開發(fā)：注意事項(xiàng)和優(yōu)化實(shí)踐

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

微信小程序開發(fā)：注意事項(xiàng)和優(yōu)化實(shí)踐

不要換行寫

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

wx:if vs hidden

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

圖片處理

1.大圖片也會造成頁面切換的卡頓有一部分小程序會在頁面中引用大圖片，在頁面后退切換中會出現(xiàn)掉幀卡頓的情況。

2.圖片占容量代碼包限制是2MB，圖片占用空間較大，建議都上傳到CDN 上，代碼里直接引用鏈接。

3.大圖片小點(diǎn)擊位小程序主要在手機(jī)端運(yùn)行，手機(jī)屏幕大小有限，所以盡量點(diǎn)擊位大點(diǎn)。

4.圖片截取存在圖片沒有按原圖寬高比例顯示，可以設(shè)置 image 組件的 mode 屬性，來保持原圖寬高比。

5.CSSSprites所有零星圖片都包含到一張大圖中，減少請求數(shù)。

WXS模塊

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

JavaScript 支持情況

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

分享事件不支持異步

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

Message中編寫如下所示：

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

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

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

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

循環(huán)中添加key

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

http需變https

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

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