前言

做網(wǎng)站、成都網(wǎng)站建設(shè),成都做網(wǎng)站公司-創(chuàng)新互聯(lián)已向上1000家企業(yè)提供了,網(wǎng)站設(shè)計(jì),網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)等服務(wù)!設(shè)計(jì)與技術(shù)結(jié)合,多年網(wǎng)站推廣經(jīng)驗(yàn),合理的價(jià)格為您打造企業(yè)品質(zhì)網(wǎng)站。

轉(zhuǎn)眼間已經(jīng)參與過(guò)我廠好幾個(gè)小程序的開(kāi)發(fā)了，下面本妹子將開(kāi)發(fā)中的那些注意點(diǎn)和各位小伙伴們分享下，妥妥的干貨一枚。

一、WXML

不要換行寫(xiě)，有空格不行

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

wx:if vs hidden

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

圖片處理

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

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

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

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

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

WXS 模塊

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

使用了過(guò)大的 WXML 節(jié)點(diǎn)數(shù)目

一個(gè)太大的WXML節(jié)點(diǎn)樹(shù)會(huì)增加內(nèi)存的使用，樣式重排時(shí)間也會(huì)更長(zhǎng)，建議一個(gè)頁(yè)面使用少于1000個(gè)WXML的節(jié)點(diǎn)，節(jié)點(diǎn)樹(shù)深度少于30層，子節(jié)點(diǎn)數(shù)不大于60個(gè)

二、WXSS

Css偽類(lèi)看不到

在微信開(kāi)發(fā)者工具中，Styles不會(huì)顯示Css偽類(lèi)，喜歡寫(xiě)::before或:first-child的小伙伴們請(qǐng)注意了，你的偽類(lèi)在控制臺(tái)是看不到的,所以本妹子不建議在小程序里用Css偽類(lèi)，以防找不到問(wèn)題點(diǎn)不好修復(fù)bug。

小程序button自帶給after偽類(lèi)添加了邊框，通過(guò)開(kāi)發(fā)者工具是看不到after,我們需要自行去掉邊框。

button::after { 
 border: none; 
} 

分享標(biāo)題：微信小程序開(kāi)發(fā)注意指南和優(yōu)化實(shí)踐(小結(jié))-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://weahome.cn/article/isssi.html