微信小程式裡面的標籤和html標籤的對比、微信小程式基礎之常用控制元件
阿新 • • 發佈：2018-12-16
| HTML5 | 微信小程式 |
|---|---|
|
<h1></h1>...<h6></h6> <p></p> <span></span> |
<text></text> |
| <div></div> | <view></view> |
|
<input type="text"> <input type="checkbox"> <input type="radio"> <input type="file"> |
<input /> <checkbox /> <radio /> <view bindtap="chooselmage"> |
| <i class="icon"></i> | <icon></icon> |
|
<select> <option></option> <option></option> </select> |
<picker range="{{area}}"> <view>{{area{index}}}</view> </picker> |
| <a href="#"></a> | <navigator url="#" redirect></navigator> |
| <img src="#"> | <image src="路徑"" /> |
下面我就列出常用的標籤及其分類。能夠幫助之前沒有經歷過微信小程式前端開發的同學能夠快速熟悉。
| 標籤 | 說明 |
|---|---|
| view | 檢視容器 |
| scroll-view | 可滾動檢視容器 |
| swiper | 可滑動的檢視容器 |
| 標籤名 | 說明 |
|---|---|
| icon | 圖示 |
| text | 文字 |
| progress | 進度條 |
| 標籤名 | 說明 |
|---|---|
| button | 按鈕 |
| form | 表單 |
| input | 輸入框 |
| checkbox | 多項選擇器 |
| radio | 單項選擇器 |
| picker | 列表選擇器 |
| slider | 滑動選擇器 |
| switch | 開關選擇器 |
| label | 標籤 |
| 標籤名 | 說明 |
|---|---|
| action-sheet | 上拉選單 |
| modal | 模態彈窗 |
| progress | 進度條 |
| toast | 短通知 |
| loading | 載入 |
| 元件名 | 說明 |
|---|---|
| navigator | 應用內跳轉 |
| 標籤名 | 說明 |
|---|---|
| audio | 音訊 |
| image | 圖片 |
| video | 視訊 |
| 標籤名 | 說明 |
|---|---|
| map | 地圖 |
| 標籤名 | 說明 |
|---|---|
| canvas | 畫布 |