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