前言
轉眼間已經參與過我廠好幾個小程序的開發了,下面本妹子將開發中的那些注意點和各位小伙伴們分享下,妥妥的干貨一枚。
一、WXML
不要換行寫,有空格不行
微信開發者工具不會對代碼進行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加負擔
使用了過大的 WXML 節點數目
一個太大的WXML節點樹會增加內存的使用,樣式重排時間也會更長,建議一個頁面使用少于1000個WXML的節點,節點樹深度少于30層,子節點數不大于60個
二、WXSS
Css偽類看不到
在微信開發者工具中,Styles不會顯示Css偽類,喜歡寫::before或:first-child的小伙伴們請注意了,你的偽類在控制臺是看不到的,所以本妹子不建議在小程序里用Css偽類,以防找不到問題點不好修復bug。
小程序button自帶給after偽類添加了邊框,通過開發者工具是看不到after,我們需要自行去掉邊框。
button::after { border: none; } hover偽類則可以用小程序自帶的屬性hover-class代替。
部分CSS3屬性不能用
如transform:rotate(180deg),不能用。
自定義顏色限制
不是所以顏色配置都能隨心所欲,比如導航欄標題顏色,僅支持 black / white;下拉 loading 的樣式,僅支持 dark / light。所以出視覺圖關注下。
滾動區域沒有開啟慣性滾動
當加了overflow: scroll時,IOS下需要額外設置: -webkit-overflow-scrolling: touch,來開啟慣性滾動。
三、JS
JavaScript 支持情況
如果需要支持到IOS8話,建議下面js方法都不使用。
新聞熱點
疑難解答