分享主题:linux,nginx,php,mysql

小程序解析富文本的3种方法,微信小程序转换html5富文本

小程序开发 0评论 现在加入小程序俱乐部QQ群:483987340

我们做普通web开发时,
后台可以使用很多的富文本编辑器,
比如百度ueditor编辑器,ckeditor富文本编辑器等。

但是微信小程序是在自己的引擎里解析,
所以很多html/html5的标签无法在小程序里正常显示,
今天跟着子恒老师来看看,
小程序解析富文本的3种常用方法。

一、 使用 wxParse 解析富文本

这种方式可以解析 html/markdown 两种脚本,
功能很强大,

wxParse解析html5富文本缺点

在解析富文本过程中,
多次调用小程序的setData()方法,
对性能有一定影响。

关注子恒老师公众号 性感笔记
回复 富文本
观看《小程序使用wxParse解析html富文本》视频
查看源代码编写演示。

wxparse解析富文本wxml代码

wxparse解析富文本wxml代码

二、 使用 rich-text 解析富文本

rich-text富文本组件是小程序1.4.0版本后推出来的,
可以通过js脚本把html解析成一定格式的nodes,
然后在 rich-text 中显示。

<!– rich-text.wxml –>
<rich-text nodes=”{{nodes}}” bindtap=”tap”></rich-text>

rich-text解析富文本的难点在于怎么把html/html5转换成符合小程序要求的nodes,
狙击这里
观看《小程序ritch-text组件解析html富文本》视频教程,
查看源代码编写演示。

rich-text富文件组件缺点

只能解析html内容
需要做兼容处理

rich-text解析富文本效果

rich-text解析富文本效果

三、 使用 web-view 解析富文本

web-view 是小程序1.6.4版本推出来的新组件,
功能很强大,
可以直接显示网页内容,
而且可以做 a 链接跳转。

web-view 解析富文本缺点

其实两个很多微信都低于1.6.4版本,
不能使用,
需要用前面介绍的两种方法做兼容处理。

关注子恒老师公众号 性感笔记
回复 打开网页
观看《小程序使用webview打开网页》视频
查看源代码编写实现过程

web-view解析富文本代码和效果

web-view解析富文本代码和效果

现在为止,
上面3种方法可以在微信小程序中解析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) 生成小程序二维码

可以观看子恒老师的《微信小程序开发》系列视频,
了解实现过程和下载微信小程序相关源代码
你什么时候需要自己开发小程序——微信小程序开发视频教程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

秦子恒公众号

来源:秦子恒博客,欢迎转载分享,请保留出处

小程序解析富文本的3种方法,微信小程序转换html5富文本链接:https://www.qinziheng.com/xiaochengxudev/4336.htm

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

喜欢 (4)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址