前言

轉眼間已經參與過我廠好幾個小程序的開發了，下面本妹子將開發中的那些注意點和各位小伙伴們分享下，妥妥的干貨一枚。

一、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方法都不使用。