icon 组件可以在页面上添加微信小程序里定义好的一些常用的小图标 .. 用一个 icon 组件 .. 上面加上一个 type 属性,它可以控制小图标的类型 .. 比如把它设置成 success 就会显示一个成功小图标 .. 设置成 info,就显示一个信息小图标 .. search ,表示搜索 .. .. cancel .. 是取消 ..
在 icon 组件上可以再用一个 size 来设置图标的大小 .. 比如设置成 56 .. 这个大小的单位是像素 ..
text
text 组件可以显示一般的文字 .. 一组 text .. 里面包装的就是要显示的文字 ..
rich-text
我们如果有一组元素或者文本要显示的话,可以用一下 rich-text 组件 .. 它有个 nodes 属性 .. 对应的值就是一组节点 .. 节点可以是元素类型,也可以是文字类型 .. 默认是元素类型 .. 元素类型的节点里面可以包含 html 的标签名 .. 比如 h1,code,blockquote 等等 .. 元素类型的节点里面还可以包含元素的属性 .. 比如 style 属性 .. class 属性等等 ..
给它绑定一个数据,名字可以是 nodes .. 然后在小程序的初始化数据里面,添加这个 nodes .. 它的值应该是一个数组 ..
每个节点又是一个对象 .. 里面先添加一个 name .. 设置一下标签的名字 .. 比如 img .. 是一个 html 的图像标签 ..
再添加一个 attrs ,它表示元素上的属性 .. 它的值是个对象 .. 里面是属性还有对应的值 .. 比如标签上有个 class 属性,值是 image .. 再添加一个 src 属性 .. 它的值是一个图像的地址 ...
保存 .. 你会发现,页面上会显示一张图片 .. 这个图片上有个 image 类,可以用这个类去给它添加一些样式 ..
在样式文件里,添加一个 .image .. 把 width 的值设置成 100% ..
在这个 nodes 里面,可以再添加一个节点试一下 .. 一个对象 .. name 是标签的名字 .. 这里用一下 h3 .. attrs .. 是标签上的属性 .. 一个 class .. 添加一个类 .. 名字是 header
元素类型的节点还可以有一个 children 属性,它里面的东西是元素的子元素 .. 它应该是个数组 .. 每个子元素又是一个单独的对象 .. 这个子元素可以用一下 type 去设置节点的类型,把它设置成 text ,表示这是一个文本类型的元素 ..
然后再添加一个 text ,设置一下元素里的文本内容 .. 输入一个 hello ~
现在页面上会显示两个元素, 一张图片,还有一个用 h3 标签包装的文字 ..
progress
再试一下 progress 组件 .. 它会在页面上显示一个进度条 .. 表示当前进度,可以用一个 percent 属性 .. 表示进度的百分比 ..
激活状态的进度的颜色 .. 可以用 activeColor 属性设置 ..