小程序开发快速入门（教你零基础搭建小程序）
小程序开发快速入门（教你零基础搭建小程序）<rich-text nodes="{{}}"></rich-text>双括号内是一个值，这个值通过设置一个变量来实现，这里的变量我们先使用标签字符串的类型。在demo12.wxml 中，写入rich-text 标签，加入nodes 属性接下来，我们还是分两部分来演示该标签的使用1、新建页面demo122、打开demo12.wxml 文件，删除原先的内容。
大家好！
这一章我们继续讲小程序的常见组件——富文本标签
富文本标签可以将字符串解析成对应标签，类似 vue中 v-html 功能。
rich-text 富文本标签，是通过nodes 属性来实现的。它⽀持标签字符串、对象数组两种数据类型
接下来，我们还是分两部分来演示该标签的使用
（一）标签字符串1、新建页面demo12
2、打开demo12.wxml 文件，删除原先的内容。
在demo12.wxml 中，写入rich-text 标签，加入nodes 属性
<rich-text nodes="{{}}"></rich-text>
双括号内是一个值，这个值通过设置一个变量来实现，这里的变量我们先使用标签字符串的类型。
3、打开demo12. js 文件，只保留data 部分，在data中放变量，名为html，它的值这里设置的是一些标签字符串。
我们直接复制淘宝首页轮播图下方的代码，粘贴至html内。
步骤如下：
（1）打开网址：
https://main.m.taobao.com/index.html
（2）f12键打开淘宝网触屏版的源代码
（3）我们要复制的是下方轮播图的代码
（4）右键选中的代码，选择“copy”，选择“cpoy outerHTML”，复制代码
（5）粘贴代码至demo12.js 文件内，data部分，html变量内，如下所示：
Page({
data: {
html:'<div class="sc-bxivhb ALWfo"><div class="sc-ifAKCX iLINIY"><a class="sc-EHOje jXFKFG" href="https://www.tmall.com/wow/z/heybox/heyboxrax/heybox?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.1&scm=1007.home_icon.tmallxp.d&wh_biz=tm&disableNav=YES"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">天猫新品</p></a><a class="sc-EHOje hrPgER" href="https://huodong.m.taobao.com/act/snipcode.html?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.6&scm=1007.home_icon.chongzzx.d&_wml_code=Vfw8V4IdfflvFcsPv2fKDCLgFlhCoOQ406ZO9WKS70zNVh2FhuClrYZQHV+Uj8rweMrPJgOrvqON3zeUHJMIALqc03AQZnf3hmtKmJM2g5PuR9UuzwivVDM+il4nBDGBPXlfSqZZA3CdATGQpVOeZMO8SbyJvaZdoC89+2Gg8FZsD4wqDUKs7VcgTjZxbgdE&subSource=stcz_1"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1llI3f4n1gK0jSZKPXXXvUXXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">充值中心</p></a></div><div class="sc-ifAKCX iLINIY"><a class="sc-EHOje jXFKFG" href="https://huodong.m.taobao.com/act/snipcode.html?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.2&scm=1007.home_icon.juhs.d&_wml_code=9XZq+t/xdGk2vxtkbZvNtxIRr1Fl5o/4JYkxzjiABZCkN0X4ug9ejN/EA0XumFdlCJmui3oZzrfxu2OjRTO/UldTSbERTDFnNVuaq4bGXYarnsLycd1U6o4btoe8H/SSeBk5iibFKlpytcA4vdUvH+U+ttvWBrsoV0Txewchwr8="><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">今日爆款</p></a><a class="sc-EHOje hrPgER" href="https://h5.m.taobao.com/trip/home/index.html?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.7&scm=1007.home_icon.lvx.d&_wx_tpl=http://h5.m.taobao.com/app/triprxhome/pages/home/index.weex.js&wx_navbar_hidden=true&ttid=12mtb0000155"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1O_AyVwHqK1RjSZFPXXcwapXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">机票酒店</p></a></div><div class="sc-ifAKCX iLINIY"><a class="sc-EHOje jXFKFG" href="https://pages.tmall.com/wow/z/import/tmg-rax-home/tmallimportHomewupr-index?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.3&scm=1007.home_icon.tmallgj.d&wh_biz=tm&wh_pid=tmg-rax-home/tmallimportHome&disableNav=YES"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB19uWKXkCy2eVjSZPfXXbdgpXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">天猫国际</p></a><a class="sc-EHOje hrPgER" href="https://market.m.taobao.com/app/tmall-wireless/tjb-2018/index/index.html?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.8&scm=1007.home_icon.lingjb.d&disableNav=YES#/tjb"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB19yZJVBLoK1RjSZFuXXXn0XXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">金币庄园</p></a></div><div class="sc-ifAKCX iLINIY"><a class="sc-EHOje jXFKFG" href="https://h5.ele.me/msite/taobaomsiterouter?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.4&scm=1007.home_icon.elm.d"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1DaMyVpzqK1RjSZFoXXbfcXXa-185-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">饿了么</p></a><a class="sc-EHOje hrPgER" href="https://market.m.taobao.com/app/pm/rax-tesla/pages/index-tao?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.9&scm=1007.home_icon.paim.d&wh_weex=true&wx_navbar_transparent=true&data_prefetch=true&wx_navbar_hidden=true"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB16ZYDk4n1gK0jSZKPXXXvUXXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">阿里拍卖</p></a></div><div class="sc-ifAKCX iLINIY"><a class="sc-EHOje jXFKFG" href="https://chaoshi.m.tmall.com/?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.5&scm=1007.home_icon.tmallcs.d2&_ig=shoutao"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1FucwVwHqK1RjSZFgXXa7JXXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">天猫超市</p></a><a class="sc-EHOje hrPgER" href="https://huodong.m.taobao.com/act/snipcode.html?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.10&scm=1007.home_icon.taobch.d&_wml_code=6WHamsDC+8ca9ElMubUiQjsRC0O2j4yGgKPCJIKXglo="><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB19dcwVyrpK1RjSZFhXXXSdXXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">淘宝吃货</p></a></div><div class="sc-ifAKCX iLINIY"><a class="sc-EHOje jXFKFG" href="https://market.m.taobao.com/app/tbsearchwireless-pages/new-catemap/p/s-nx-categories?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.11&scm=1007.home_icon.fenl.d&wh_weex=true"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1nBktVxTpK1RjSZR0XXbEwXXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">分类</p></a><a class="sc-EHOje hrPgER" href="https://huodong.m.taobao.com/act/snipcode.html?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.12&scm=1007.home_icon.xiany.d&_wml_code=2RLfNbB12QpISV+L7aiHZwm5noZrOPbYmjwLhlOAmgeK3XKiEERT7ZdlL5lwWrfH8vrxje8x3wcjpFnTBn2bZuI6VIVmz1Ww1SxKMPNxdKnSxkM02klo1Wq1PvanB8MPDB7/xfoi8vf2ert4z+OYjJBMsIILVspKvgSN8SN+sCg="><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1CoEwVrvpK1RjSZFqXXcXUVXa-185-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">闲鱼</p></a></div><div class="sc-ifAKCX iLINIY"><a class="sc-EHOje jXFKFG" href="https://huodong.m.taobao.com/act/snipcode.html?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.13&scm=1007.home_icon.tmallsx.d&_wml_code=uxMdTqOeZt4IfBD8ssl15zR25nV9irif72OvYZHv66PlUxWwFw7AI3Y4j1t/GJXQYDZlDvAssH0HSvvBn2twyr3u7MVHWWGQZIVPwerViJM0j60YHvZMcG3JG1ZCBQswmg48wSD9+C/gFzZX0JcgQenoXJca+2FpGgRDcldUh/4mrO0cKrXo5rF/syo7cH7G"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1fcOKXkCy2eVjSZSyXXXukVXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">天猫美食</p></a><a class="sc-EHOje hrPgER" href="https://pages.tmall.com/wow/a/act/tmall/dailygroup/18/wupr?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.14&scm=1007.home_icon.88vip.d&wh_pid=daily-186355&disableNav=YES"><img class="sc-bZQynM iEnsRn" src="https://img.alicdn.com/tfs/TB1FyEazAY2gK0jSZFgXXc5OFXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">会员中心</p></a></div><div class="sc-ifAKCX iLINIY"><a class="sc-EHOje jXFKFG" href="https://pages.tmall.com/wow/yao/20485/aljkmh?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.15&scm=1007.home_icon.alijk.d&wh_biz=tm"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1tikBVAPoK1RjSZKbXXX1IXXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">阿里健康</p></a><a class="sc-EHOje hrPgER" href="https://m.duanqu.com?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.16&scm=1007.home_icon.zdxh.d&_ariver_appid=6158543"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1xcTYxFT7gK0jSZFpXXaTkpXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">造点新货</p></a></div><div class="sc-ifAKCX iLINIY"><a class="sc-EHOje jXFKFG" href="https://huodong.m.taobao.com/act/snipcode.html?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.17&scm=1007.home_icon.koubsh.d&_wml_code=qeLJPHY5ySO3lef1quOfGhXh+8UW1yf1hl95h8wZUjlFlGFkyop3K4Hb+95myeqeJT4BYa03LO60S6xd8wO18LZ3/Vvg2pTGoYLZvdSZu8bbze9cO/iQDU/6LiQkOXRW6f4DA/MN2L81ERi+bsad/k+xIGTGkv98p4M7sIG2SpI="><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1h1MnVCrqK1RjSZK9XXXyypXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">口碑生活</p></a><a class="sc-EHOje hrPgER" href="https://m.duanqu.com?utparam={"ranger_buckets_native":"tsp2584_22605"}&spm=a2141.1.iconsv5.18&scm=1007.home_icon.tuhuo.d&_ariver_appid=17570832"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB11tFkr7L0gK0jSZFxXXXWHVXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">土货鲜食</p></a></div></div>'
}
})
4、将html 复制至demo12.wxml 中，进行渲染。代码如下：
<rich-text nodes="{{html}}"></rich-text>
5、点击保存，页面显示淘宝的轮播图。
（二）对象数组第一部分我们将html的值是用标签字符串来表示的，第二部分我们换成对象数组。
使用对象数组时，有规定的格式要求。
1、删除demo12.js文件中，html的内容，加入如下代码：
Page({
data:{
html:[
{
// div标签，name 属性来指定
name:"div"
//标签上的属性，class、style
attrs:{
class:"my_div"
style:"color:red;"
}
//子节点：要接收的数据类型和nodes第二种渲染方式的数据类型一致
chliden:[
{
name:"p"
attrs:{}
//放文本
children:[
{
type:"text"
text:"hello"
}]
}
]
}
]
}
})
2、点击保存，页面上出现”hello“字样。
总结来看：
第一种和第二种相比，还是第一种是比较简单的，第二种方式是很繁琐的。
所以，我们在平常的使用中，富文本标签的数据类型多使用标签字符串。
点击下方链接至小程序官方文档，自行查看其他属性的使用吧。
https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
搜索并关注飞寝旺食
获取更多小程序运营干货、免费的开发教程、源代码等！
做小程序我们是认真的！
