这篇文章小编就为大家带来一篇关于微信小程序富文本rich-text解析,rich-text解析html5代码。小编觉得挺不错的,现在就分享给大家,如果你在找验证码开发,手机短信接口,手机短信平台,也可以做个参照。一起跟随小编过来看看吧。
微信小程序富文本rich-text解析,rich-text解析html5代码
作者:小程序教员 发布时间:2017-11-01
小程序开发中,
经常需要把以前保存在数据库中的web内容,
放到小程序中显示。
由于取出来的是html格式,
很长一段时间,
小程序是不支持html标签,
所以小程序中显示都是单一的格式。
注意:nodes 属性推荐使用 Array 类型,由于组件会将 String 类型转换为 Array 类型,因而性能会有所下降。
文本节点:type = text
一、 小程序富文本rich-text介绍
直到小程序的基础库1.4.0, 终于推出富文本的rich-text组件, 可以支持部分html标签, 对小程序开发来说是一件非常棒的事情。 今天只对小程序的富文本组件rich-text做一个简单的介绍, 有能力的朋友, 可以直接开发应用, 以后有时间再通过视频的方式分享, 怎么把html解析到rich-text组件中。 [caption id="attachment_4200" align="alignnone" width="574"] 小程序rich-text富文本解析[/caption] 猛击这里, 观看《微信小程序富文本rich-text解析》视频二、 rich-text组件
属性 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
nodes | Array / String | [] | 节点列表 / HTML String | 1.4.0 |
三、 rich-text组件支持的事件类型
支持默认事件,包括:tap、touchstart、touchmove、touchcancel、touchend和longtap 猛击这里, 观看《微信小程序富文本rich-text解析》视频四、 节点node支持的两大类型
nodes 现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点。 元素节点:type = node属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
name | 标签名 | String | 是 | 支持部分受信任的HTML节点 |
attrs | 属性 | Object | 否 | 支持部分受信任的属性,遵循Pascal命名法 |
children | 子节点列表 | Array | 否 | 结构和nodes一致 |
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
text | 文本 | String | 是 | 支持entities |
五、受信任的HTML节点及属性
全局支持class和style属性,不支持id属性。节点 | 属性 |
---|---|
a | |
abbr | |
b | |
blockquote | |
br | |
code | |
col | span,width |
colgroup | span,width |
dd | |
del | |
div | |
dl | |
dt | |
em | |
fieldset | |
h1 | |
h2 | |
h3 | |
h4 | |
h5 | |
h6 | |
hr | |
i | |
img | alt,src,height,width |
ins | |
label | |
legend | |
li | |
ol | start,type |
p | |
q | |
span | |
strong | |
sub | |
sup | |
table | width |
tbody | |
td | colspan,height,rowspan,width |
tfoot | |
th | colspan,height,rowspan,width |
thead | |
tr | |
ul |
六、 rich-text示例代码
rich-text.wxml文件代码<rich-text nodes="{{nodes}}" bindtap="richTap"></rich-text>
rich-text.js文件代码
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello ziheng!'
}]
}]
},
richTap() {
console.log('richTap')
}
})
提醒:img标签,只支持网络图片,也就是http/https开头的地址,不支持小程序本地图片地址。
猛击这里,
观看《微信小程序富文本rich-text解析》视频
温馨提醒
除了“使用小程序rich-text解析html”之外, 在整个微信小程序开发过程中, 你可能会遇到下面的难题: 2-1) 小程序GET方式与服务器通信 2-2) 小程序POST方式提交数据 2-3) 小程序获取session_key 2-4) 获取小程序用户的openid 2-5) 解密小程序中的decryptData加密数据 2-6) 生成小程序支付的prepay_id 2-7) 生成小程序支付签名paysign 2-8) 异步处理小程序支付结果 2-9) 获取小程序模板消息的formId 2-10) 小程序支付后发送模板消息 2-11) 生成小程序二维码 2-12) 小程序解析html网页代码 2-13) 把你的网站嵌入到小程序里 … 可以观看子恒老师的《微信小程序开发》系列视频, 了解实现过程和下载微信小程序相关源代码 你什么时候需要自己开发小程序——微信小程序开发视频教程1 微信开发进化论——微信小程序开发视频教程2 小程序通过get方式与服务器通信——微信小程序开发视频教程3 小程序通过post方式与服务器通信——微信小程序开发视频教程4 小程序开发涉及到的知识结构和层面——微信小程序开发视频教程5 充值小程序参考案例——微信小程序开发视频教程6 实现充值小程序前端页面布局——微信小程序开发视频教程7 获取小程序session key——微信小程序开发视频教程8 获取用户openid——微信小程序开发视频教程9 小程序开发调试函数——微信小程序开发视频教程10 小程序解码wx.getUserInfo中的decryptData数据——微信小程序开发视频教程11 小程序生成统一支付prepay_id相关配置和类介绍——微信小程序开发视频教程12 生成小程序支付的prepay_id——微信小程序开发视频教程13 生成小程序支付签名paysign——微信小程序开发视频教程14 实现小程序支付——微信小程序开发视频教程15 异步处理小程序支付结果notify_url——微信小程序开发视频教程16 小程序发送模板消息template——微信小程序开发视频教程17 获取小程序模板消息的formId——微信小程序开发视频教程18 小程序提交表单后发送模板消息——微信小程序开发视频教程19 小程序支付后发送模板消息——微信小程序开发视频教程20 小程序支付开发案例总结——微信小程序开发视频教程21 小程序二维码开发——微信小程序开发视频教程22 小程序开发生成二维码——微信小程序开发视频教程23 生成小程序三级分销推广海报——微信小程序开发视频教程24 小程序解析html的3种常用方法——微信小程序开发视频教程25 微信小程序用wxParse解析html ——微信小程序开发视频教程26 小程序rich-text解析html网页——微信小程序开发视频教程27 小程序设置web-view业务域名 ——微信小程序开发视频教程28 小程序web-view打开html网页——微信小程序开发视频教程29 小程序wx.chooseAddress获取用户收货地址——微信小程序开发视频教程30 小程序getPhoneNumber获取用户微信认证时的手机号码——微信小程序开发视频教程31 小程序解密getPhoneNumber中的手机号码——微信小程序开发视频教程32声明:部分文章或图片未能及时与原作者取得联系,若来源标注错误或侵犯到您的权益烦请告知QQ:2334512685,我们会及时删除。
发布:秦子恒博客,欢迎转载分享,请保留出处。
微信小程序富文本rich-text解析,rich-text解析html5代码链接:https://www.qinziheng.com/details/4199/
微信小程序富文本rich-text解析,rich-text解析html5代码相关文章