前言:
此时姐妹们对“html解析过程”大体比较看重,姐妹们都想要学习一些“html解析过程”的相关资讯。那么小编同时在网摘上网罗了一些关于“html解析过程””的相关知识,希望我们能喜欢,我们一起来了解一下吧!序言:在实际开发项目中遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过以下三种方式来进行数据渲染。
第一种:通过小程序自带的标签进行 rich-text 数据渲染
文档地址:
使用方法:
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、插件下载地址:
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来加载外部网页
如果说直接使用文章详情页面,强烈建议直接加载外部网页,这样使用起来是去合理化的。
文档地址:
使用方法:
1、在所需页面加载web-view标签,传入外部访问的路径就可以了
<web-view bindload="finish" src=";></web-view>
需要注意的是个人版的微信小程序没有这个功能,企业版的需要在控制台中先配置相关的业务域名。
总结
以上就是小程序开发过程中对富文本编辑器中html渲染的三种常用方法。
我是小程序软件开发,每天分享开发过程中遇到的知识点,如果对你有帮助的话,帮忙点个赞再走呗,非常感谢。
《完》
往期文章分享:
php常用的富文本编辑器,ueditor和kindeditor
php一款可以在服务器安装的在线api文档编写工具:showdoc
标签: #html解析过程 #kindeditorphp #html开发微信小程序 #微信文章html