微信小程序页面html微信小法式常用的三种解析html办法你懂得若干

第一种：通过小程序自带的标签进行 rich-text 数据渲染

文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

利用方法：

微信小程序页面html微信小法式常用的三种解析html办法你懂得若干 AJAX

1、在page.js中将从接口中获取的值传给content

Page({ data: { content:'' }, onLoad: function () { var that = this; wx.request({ url: '', method: 'POST', data: { 'id':15 }, header: { 'content-type': 'application/json' }, success: function(res) { var content = res.data['content'];//对应富文本编辑器的内容 that.setData({ content:content }) } }) }})

2、在page.wxml中进行数据输出

<rich-text nodes="{{content}}" bindtap="tap"></rich-text>第二种：利用插件wxParse来解析html

利用方法：

1、插件下载地址：https://github.com/icindy/wxParse

2、将下载后的文件夹放到小程序项目的根目录

3、在须要加载html内容的页面对应的js文件里引入wxParse

var WxParse = require('../../wxParse/wxParse.js');

4、通过调用WxParse.wxParse方法来设置html内容

/ WxParse.wxParse(bindName , type, data, target,imagePadding) 1.bindName绑定的数据名(必填) 2.type可以为html或者md(必填) 3.data为传入的详细数据(必填) 4.target为Page工具,一样平常为this(必填) 5.imagePadding为当图片自适应是旁边的单一padding(默认为0,可选)/Page({ data: { }, onLoad: function () { var that = this; wx.request({ url: '', method: 'POST', data: { 'id':15 }, header: { 'content-type': 'application/json' }, success: function(res) { var article = res.data['content']; WxParse.wxParse('article', 'html', article, that,5); } }) }})

5、在页面中引用模板

<import src="../../wxParse/wxParse.wxml"/> <view class="wxParse"> <template is="wxParse" data="{{wxParseData:article.nodes}}"/> </view>

6、这样就配置完了，详细的样式是可以通过css去自定义调度的

第三种，通过webview来加载外部网页

如果说直策应用文章详情页面，强烈建议直接加载外部网页，这样利用起来是去合理化的。

文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

利用方法：

1、在所需页面加载web-view标签，传入外部访问的路径就可以了

<web-view bindload="finish" src="http://www.baidu.com"></web-view>

须要把稳的是个人版的微信小程序没有这个功能，企业版的须要在掌握台中先配置干系的业务域名。

总结

以上便是小程序开拓过程中对富文本编辑器中html渲染的三种常用方法。