微信小程序里面的标签和html标签的对比、微信小程序基础之常用控件

微信小程序和html5标签的区别：

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 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	画布