微信小程序-富文本解析插件wxParse基礎使用及問題解決

一、插件准備

　　在github上可以直接下載該插件：https://github.com/icindy/wxParse

二、基本使用

1.將插件導入項目：

　　將wxParse文件夾放在項目目錄下，如圖：

　　

其中：

　　- wxParse/
　　　　-wxParse.js(必須存在)
　　　　-html2json.js(必須存在)
　　　　-htmlparser.js(必須存在)
　　　　-showdown.js(必須存在)
　　　　-wxDiscode.js(必須存在)
　　　　-wxParse.wxml(必須存在)
　　　　-wxParse.wxss(必須存在)
　　　　-emojis(可選)

2.js文件：

引入wxParse：

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

wxParse使用：

util.request(api.TopicDetail, { id: that.data.id}).then(function (res) {
   if (res.errno === 0) {
     WxParse.wxParse('topicDetail', 'html', res.data.content, that);
   }
});

其中，util.requset是我自己封裝的微信請求方法。

3.wxss引入：

@import "../../lib/wxParse/wxParse.wxss";

4.wxm引入：

<import src="../../lib/wxParse/wxParse.wxml"/> 
<template is="wxParse" data="{{wxParseData:topicDetail.nodes}}"/>

三、問題解決

我在使用這款插件的過程中遇到了一個問題：

　　騰訊的開發工具上使用無問題，但是在預覽在手機上或者小程序發布之后卻不能顯示富文本了，調試模式下后台也沒有發現報錯。

排查后發現程序運載到插件的html2json.js文件中第112行時，就沒有在往下走了：

 console.dir(value);

可能是console.dir()方法在微信無法支持，將其注釋掉或者改為console.log()方法，問題解決。