微信小程序 WXML、WXSS 和JS介紹及詳解

前幾天折騰了下。而後列出一些實驗結果,供你們參考。css

百牛信息技術bainiu.ltd整理髮佈於博客園html

0. 使用開發工具模擬的和真機差別仍是比較大的。也建議你們仍是真機調試比較靠譜。web

1. WXML(HTML)canvas

1.1 小程序的WXML沒有HTML的寬容度​那麼高,單標籤必需是 /> 結尾的。否則會報錯。小程序

1.2 ​官方推薦使用的基礎標籤<view>是塊標籤,給了<text>做爲文本標籤,可是使用其餘標籤好比div也是可使用的,而且都是inline標籤。而且wxml的parser會把標籤上的不在白名單上的屬性都去掉,class, id, data 這些應該都在白名單內,可是href什麼的是不會有的,因此若是你用傳統的html的標籤構建頁面理論上也是可行的,不過這些都是inline標籤,須要自行設定display。微信小程序

1.3 ​scroll-view 的scroll-top, scroll-left 是能夠修改scroll-view的滾動位置的。可是用戶本身滾動了以後小程序並不會去改變 scroll-top, scroll-left 的賦值(並非雙向同步的)。若是這時使用setData去修改的話,scroll-top, scroll-left 的賦值和上一次的值相同,小程序是不會運用這個修改的,因此表現就是設置沒有生效。這時只能先設置一個其餘值,再設置回去(這裏還能夠體現setData方法是同步的)。scroll-view 獲取scroll位置,只能經過bindscroll的回調函數獲取,因此須要取scroll位置的請自行預存好。scroll-view 仍是有webview的 scroll 的臭毛病,在居頂位置若是第一個動做是向下滾動的,會致使以後手怎麼滑都滾不動,設置scroll-top 不爲0,設個1就行了。數組

1.4 input 目前只支持文字居左,其餘都是不行的(模擬器能夠)。若是你作表單,建議把input等表單元素都放在form中,from觸發submit時會返回內部全部表單元素的name-value。否則只能綁定全部表單元素的 change 事情來獲取,甚是麻煩。微信

1.5 只有  checkbox-group 有 change 事件,單個的checkbox是沒有的,若是你只有一個checkbox, 以爲外面套一個checkbox-group麻煩又不美觀的話,能夠用 switch type="checkbox" 代替。(微信小程序應用號交流羣 563752274)app

1.6 map 組建目前直接在app第一個頁面加載會出現加載失敗。須要在onLoad以後再加在。能夠先wx:if="false" 而後onLoad的以後改爲 true 就好了。xss

1.7 map, canvas 像是在webview上面蓋一個native組件的感受。它們是無法被overflow 以及 上面蓋元素的,你能夠認爲z-index寫多高都無法在他上面。因此不建議在頁面上作彈層和蒙層。canvas 沒法放在scroll-view中滾動會定位在初始位置,若是你給canvas設置背景顏色的話,你會發現背景色塊跟着滾了,圖沒滾。

2. WXSS(CSS)

2.1 WXSS 和 CSS很像,基本全部的CSS都支持,小程序還提供了 rpx 這個單位。一屏幕寬是750rpx。推薦使用這個來做爲佈局。不過有一些細小的差異我下面會列出

2.2 WXSS不支持 大括號嵌套({{}} )。因此key-frames,CSS animation 就不可用了,不過transition 是可用的。

2.3 目前測試引入字體也是不可用的,前面WXML中提到的內容看SVG也是無法使用的。因此icon目前只能用圖的方式作了。

2.4 WXSS中是不能引入本地資源的, 只能使用線上資源(模擬器是能夠,可是別信),可使用base64。(微信小程序應用號交流羣 563752274)

2.5 WXSS的 rule 是不支持集聯的。因此不能 body .main {background:#000;} 這麼寫。因此寫起來仍是比較費勁的。每一個class都得很長,否則怕重名。不過支持 li.current {color: red;} 這樣的寫法,支持after, before僞類,可是不支持 first-child last-child nth-child 這類僞類。

2.6 app.wxss 和每一個 page 的wxss 的覆蓋關係是: 若是有同名 rule 的話,page 會覆蓋 app 的,不是merge是覆蓋。

3. JS

3.1 JS 的運行環境和view的運行環境是隔離的。JS只能經過事件獲取時機和setData方法修改數據來改變view。

3.2 JS 目前有個很大的問題是沒法獲取到頁面px級的寬度高度, 全部事件回調的單位都是px級的而不是rpx的,可是又不知道當前rpx,px的轉換關係。好比過你用canvas畫圖。你都不知道邊界在哪裏,這個很蛋疼。

3.3 上面有說過 setData方法若是上一個值和下一個值相同時,是不會觸發view修改的(見1.3)

3.4 使用 navigate 跳轉的時候可使用queryString的方式跟在相對地址上,onLoad事件會在入參中傳入(會轉化成object),可是 navigate back的時候沒有一個官方給出的數據通信機制。可使用getApp() 獲取到全局對象,給上面加點東西,自行實現。navigate 最多5個什麼的就不說了。

3.5 canvas getActions被調用以後,actions是會被清空的。即連續調用兩次getActions,第二次是空數組。

3.6 開發者工具是nw寫的,我就看了看裙底的源碼,開發者工具中WXML確實是有parser再拼裝的過程的。可是並不能說明小工具是native的,從css的支持力度到webview的一些bug類似度來看,我仍是以爲像webview,可是組件好比map,canvas什麼的用的是原生view,而後蓋在webview上的感受。可是無論怎麼說 auto-focus 能自動呼出鍵盤就已是個很大的好評了。

感謝閱讀,但願能幫助到你們,謝謝你們對本站的支持!

相關文章
相關標籤/搜索