有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

html显示富文本内容(微信小程序常用的三种解析html方法,你了解多少)

小程序 炮渣日记 3周前 (11-16) 15次浏览 已收录 0个评论 扫描二维码

序言:在实际开发项目中遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过以下三种方式来进行数据渲染。

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

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

html显示富文本内容(微信小程序常用的三种解析html方法,你了解多少)

使用方法:

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

html显示富文本内容(微信小程序常用的三种解析html方法,你了解多少)

使用方法:

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

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

html显示富文本内容(微信小程序常用的三种解析html方法,你了解多少)

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

var WxParse = require('../../wxParse/wxParse.js');
html显示富文本内容(微信小程序常用的三种解析html方法,你了解多少)

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

html显示富文本内容(微信小程序常用的三种解析html方法,你了解多少)

使用方法:

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

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

需要注意的是个人版的微信小程序没有这个功能,企业版的需要在控制台中先配置相关的业务域名。

html显示富文本内容(微信小程序常用的三种解析html方法,你了解多少)

总结

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

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

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

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