小程序之常用组件（标签）

常见组件

常见组件有view、text、rich-text、button、image、navigator、icon、swiper、radio、checkbox等

view组件标签

官方文档
它代替原来web中的 div 标签

<view hover-class="h-class"> 内容 </view>

它的独有属性

text标签

官方文档
它类似于html中的span标签，是一个文本标签，只能嵌套text。
长按文字可以复制（只有该标签有这个功能）
可以对空格 回车 进行编码，decode可以解析的有   < > & '    ，即空格，<，>，&,`,空格，空格

image标签

官方文档
图片标签，默认的宽度和高度是 320 * 240 ，mode决定图片内容如何与image标签大小做适配。

主要的mode值，更多可以查看官方文档

aspectFill缩放好之后，会将图居中显示。
widthFix 以前的web的图片模式，就是宽度指定，高度不写之后，高度自己会自动等比调整。

rich-text标签

官方文档
富文本标签，可以将字符串解析成对应标签，类似vue中v-html功能

用法1：通过字符串

// data：{ html:"<h1>123</h1>" }
<rich-text nodes="{{html}}"></rich-text>

用法2：通过对象数组

//
data：{ 
	html:[{
		// name属性指定标签类型，这里指定div标签
		name:"div",
		// 标签上有哪些属性
		attrs:{
			//指定当前标签的样式类
			class:"mydiv",
			//指定当前标签的内联样式
			style:"color:red;"
		},
		// children指定当前标签中的子节点，接收的数据类型和当前这种对象数组的方式一致。即这里指定这个div中的子节点,
		children:[
			{
				name:"p",
				attr:{},
				//当前标签中的子节点,这里演示放文本
				children:[{
					type:"text",
					text:"hello"
				}]
			}
		]
	}]
}

注意：
rich-text 组件内屏蔽所有节点的事件
attrs 属性不支持 id ，支持 class 。
如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
img 标签仅支持网络图片
如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。