序言：在實際開發(fā)項目中遇到在微信小程序里需要顯示新聞內(nèi)容，新聞內(nèi)容是通過接口讀取的服務(wù)器中的富文本內(nèi)容，是html格式的，小程序默認(rèn)是不支持html格式的內(nèi)容顯示的，那我們需要顯示html內(nèi)容的時候，就可以通過以下三種方式來進(jìn)行數(shù)據(jù)渲染。
第一種：通過小程序自帶的標(biāo)簽進(jìn)行 rich-text 數(shù)據(jù)渲染
文檔地址：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.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'];//對應(yīng)富文本編輯器的內(nèi)容 that.setData({ content:content }) } }) }})
2、在page.wxml中進(jìn)行數(shù)據(jù)輸出
<rich-text nodes="{{content}}" bindtap="tap"></rich-text>
第二種：使用插件wxParse來解析html
使用方法：
1、插件下載地址：https://github.com/icindy/wxParse
2、將下載后的文件夾放到小程序項目的根目錄
3、在需要加載html內(nèi)容的頁面對應(yīng)的js文件里引入wxParse
var WxParse = require('../../wxParse/wxParse.js');
4、通過調(diào)用WxParse.wxParse方法來設(shè)置html內(nèi)容
/*** WxParse.wxParse(bindName , type, data, target,imagepadding)* 1.bindName綁定的數(shù)據(jù)名(必填)* 2.type可以為html或者md(必填)* 3.data為傳入的具體數(shù)據(jù)(必填)* 4.target為Page對象,一般為this(必填)* 5.imagePadding為當(dāng)圖片自適應(yīng)是左右的單一padding(默認(rèn)為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"/> <!--放在數(shù)據(jù)需要渲染的地方--><view class="wxParse"> <template is="wxParse" data="{{wxParseData:article.nodes}}"/> </view>
6、這樣就配置完了，具體的樣式是可以通過css去自定義調(diào)整的
第三種，通過webview來加載外部網(wǎng)頁
如果說直接使用文章詳情頁面，強(qiáng)烈建議直接加載外部網(wǎng)頁，這樣使用起來是去合理化的。
文檔地址：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
使用方法：
1、在所需頁面加載web-view標(biāo)簽，傳入外部訪問的路徑就可以了
<web-view bindload="finish" src="http://www.baidu.com"></web-view>
需要注意的是個人版的微信小程序沒有這個功能，企業(yè)版的需要在控制臺中先配置相關(guān)的業(yè)務(wù)域名。
總結(jié)
以上就是小程序開發(fā)過程中對富文本編輯器中html渲染的三種常用方法。
我是小程序軟件開發(fā)，每天分享開發(fā)過程中遇到的知識點，如果對你有幫助的話，幫忙點個贊再走唄，非常感謝。
《完》
往期文章分享：
php常用的富文本編輯器，ueditor和kindeditor
php一款可以在服務(wù)器安裝的在線api文檔編寫工具：showdoc
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報，一經(jīng)查實，本站將立刻刪除。