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

招商魔术师

部分作品:

《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)

首页 新建小程序项目 小程序解析富文本为wxml,小程序rich-text解析html5网页

下面内容小编就为大家带来一篇关于小程序解析富文本为wxml,小程序rich-text解析html5网页。小编觉得挺不错的,现在就分享给大家,如果你在找小程序跳转链接,手机短信接口,小程序名称,也可以做个借鉴。一起跟随小编过来看看吧。

小程序解析富文本为wxml,小程序rich-text解析html5网页

作者:微信小程序观察员 发布时间:2017-11-13

我们在《小程序解析html的3种常用方法》提到过, 小程序解析html网页标签, 有3种方法: 1) 使用 wxParse 解析html 2) 单独解析 html标签 3) 使用最新的小程序组件 web-view 第一种方法《使用wxParse把html5转换为wxml》, 我们在上一节课堂中详细讲解了, 但是wxParse解析html过程中, 会多次调用小程序的setData()方法, 这是非常消耗性能的。 今天跟着子恒老师来学习第二种方法, 使用小程序的rich-text显示html的方法, 在解析过程中, 不用调用setData()方法, 在性能上会好很多。

一、 rich-text解析html难点

我们先看下, rich-text的使用方法 <!-- rich-text.wxml --> <rich-text nodes="{{nodes}}" bindtap="tap"></rich-text> 可以看到很简单, 关键是nodes={{nodes}}, 其中第一个nodes是固定的, 第二个{{nodes}}是把html解析好节点信息, rich-text可以显示, 但是小程序并没有直接把html解析成可以显示的节点, 也就是说你直接从服务器数据库中, 取出的html是无法显示的。 使用rich-text的关键是把html解析成可以显示的节点, 也是难点。

二、 rich-text解析html流程和方法

由于使用js插件把html解析成rich-text节点复杂, 详细的过程, 可以参考《rich-text解析html》视频教程, 里面有代码的编写。 [caption id="attachment_4299" align="alignnone" width="800"]rich-text解析html rich-text解析html[/caption]

三、 rich-text解析html5要注意的地方

1) 兼容处理

小程序rich-text是新组件, 需要基础库版本在1.4.0以上才能使用, 对用户的版本在1.4.0以下的需要做兼容处理。 [caption id="attachment_4300" align="alignnone" width="800"]rich-text组件注意事项 rich-text组件注意事项[/caption]

2) 只支持解析html

如果你的网站内容, 后台使用markdown编写的, 就无法解析了。 小程序解析markdown的方法, 可以参考子恒老师上一节课的内容。
微信赞赏码

声明:部分文章或图片未能及时与原作者取得联系,若来源标注错误或侵犯到您的权益烦请告知QQ:2334512685,我们会及时删除。

发布:秦子恒博客,欢迎转载分享,请保留出处。

小程序解析富文本为wxml,小程序rich-text解析html5网页链接:https://www.qinziheng.com/details/4297/

小程序解析富文本为wxml,小程序rich-text解析html5网页相关文章