在微信小程序中使用富文本轉化插件wxParse

在微信小程序中我們往往需要展示一些豐富的頁面內容，包括圖片、文本等，基本上要求能夠解析常規的HTML最好，由於微信的視圖標簽和HTML標簽不一樣，但是也有相對應的關系，因此有人把HTML轉換做成了一個富文本轉化插件wxParse，方便我們使用，前人種樹后人乘涼，我們使用它來解析HTML就很方便了，這對於我們在后端已經完成的一些HTML內容，展示在小程序里就非常不錯。

這個插件的Github地址如下：wxParse-微信小程序富文本解析組件，官方稱它支持支持HTML及markdown解析，我這里主要用在小程序端解析HTML內容。

1、硬編碼HTML測試

首先我們根據官方網站說明，下載內容后，復制文件夾wxParse到項目目錄中（這里放在utils目錄中），如下所示。

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

然后在使用的JS文件中引入文件。

// 引入對HTML內容解析的處理類
var WxParse = require('../../utils/wxParse/wxParse.js');

接着在視圖中引入樣式文件，如下所示

//在使用的Wxss中引入WxParse.css,可以在app.wxss
/**app.wxss**/
@import "./utils/wxParse/wxParse.wxss";

接着在視圖文件中需要引入對應的模板文件，如下所示

// 引入模板
<import src="你的路徑/wxParse/wxParse.wxml"/>
//這里data中article為bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

一般我們會對模板的展示進行一定的調整，如下是我實際項目的界面代碼

<!--pages/company/index.wxml-->
<import src="../../utils/wxParse/wxParse.wxml"/> 
<view class="index">
    <view class="news">
        <view class="news-item line">
            <view class="news-details-content wxParse">
                <template is="wxParse" data="{{wxParseData:content.nodes}}"/>
            </view>
        </view>
    </view>
</view>

前面我們在JS文件里面只是做了文件的引用，為了實現數據的展示，我們需要插件wxParse對它進行數據綁定處理，我們為了方便，先定義一個HTML文檔內容在本地，方便展示處理。

在邏輯JS文件里面，我們先包含這個文件進來，如下代碼所示。

// 引入內置HTML對象文件
const company = require("./company.js");

然后我們先來測試內置HTML的轉換處理。

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {
      var that = this;

      //使用內置HTML展現
      var data = { url: company.url, image: company.image, content: company.content };
      this.setData({
          item: data
      }); 
      WxParse.wxParse('content', 'html', data.content, that, 25);

 解析得到界面效果如下所示。

 

2、動態獲取HTML並展示

上面我們是通過內置HTML文件的方式，然后把它包含進來，對內容進行轉換顯示，實際情況下，我們一般需要對內容進行動態化處理，通過請求服務器端的URL獲取內容，並進行展示，如下代碼所示。

      //使用Comprise的封裝函數展現
      var url ='http://localhost:27206/api/Framework/Information/FindByCode';
      var companyurl = "http://www.iqidi.com";
      var json = {code: 'company'};
      app.utils.get(url, json).then(res=> { 
        var data = { url: companyurl, image: res.Picture, content: res.Content };
        that.setData({
          item : data
        });
        WxParse.wxParse('content', 'html', data.content, that, 25);
      });

 其中的app.utils.get 是對wxRequest的封裝處理（使用了Promise插件），如下所示。

//封裝Request請求方法
function requst(url,method,data = {}){
  wx.showNavigationBarLoading()
  data.method = method
  return new Promise((resove,reject) => {
    wx.request({
      url: url,
      data: data,
      header: {},
      method: method.toUpperCase(), // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      success: function(res){
        wx.hideNavigationBarLoading()
        resove(res.data)
      },
      fail: function(msg) {
        console.log('reqest error',msg)
        wx.hideNavigationBarLoading()
        reject('fail')
      }
    })
  })
}

另外我們服務器返回的JSON如下所示

這個后台是采用C#的MVC后台生成的JSON，具體后台代碼如下所示。

        /// <summary>
        /// 通過代碼獲取對應的文章內容
        /// </summary>
        /// <param name="id">產品ID</param>
        /// <returns></returns>
        [HttpGet]
        public ExpandoObject FindByCode(string code)
        {                     
            //如果需要修改字段顯示，則參考下面代碼處理
            dynamic obj = new ExpandoObject();

            var info = baseBLL.FindSingle(string.Format("Code='{0}' AND IsDoc=0 ", code));
            if (info != null)
            {
                obj.ID = info.ID;
                obj.Title = info.Title;
                obj.Content = info.Content;
                obj.Picture = info.Picture;
                obj.Category = info.Category;
            }
            return obj;
        }

 解析得到界面效果和上面的一致。

   

以上就是使用富文本轉化插件wxParse對HTML內容進行的轉換實現，這些動態內容，我們可以利用網站后台進行動態的維護即可。

文章列表管理界面如下所示：

文章內容編輯界面如下所示