微信小程序标签和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    画布