微信小程序标签和html标签对比 | |||||||
HTML5 | 微信小程序 | ||||||
<div></div> | <view></view> | ||||||
<h1></h1>...<h6></h6> <p></p><span></span> | <text></text> | ||||||
<i class="icon"></i> | <icon></icon> | ||||||
<input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="file" /> | <input /> <checkbox /> <radio /> <view bindtap="chooseImage" /> | ||||||
<select> <option></option> <option></option> </select> | <picker range="{{area}}"> <view>{{area[index]}}</view> </picker> | ||||||
<a href="javascript:;"></a> | <navigator url="#" redirect></navigator> | ||||||
<img src="" /> | <image src="" /> | ||||||
wxss选择器 | |||||||
HTML5 | 微信小程序 | ||||||
div | view, text, icon, input, image, navigator | ||||||
.class | .class | ||||||
#id | #id | ||||||
element1 element2 | element1 element2 | ||||||
:after :before | :after :before | ||||||
:first-child | :first-child 不建议 工具过滤易导致页面错乱 |
小程序设置居中样式
.container {
width: 100vw;
}
.caseWrap {
width: 96vw;
margin-left: 2vw;
margin-right: 2vw;
}
小程序UI组件官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/view.html
一、视图容器(View Container):
标签 说明
view 视图容器
scroll-view 可滚动视图容器
swiper 可滑动的视图容器
二、基础内容(Basic Content)
标签名 说明
icon 图标
text 文字
progress 进度条
三、表单组件(Form)
标签名 说明
button 按钮
form 表单
input 输入框
checkbox 多项选择器
radio 单项选择器
picker 列表选择器
slider 滑动选择器
switch 开关选择器
label 标签
四、操作反馈组件(Interaction)
标签名 说明
action-sheet 上拉菜单
modal 模态弹窗
progress 进度条
toast 短通知
loading 加载
五、导航(Navigation)
组件名 说明
navigator 应用内跳转
六、多媒体(Media)
标签名 说明
audio 音频
image 图片
video 视频
七、地图(Map)
标签名 说明
map 地图
八、画布(Canvas)
标签名 说明
canvas 画布