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

招商魔术师

部分作品:

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

首页 新建小程序项目 小程序解析富文本的3种方法,微信小程序转换html5富文本

下面小编就为大家带来一篇讲小程序解析富文本的3种方法,微信小程序转换html5富文本。小编觉得挺不错的,现在就分享给大家,如果你在找pagepath,miniprogram,小程序打开a标签,也可以做个交流。一起跟随小编过来看看吧。

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

作者:小程序分析员 发布时间:2017-11-16

我们做普通web开发时, 后台可以使用很多的富文本编辑器, 比如百度ueditor编辑器,ckeditor富文本编辑器等。 但是微信小程序是在自己的引擎里解析, 所以很多html/html5的标签无法在小程序里正常显示, 今天跟着子恒老师来看看, 小程序解析富文本的3种常用方法。

一、 使用 wxParse 解析富文本

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

wxParse解析html5富文本缺点

在解析富文本过程中, 多次调用小程序的setData()方法, 对性能有一定影响。 关注子恒老师公众号 性感笔记 回复 富文本 观看《小程序使用wxParse解析html富文本》视频 查看源代码编写演示。 [caption id="attachment_4337" align="alignnone" width="726"]wxparse解析富文本wxml代码 wxparse解析富文本wxml代码[/caption]

二、 使用 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内容 需要做兼容处理 [caption id="attachment_4338" align="alignnone" width="800"]rich-text解析富文本效果 rich-text解析富文本效果[/caption]

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

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

web-view 解析富文本缺点

其实两个很多微信都低于1.6.4版本, 不能使用, 需要用前面介绍的两种方法做兼容处理。 关注子恒老师公众号 性感笔记 回复 打开网页 观看《小程序使用webview打开网页》视频 查看源代码编写实现过程 [caption id="attachment_4339" align="alignnone" width="800"]web-view解析富文本代码和效果 web-view解析富文本代码和效果[/caption] 现在为止, 上面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
微信赞赏码

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

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

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

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