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