微信小程式使用wxParse解析html的實現示例

阿新 • • 發佈：2019-02-20

最近專案上遇到在微信小程式裡需要顯示新聞內容，新聞內容是通過介面讀取的伺服器中的富文字內容，是html格式的，小程式預設是不支援html格式的內容顯示的，那我們需要顯示html內容的時候，就可以通過wxParse來實現。

首先我們在github上下載wxParse

下載完之後我們需要用到目錄下的wxParse資料夾，把他拷貝到我們的專案目錄下　　

下面是具體的使用步驟

1.在app.wxss全域性樣式檔案中，需要引入wxParse的樣式表

1	`@import` `"/page/wxParse/wxParse.wxss";`

2.在需要載入html內容的頁面對應的js檔案裡引入wxParse

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

3.通過呼叫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':13

},

header: {

'content-type': 'application/json'

},

success: function(res) {

var article = res.data[0].post;

WxParse.wxParse('article', 'html', article, that,5);

}

})

}

})

4.在頁面中引用模板

1 2	`<import src="../../wxParse/wxParse.wxml"/>` `<template is="wxParse"` `data="{{wxParseData:article.nodes}}"/>`

這樣就可以在微信小程式中嵌入html內容了

wxParse多資料迴圈使用方法

方法介紹

/**

* WxParse.wxParseTemArray(temArrayName,bindNameReg,total,that)

* 1.temArrayName: 為你呼叫時的陣列名稱

* 3.bindNameReg為迴圈的共同體如繫結為reply1，reply2...則bindNameReg = 'reply'

* 3.total為reply的個數

*/

var that = this;

WxParse.wxParseTemArray("replyTemArray",'reply', replyArr.length, that)

使用方式

迴圈繫結資料

var replyHtml0 = `<div style="margin-top:10px;height:50px;"><p class="reply"> wxParse回覆0:不錯，喜歡[03][04] </p> </div>`;

var replyHtml1 = `<div style="margin-top:10px;height:50px;"> <p class="reply"> wxParse回覆1:不錯，喜歡[03][04] </p> </div>`;

var replyHtml2 = `<div style="margin-top:10px;height:50px;"> <p class="reply"> wxParse回覆2:不錯，喜歡[05][07] </p> </div>`;

var replyHtml3 = `<div style="margin-top:10px;height:50px;"> <p class="reply"> wxParse回覆3:不錯，喜歡[06][08] </p> </div>`;

var replyHtml4 = `<div style="margin-top:10px; height:50px;"> <p class="reply"> wxParse回覆4:不錯，喜歡[09][08] </p> </div>`;

var replyHtml5 = `<div style="margin-top:10px;height:50px;"> <p class="reply"> wxParse回覆5:不錯，喜歡[07][08] </p> </div>`;

var replyArr = [];

replyArr.push(replyHtml0);

replyArr.push(replyHtml1);

replyArr.push(replyHtml2);

replyArr.push(replyHtml3);

replyArr.push(replyHtml4);

replyArr.push(replyHtml5);

for (let i = 0; i < replyArr.length; i++) {

WxParse.wxParse('reply' + i, 'html', replyArr[i], that);

if (i === replyArr.length - 1) {

WxParse.wxParseTemArray("replyTemArray",'reply', replyArr.length, that)

}

模版使用

<block wx:for="{{replyTemArray}}" wx:key="">

回覆{{index}}:<template is="wxParse" data="{{wxParseData:item}}"/>

</block>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援主機吧。

微信小程式使用wxParse解析html的實現示例

微信小程序WxParse解析html代碼

微信小程式（看文件寫例項十）微信小程式課堂寶APP實現我的模組相關介面及邏輯

微信小程式（看文件寫例項八）微信小程式課堂寶APP實現練習模組前臺

微信小程式（看文件寫例項七）微信小程式課堂寶APP實現線上課堂測試

微信小程式（看文件寫例項六）微信小程式課堂寶APP實現簽到邏輯

微信小程式（看文件寫例項五）微信小程式課堂寶APP實現獲取簽到列表

微信小程式（看文件寫例項四）微信小程式課堂寶APP實現簽到子頁面佈局及課程視訊播放頁面

微信小程式（看文件寫例項三）微信小程式課堂寶APP實現整體介面框架及首頁佈局

微信小程式——wxParse使用方法

微信小程式之下拉列表實現（附完整原始碼）

【微信小程式】公共方法實現實時捕捉input輸入

微信小程式+SpringBoot+mybatis+MySQL實現簡單的登入

微信小程式 image圖片元件實現寬度固定高度自適應

微信小程式如何使用Git實現版本管理

微信小程式~雲開發的實現的一個社群 Demo（即將完結~）

微信小程式中使用Animation實現簡約Loading效果

微信小程式標籤與HTML的同異處

微信小程式自定義元件實現地址單級連續選擇（拼多多APP地址選擇樣式）

微信小程式側滑選單實現

小程式怎麼接入直播功能，微信小程式直播功能如何實現

微信小程式使用wxParse解析html的實現示例

相關推薦