|
一,、WXML 不要換行寫,，有空格不行 微信開發(fā)者工具不會(huì)對(duì)代碼進(jìn)行trim操作，如果代碼中換行，頁面也直接換行,。  wx:if vs hidden 一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗,。因此,，如果需要頻繁切換的情景下，用 hidden 更好,，如果在運(yùn)行時(shí)條件不大可能改變則 wx:if 較好,。 圖片處理 1.大圖片也會(huì)造成頁面切換的卡頓 有一部分小程序會(huì)在頁面中引用大圖片，在頁面后退切換中會(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ì)更長,，建議一個(gè)頁面使用少于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代替。 部分CSS3屬性不能用 如transform:rotate(180deg),，不能用,。 自定義顏色限制 不是所以顏色配置都能隨心所欲，比如導(dǎo)航欄標(biāo)題顏色,，僅支持 black / white,；下拉 loading 的樣式，僅支持 dark / light,。所以出視覺圖關(guān)注下,。 滾動(dòng)區(qū)域沒有開啟慣性滾動(dòng) 當(dāng)加了overflow: scroll時(shí)，IOS下需要額外設(shè)置： -webkit-overflow-scrolling: touch,，來開啟慣性滾動(dòng),。 三、JS JavaScript 支持情況 如果需要支持到IOS8話，建議下面js方法都不使用,。  分享事件不支持異步 如果你想自定義分享圖片,，則在生命周期onShareAppMessage中編寫如下所示：Page({ onShareAppMessage: function (res) { return { title: '自定義轉(zhuǎn)發(fā)標(biāo)題', imageUrl: 'https://blog./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)閕ndex在增加刪除的時(shí)候可能不變產(chǎn)生混亂,，推薦用唯一標(biāo)示id,，對(duì)數(shù)據(jù)改變之后的diff更新比較有很大的性能提升。 PS：如果是單純只顯示的列表,，不需要操作更新,，那不需要加key。 巧用nextTick 小程序和vue寫法比較相似,，也有nextTick,在當(dāng)前同步流程結(jié)束后,，下一個(gè)時(shí)間片執(zhí)行 。 比如有些取視圖層的數(shù)據(jù),，可以等頁面上流程結(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ùn)行,，小心后臺(tái)頁面的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)營配的數(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路徑,。  埋點(diǎn)的坑 埋點(diǎn)用公共方法，頁面曝光pv埋點(diǎn)放入onshow生命周期中更加準(zhǔn)確,。 預(yù)加載 1.數(shù)據(jù)預(yù)加載 上個(gè)頁面就將接口請(qǐng)求好,，存到對(duì)象中，下個(gè)頁面直接從對(duì)象中拿,，有利有弊,，從業(yè)務(wù)角度出發(fā)看是否需要預(yù)加載數(shù)據(jù) storage也可以存儲(chǔ)數(shù)據(jù)，同一個(gè)微信用戶,，同一個(gè)小程序 storage 上限為 10MB,。 2. 分包預(yù)加載preloadRule preloadRule預(yù)下載分包行為在進(jìn)入某個(gè)頁面時(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)頁面進(jìn)行 setData 當(dāng)頁面進(jìn)入后臺(tái)態(tài)（用戶不可見）,，不應(yīng)該繼續(xù)去進(jìn)行setData，后臺(tái)態(tài)頁面的渲染用戶是無法感受的,，另外后臺(tái)態(tài)頁面去setData也會(huì)搶占前臺(tái)頁面的執(zhí)行,。也就是上文提到的不要忘了clearTimeout、clearInterval,。 四,、其他 使用分包 由于小程序包大小有限制，整個(gè)小程序所有分包(包括獨(dú)立分包和普通分包)大小不超過 8M，單個(gè)分包/主包大小不能超過 2M,，建議把首屏不需要展示的都放入分包中,，分包就像H5打出的chunk包一樣，可以按需加載,。 及時(shí)清理沒有使用到的代碼和資源 在日常開發(fā)的時(shí)候,，我們可能引入了一些新的庫文件，而過了一段時(shí)間后,，由于各種原因又不再使用這個(gè)庫了,，我們常常會(huì)只是去掉了代碼里的引用，而忘記刪掉這類庫文件了,。目前小程序打包是會(huì)將工程下所有文件都打入代碼包內(nèi),，也就是說，這些沒有被實(shí)際使用到的庫文件和資源也會(huì)被打入到代碼包里,，從而影響到整體代碼包的大小,。 sitemap 配置 小程序根目錄下的 sitemap.json文件用于配置小程序及其頁面是否允許被微信索引,，文件內(nèi)容為一個(gè) JSON 對(duì)象,，如果沒有 sitemap.json ，則默認(rèn)為所有頁面都允許被索引.  單元測(cè)試 miniprogram-simulate 模擬 touch 事件,、自定義事件觸發(fā) 選取子節(jié)點(diǎn) 更新自定義組件數(shù)據(jù) 觸發(fā)生命周期 檢測(cè)工具 開發(fā)者工具自帶檢測(cè)評(píng)分頁面,，可以分析頁面存在的問題。  wxss 覆蓋率較低,，有些動(dòng)畫樣式比如@keyframes是檢測(cè)不到的,。 以及可以通過性能面板查看頁面性能。  其中培訓(xùn)視頻以上傳到B站中,，歡迎小伙伴們來圍觀評(píng)論^ ^ www.bilibili.com/video/av560… 相關(guān)鏈接 微信開發(fā)指南 原文地址:raoenhui.github.io/wechat/2019… 視頻地址:www.bilibili.com/video/av560… Happy coding .. :) 作者: 前端妹子 |
|
|
