微信小程式與HTML5的標籤差異梳理
阿新 • • 發佈：2018-12-14
小程式自己開發了一套WXML標記語言和WXSS樣式語言，並非直接使用標準的HTML5+CSS3。因此，粗略的統計了一下之間的差異，有助於理解小程式，同時遇到HTML5轉換小程式的時候，知道如何避開其中的坑。 小程式標籤大約為32個左右： view（檢視容器）、rich-text（富文字）、swiper（滑塊檢視容器）、icon（圖示）、text（文字）、progress（進度條）、button（按鈕）、form（表單）、input（輸入框）、checkbox（多項選擇器）、radio（單項選擇器）、picker（列表選擇器）、slider（滾動選擇器）、switch（開關選擇器）、textarea（多行輸入框）、label（標籤）、navigator（應用連結）、audio（音訊）、image（圖片）、video（視訊）、camera（系統相機）、map（地圖）、scroll-view（可滾動檢視容器）、picker-view（內嵌列表選擇器）、canvas（畫布）movable-area（可移動區域）、movable-view（可移動的檢視容器）、cover-view（覆蓋檢視）、cover-image（覆蓋圖片）、functional-page-navigator（跳轉到外掛功能頁）、live-player（實時音視訊播放）、live-pusher（實時音視訊錄製）
| 小程式 | HTML5 | 說明 |
| <view> | div、h1、h2、h3、h4、h5、h6、p、span、acronym、abbr、address、b、bdi、bdo、big、blockquote、center、cite、code、del、dfn、em、font、i、ins、kbd、mark、meter、pre、q、rp、rt、ruby、s、samp、small、strike、strong、sub、sup、time、tt、u、var、wbr、header、footer、section、article、aside、ul、li、ol、dl、dt、dd、table、tbody、thead、tfoot、tr、colgroup、col、td、th、caption | a標籤href屬性不是有效的地址，標籤轉為view |
| <text> | div、h1、h2、h3、h4、h5、h6、p、span | <text>具有長按選中的屬性，當標籤內只有文字，將標籤轉換為<text> |
| <rich-text> | hr、br | |
| <icon> | <i class="icon"></i> | <icon>可以直接用微信元件預設的圖示 |
| <input type="text"> | <input /> | |
| <input type="checkbox"> | <checkbox-group><checkbox /> </checkbox-group> | |
| <input type="radio"> | <radio-group> <radio /></radio-group> |
其它： 微信小程式的app.json檔案需要手動新增支援的頁面路徑 需要引用weui.wxss檔案，作為基礎樣式框架的樣式
來自：米筷小程式