国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

首頁(yè) 微信小程序 微信開發(fā) 微信小程序 WXML、WXSS 和JS介紹及詳解

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

Dec 29, 2016 am 09:33 AM

前幾天折騰了下。然后列出一些實(shí)驗(yàn)結(jié)果,供大家參考。

0. 使用開發(fā)工具模擬的和真機(jī)差異還是比較大的。也建議大家還是真機(jī)調(diào)試比較靠譜。

1. WXML(HTML)

1.1 小程序的WXML沒有HTML的寬容度那么高,單標(biāo)簽必需是 /> 結(jié)尾的。不然會(huì)報(bào)錯(cuò)。

1.2 官方推薦使用的基礎(chǔ)標(biāo)簽是塊標(biāo)簽,給了作為文本標(biāo)簽,但是使用其他標(biāo)簽比如div也是可以使用的,并且都是inline標(biāo)簽。并且wxml的parser會(huì)把標(biāo)簽上的不在白名單上的屬性都去掉,class, id, data 這些應(yīng)該都在白名單內(nèi),但是href什么的是不會(huì)有的,所以如果你用傳統(tǒng)的html的標(biāo)簽構(gòu)建頁(yè)面理論上也是可行的,不過這些都是inline標(biāo)簽,需要自行設(shè)定display。

1.3 scroll-view 的scroll-top, scroll-left 是可以修改scroll-view的滾動(dòng)位置的。但是用戶自己滾動(dòng)了之后小程序并不會(huì)去改變 scroll-top, scroll-left 的賦值(并不是雙向同步的)。如果這時(shí)使用setData去修改的話,scroll-top, scroll-left 的賦值和上一次的值相同,小程序是不會(huì)運(yùn)用這個(gè)修改的,所以表現(xiàn)就是設(shè)置沒有生效。這時(shí)只能先設(shè)置一個(gè)其他值,再設(shè)置回去(這里還可以體現(xiàn)setData方法是同步的)。scroll-view 獲取scroll位置,只能通過bindscroll的回調(diào)函數(shù)獲取,所以需要取scroll位置的請(qǐng)自行預(yù)存好。scroll-view 還是有webview的 scroll 的臭毛病,在居頂位置如果第一個(gè)動(dòng)作是向下滾動(dòng)的,會(huì)導(dǎo)致之后手怎么滑都滾不動(dòng),設(shè)置scroll-top 不為0,設(shè)個(gè)1就好了。

1.4 input 目前只支持文字居左,其他都是不行的(模擬器可以)。如果你做表單,建議把input等表單元素都放在form中,from觸發(fā)submit時(shí)會(huì)返回內(nèi)部所有表單元素的name-value。不然只能綁定所有表單元素的 change 事情來獲取,甚是麻煩。

1.5 只有? checkbox-group 有 change 事件,單個(gè)的checkbox是沒有的,如果你只有一個(gè)checkbox, 覺得外面套一個(gè)checkbox-group麻煩又不美觀的話,可以用 switch type="checkbox" 代替。(微信小程序應(yīng)用號(hào)交流群 563752274)

1.6 map 組建目前直接在app第一個(gè)頁(yè)面加載會(huì)出現(xiàn)加載失敗。需要在onLoad之后再加在。可以先wx:if="false" 然后onLoad的之后改成 true 就行了。

1.7 map, canvas 像是在webview上面蓋一個(gè)native組件的感覺。它們是沒法被overflow 以及 上面蓋元素的,你可以認(rèn)為z-index寫多高都沒法在他上面。所以不建議在頁(yè)面上做彈層和蒙層。canvas 無法放在scroll-view中滾動(dòng)會(huì)定位在初始位置,如果你給canvas設(shè)置背景顏色的話,你會(huì)發(fā)現(xiàn)背景色塊跟著滾了,圖沒滾。

2. WXSS(CSS)

2.1 WXSS 和 CSS很像,基本所有的CSS都支持,小程序還提供了 rpx 這個(gè)單位。一屏幕寬是750rpx。推薦使用這個(gè)來作為布局。不過有一些細(xì)小的差別我下面會(huì)列出

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

2.3 目前測(cè)試引入字體也是不可用的,前面WXML中提到的內(nèi)容看SVG也是沒法使用的。所以icon目前只能用圖的方式做了。

2.4 WXSS中是不能引入本地資源的, 只能使用線上資源(模擬器是可以,但是別信),可以使用base64。(微信小程序應(yīng)用號(hào)交流群 563752274)

2.5 WXSS的 rule 是不支持集聯(lián)的。所以不能 body .main {background:#000;} 這么寫。所以寫起來還是比較費(fèi)勁的。每個(gè)class都得很長(zhǎng),不然怕重名。不過支持 li.current {color: red;} 這樣的寫法,支持after, before偽類,但是不支持 first-child last-child nth-child 這類偽類。

2.6 app.wxss 和每個(gè) page 的wxss 的覆蓋關(guān)系是: 如果有同名 rule 的話,page 會(huì)覆蓋 app 的,不是merge是覆蓋。

3. JS

3.1 JS 的運(yùn)行環(huán)境和view的運(yùn)行環(huán)境是隔離的。JS只能通過事件獲取時(shí)機(jī)和setData方法修改數(shù)據(jù)來改變view。

3.2 JS 目前有個(gè)很大的問題是無法獲取到頁(yè)面px級(jí)的寬度高度, 所有事件回調(diào)的單位都是px級(jí)的而不是rpx的,但是又不知道當(dāng)前rpx,px的轉(zhuǎn)換關(guān)系。比如過你用canvas畫圖。你都不知道邊界在哪里,這個(gè)很蛋疼。

3.3 上面有說過 setData方法如果上一個(gè)值和下一個(gè)值相同時(shí),是不會(huì)觸發(fā)view修改的(見1.3)

3.4 使用 navigate 跳轉(zhuǎn)的時(shí)候可以使用queryString的方式跟在相對(duì)地址上,onLoad事件會(huì)在入?yún)⒅袀魅耄〞?huì)轉(zhuǎn)化成object),但是 navigate back的時(shí)候沒有一個(gè)官方給出的數(shù)據(jù)通訊機(jī)制。可以使用getApp() 獲取到全局對(duì)象,給上面加點(diǎn)東西,自行實(shí)現(xiàn)。navigate 最多5個(gè)什么的就不說了。

3.5 canvas getActions被調(diào)用之后,actions是會(huì)被清空的。即連續(xù)調(diào)用兩次getActions,第二次是空數(shù)組。

3.6 開發(fā)者工具是nw寫的,我就看了看裙底的源碼,開發(fā)者工具中WXML確實(shí)是有parser再拼裝的過程的。但是并不能說明小工具是native的,從css的支持力度到webview的一些bug相似度來看,我還是覺得像webview,但是組件比如map,canvas什么的用的是原生view,然后蓋在webview上的感覺。但是不管怎么說 auto-focus 能自動(dòng)呼出鍵盤就已經(jīng)是個(gè)很大的好評(píng)了。

感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!

更多微信小程序 WXML、WXSS 和JS介紹及詳解相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)!


本站聲明
本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn),版權(quán)歸原作者所有,本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容,請(qǐng)聯(lián)系admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費(fèi)脫衣服圖片

Undresser.AI Undress

Undresser.AI Undress

人工智能驅(qū)動(dòng)的應(yīng)用程序,用于創(chuàng)建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用于從照片中去除衣服的在線人工智能工具。

Clothoff.io

Clothoff.io

AI脫衣機(jī)

Video Face Swap

Video Face Swap

使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費(fèi)的代碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

功能強(qiáng)大的PHP集成開發(fā)環(huán)境

Dreamweaver CS6

Dreamweaver CS6

視覺化網(wǎng)頁(yè)開發(fā)工具

SublimeText3 Mac版

SublimeText3 Mac版

神級(jí)代碼編輯軟件(SublimeText3)

熱門話題

Laravel 教程
1601
29
PHP教程
1502
276