秦子恒个人介绍
秦子恒个人介绍

招商魔术师

部分作品:

《0基础一小时快速建站》

《微博营销实战宝典》

《网络招商系统》

《微信4部曲》

现在就加入微信开发QQ群:483987340,跟同行探讨微信公众平台开发。群满就关闭,你得等到下一个群开通才能加入…

网络新时代栏目
esxi教程 (2) 微信商户恢复解封 (17) exchange邮箱,exchange邮件服务器 (2) docker教程 (8) 五菱燃油观光车价格,五菱旅游观光车厂家 (4) 五菱房车,五菱房车官方网站信息 (20) 五菱物流车,五菱运输车 (3) 五菱公交,五菱客车 (24) 村村通客车 (1) 村村通公交 (1) 五菱房车,五菱房车官网 (26) 五菱校车,五菱校车官网国六 (26) exchange (6) 微信支付服务商 (10) 思科网络 (17) powershell教程 (25) 扫码点餐系统 (2) redis教程 (1) 海外小程序 (1) 微信域名防封系统 (2) 海外公众号 (2) 新加坡微信支付 (1) app应用解封 (5) 公众号解封 (16) 微信服务商 (10) 微信域名检测 (10) 恢复微信屏蔽网站 (110) 微信功能直达 (3) 老来网认证教程 (8) 付费视频网站源码 (34) 香港微信支付 (13) 微信境外支付 (18) wordpress付费阅读插件 (15) swoole教程 (14) 女装 (1) wordpress支付插件 (20) 微信服务直达开发 (16) 微信扫码支付开发 (5) wordpress插件开发 (27) 小程序插件 (6) 玩转小程序 (37) 微信沙箱 (21) web-view (40) 社交立减金 (10) 腾讯云 (22) php7 (36) 支付宝小程序 (4) 微信h5支付 (23) 企业微信 (3) 小程序运营 (17) javascript (29) 小程序支付开发 (44) 支付开发 (1) 小程序开发 (93) 微信小程序 (69) 微信买单 (4) 微信商户号 (10) 公众号支付 (20) 微信小店 (7) vim (5) 生活 (3) php订单 (13) 微信开发 (113) 微信公众号 (86) 饥饿营销 (15) 政府网站 (3) 互联网+ (52) nginx (23) apache (9) linux (42) mysql (14) php (36) 跨境电商 (2) 网站运营 (2) 京东运营 (53) 微博运营 (52) 电商运营 (97) 微电影 (1) 网络招商 (7) 网络招商研究 (8) 网络招商案例 (2) 网络招商教程 (12) 网络招商工具 (3) 招商方案动态 (1) 网络招商灵感 (3) 微博营销 (11) 未分类 (47)

首页 新建小程序项目 微信小程序富文本rich-text解析,rich-text解析html5代码

这篇文章小编就为大家带来一篇关于微信小程序富文本rich-text解析,rich-text解析html5代码。小编觉得挺不错的,现在就分享给大家,如果你在找验证码开发,手机短信接口,手机短信平台,也可以做个参照。一起跟随小编过来看看吧。

微信小程序富文本rich-text解析,rich-text解析html5代码

作者:小程序教员 发布时间:2017-11-01

小程序开发中, 经常需要把以前保存在数据库中的web内容, 放到小程序中显示。 由于取出来的是html格式, 很长一段时间, 小程序是不支持html标签, 所以小程序中显示都是单一的格式。

一、 小程序富文本rich-text介绍

直到小程序的基础库1.4.0, 终于推出富文本的rich-text组件, 可以支持部分html标签, 对小程序开发来说是一件非常棒的事情。 今天只对小程序的富文本组件rich-text做一个简单的介绍, 有能力的朋友, 可以直接开发应用, 以后有时间再通过视频的方式分享, 怎么把html解析到rich-text组件中。 [caption id="attachment_4200" align="alignnone" width="574"]小程序rich-text富文本解析 小程序rich-text富文本解析[/caption] 猛击这里, 观看《微信小程序富文本rich-text解析》视频

二、 rich-text组件

属性 类型 默认值 说明 最低版本
nodes Array / String [] 节点列表 / HTML String 1.4.0
注意:nodes 属性推荐使用 Array 类型,由于组件会将 String 类型转换为 Array 类型,因而性能会有所下降。

 三、  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一致
文本节点:type = text
属性 说明 类型 必填 备注
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&nbsp;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代码相关文章