常见组件
常见组件有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 生效。