資訊專欄INFORMATION COLUMN
摘要：本次測(cè)試主要參考文檔為選擇器參考手冊(cè)主要是安卓微信小程序的選擇器兼容入坑小程序過(guò)程中看到微信對(duì)支持的選擇器的描述只有六個(gè)分別是但是看到給寫的花里胡哨的的庫(kù)還有各種花里胡哨的小程序并且還表明支持之前各種無(wú)的庫(kù)所以我覺(jué)得事情并沒(méi)有這么簡(jiǎn)單趁著元
本次測(cè)試主要參考文檔為w3school CSS 選擇器參考手冊(cè) (主要是安卓/ios/微信小程序的css選擇器兼容)
入坑uniapp/小程序過(guò)程中看到dcloud/微信對(duì)支持的css選擇器的描述只有六個(gè),
分別是.class,#id,element,element,element,:before,:after
但是看到dcloud給uniapp寫的花里胡哨的uni的ui庫(kù),
還有各種花里胡哨的小程序,
并且uniapp還表明支持之前各種無(wú)dom的ui庫(kù),
所以我覺(jué)得事情并沒(méi)有這么簡(jiǎn)單,
趁著元旦放假,抽出一下午時(shí)間,
本單身肥宅猿測(cè)試了下w3c提供的選擇器,
也當(dāng)是踩一回uni/小程序的坑吧
| 選擇器 | css版本 | h5 | 安卓 | ios | 微信小程序 | 備注 |
|---|---|---|---|---|---|---|
| .class | css1 | Y | Y | Y | Y | - |
| #id | css1 | Y | Y | Y | Y | - |
| * | css2 | Y | N | N | N | - |
| element | css1 | Y | Y | Y | Y | 注意類似于html,body這樣的選擇器, 非h5端會(huì)被轉(zhuǎn)成page |
| element,element | css1 | Y | Y | Y | Y | - |
| element>element | css2 | Y | Y | Y | Y | - |
| element+element | css2 | Y | Y | Y | Y | - |
| [attribute] | css2 | Y | Y | Y | Y | 1.h5端使用uniapp標(biāo)簽屬性時(shí), 編譯后該屬性可能會(huì)消失, 導(dǎo)致該選擇器"失效", 如,view的hover-class屬性 2.微信小程序/app端使用非規(guī)范 的屬性,如, 在編譯到微信小程序/app時(shí)會(huì)消失 同樣導(dǎo)致該選擇器"失效" |
| [attribute=value] | css2 | Y | Y | Y | Y | 同[attribute] |
| [attribute~=value] | css2 | Y | Y | Y | Y | 同[attribute] |
| [attribute|=value] | css2 | Y | Y | Y | Y | 同[attribute] |
| :link | css1 | Y | - | - | - | 沒(méi)有找到辦法在非h5上 生成a標(biāo)簽 |
| :visited | css1 | Y | - | - | - | 沒(méi)有找到辦法在非h5上 生成a標(biāo)簽 |
| :active | css1 | Y | Y | Y | Y | 在非h5的其他三端上表現(xiàn) 與 (只測(cè)試了view標(biāo)簽與text標(biāo)簽) |
| :hover | css1 | Y | Y | Y | Y | 表現(xiàn)基本同:active 但是要取消該狀態(tài) 是要點(diǎn)擊其他標(biāo)簽 (讓hover轉(zhuǎn)移到其他標(biāo)簽上) |
| :focus | css2 | N | N | N | N | 1.h5中會(huì)把編譯成一個(gè) uni-input>div>input+div.input-placeholder的結(jié)構(gòu), 在css代碼中寫的類似于 input:focus{background: #F00;}的樣式, 基本上是設(shè)置在uni-input這個(gè)標(biāo)簽上的, 所以期望input的focus樣式并不會(huì)出現(xiàn) (所以h5是因?yàn)閡ni-app對(duì) css代碼的編譯邏輯 導(dǎo)致不支持input的:focus選擇器) 2.類似于button這些本來(lái)在正常html標(biāo)簽中 是能在點(diǎn)擊時(shí)獲得focus狀態(tài)的 但在uniapp中,h5會(huì)編譯成uni-button標(biāo)簽, 這些標(biāo)簽沒(méi)發(fā)現(xiàn)它能在點(diǎn)擊后獲得focus狀態(tài) 3.其他三端雖然沒(méi)像如上描述那樣轉(zhuǎn), (直接轉(zhuǎn)成一個(gè)input._input,button._button) 但是卻不支持focus狀態(tài) 不知道是不是官方(dcloud/微信)故意的 |
| :first-letter | css1 | Y | Y | Y | Y | 注意別踩坑 |
| :first-line | css1 | Y | Y | Y | Y | 注意別踩坑 |
| :first-child | css2 | Y | Y | Y | Y | - |
| :before | css2 | Y | Y | Y | Y | - |
| :after | css2 | Y | Y | Y | Y | - |
| :lang(language) | css2 | Y | N | N | N | - |
| element1~element2 | css3 | Y | Y | Y | Y | - |
| [attribute^=value] | css3 | Y | Y | Y | Y | 同[attribute] |
| [attribute$=value] | css3 | Y | Y | Y | Y | 同[attribute] |
| [attribute*=value] | css3 | Y | Y | Y | Y | 同[attribute] |
| :first-of-type | css3 | Y | Y | Y | Y | - |
| :last-of-type | css3 | Y | Y | Y | Y | - |
| :only-child | css3 | Y | Y | Y | Y | - |
| :nth-child(n) | css3 | Y | Y | Y | Y | - |
| :nth-last-child(n) | css3 | Y | Y | Y | Y | - |
| :nth-of-type(n) | css3 | Y | Y | Y | Y | - |
| :nth-last-of-type(n) | css3 | Y | Y | Y | Y | - |
| :last-child | css3 | Y | Y | Y | Y | - |
| :root | css3 | Y | N | N | N | h5端的支持只能是 在app.vue的style標(biāo)簽里寫的 或者@import的樣式里才能用:root |
| :empty | css3 | Y | Y | Y | Y | - |
| :target | css3 | Y | - | - | - | 沒(méi)有找到辦法在非h5上 實(shí)現(xiàn)錨點(diǎn) |
| :enabled | css3 | N | N | N | N | 類似于:focus, 可使用類似于 button:not([disabled]) 的方案代替 |
| :disabled | css3 | N | N | N | N | 類似于:focus, 但是可以使用類似于 button[disabled] 的方案代替 但是只寫button[disabled] 權(quán)重可能不夠 h5端寫input[disabled]無(wú)效, 原因見(jiàn):focus備注 但是非h5端可以寫input[disabled] |
| :checked | css3 | N | N | N | N | 同:disabled |
| :not(selector) | css3 | Y | Y | Y | Y | - |
| ::selection | css3 | Y | Y | N | ios:N 安卓:Y |
- |
至于其他廠商的小程序
我也沒(méi)有踩坑經(jīng)驗(yàn)
但是可參考微信小程序的兼容
畢竟是微信把小程序推起來(lái)之后
其他廠商才開(kāi)始出小程序
(最開(kāi)始的時(shí)候支付寶小程序抄微信小程序源碼事件還有人記得不)
(好像不弄套自己家的小程序出來(lái),自己就不是大廠了似得)
求求你別更新了,我學(xué)不過(guò)來(lái)了.jpg
手動(dòng)狗頭.jpg
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/117154.html
摘要：官方資料微信公眾平臺(tái)注冊(cè)小程序。官網(wǎng)開(kāi)發(fā)文檔社區(qū)開(kāi)發(fā)工具部署微信小程序微信小程序本身不需要部署，在微信開(kāi)發(fā)工具中直接上傳代碼就行。 為什么 學(xué)習(xí) Java 三年，目前已經(jīng)工作了2年，因?yàn)樽詫W(xué)，基礎(chǔ)差，所以打算年末總結(jié)一下常見(jiàn)的基礎(chǔ)知識(shí)和面試點(diǎn)； 也可以通過(guò)獨(dú)立做一個(gè)項(xiàng)目整合自己工作期間學(xué)習(xí)的知識(shí)，加深印象。 但是想著回家或是平時(shí)手機(jī)用的多，做一款A(yù)PP和小程序很方便查看。 項(xiàng)目展示 本...
摘要：的基礎(chǔ)要方便使，最好先下個(gè)，這個(gè)是官方推薦的，很多東西都集成界面化操作的先從網(wǎng)上拿個(gè)開(kāi)源項(xiàng)目做示范吧地址下載好后配置安裝命令安裝依賴這個(gè)項(xiàng)目其實(shí)已經(jīng)集成了很多東西了就可以看 ...
摘要：最近在搗鼓項(xiàng)目，恰好用到組件，之前寫了個(gè)，后面一直都想寫一個(gè)像樣的，可以分享給別人用的組件。自己的水平一般，開(kāi)發(fā)出來(lái)的組件可能代碼不咋地，還望路過(guò)大神斧正。 uniapp是2019年非常的火爆的一個(gè)Dcloud開(kāi)發(fā)跨平臺(tái)前端工具，支持ios android wap，小程序，除了android有點(diǎn)卡外，其他暫時(shí)沒(méi)有發(fā)現(xiàn)什么瑕疵。 最近在搗鼓uniapp項(xiàng)目，恰好用到table組件，之前...
在微信小程序開(kāi)發(fā)中用新功能利用uni-app來(lái)開(kāi)發(fā)，我們看看都有哪些優(yōu)缺？ 首選我們看看官網(wǎng)給出的解決思路方案 https://uniapp.dcloud.io/hybrid 方式1：把原生小程序轉(zhuǎn)換為uni-app源碼。有各種轉(zhuǎn)換工具，詳見(jiàn) 方式2：新建一個(gè)uni-app項(xiàng)目，把原生小程序的代碼變成小程序組件，進(jìn)而整合到uni-app項(xiàng)目下。uni-app支持使用小程序wxml組件，...
閱讀 5471·2021-09-07 09:58
閱讀 869·2019-08-30 15:55
閱讀 3164·2019-08-30 15:55
閱讀 1050·2019-08-30 15:53
閱讀 1648·2019-08-29 12:57
閱讀 2002·2019-08-26 13:46
閱讀 647·2019-08-26 11:00
閱讀 3746·2019-08-23 15:42
