小程序內解析富文本的幾種方案

~

1）mp-hml 小程序富文本組件，支持渲染和編輯 html，支持在微信、QQ、百度、支付寶、頭條和 uni-app 平臺使用

https://github.com/ixiaofeiyang/mp-html  https://pan.baidu.com/s/1gEu5lsZKDf6tuvgUwAVX-Q?pwd=c6t6

2）wxparse

https://github.com/icindy/wxParse  https://pan.baidu.com/s/1VHqG2dlbDWy68aXQxsBSmQ?pwd=xwst

3）html2wxml

?

參考文檔

1）如何在小程序內部展示富文本? - 微信開放社區 https://developers.weixin.qq.com/community/develop/article/doc/00060a0c9e0070ae970aa1d605b013

2）請問小程序怎么解析一個完整的H5頁面？? - 微信開放社區 https://developers.weixin.qq.com/community/develop/doc/000c44e36187d8e2787b9480b59400

最后一次編輯于  2020-1

基本使用方法

• 
  

1. Copy文件夾wxParse

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

• 
  

2. 引入必要文件

//在使用的View中引入WxParse模塊
var WxParse = require('../../wxParse/wxParse.js');

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

• 
  

3. 數據綁定

var article = '<div>我是HTML代碼</div>';
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName綁定的數據名(必填)
* 2.type可以為html或者md(必填)
* 3.data為傳入的具體數據(必填)
* 4.target為Page對象,一般為this(必填)
* 5.imagePadding為當圖片自適應是左右的單一padding(默認為0,可選)
*/
var that = this;
WxParse.wxParse('article', 'html', article, that, 5);

• 
  

4. 模版引用

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

高級用法

• 配置小表情emojis

/**
* WxParse.emojisInit(reg,baseSrc,emojis)
* 1.reg，如格式為[00]=>賦值 reg='[]'
* 2.baseSrc,為存儲emojis的圖片文件夾
* 3.emojis,定義表情鍵值對
*/
WxParse.emojisInit('[]', "/wxParse/emojis/", {
      "00": "00.gif",
      "01": "01.gif",
      "02": "02.gif",
      "03": "03.gif",
      "04": "04.gif",
      "05": "05.gif",
      "06": "06.gif",
      "07": "07.gif",
      "08": "08.gif",
      "09": "09.gif",
      "09": "09.gif",
      "10": "10.gif",
      "11": "11.gif",
      "12": "12.gif",
      "13": "13.gif",
      "14": "14.gif",
      "15": "15.gif",
      "16": "16.gif",
      "17": "17.gif",
      "18": "18.gif",
      "19": "19.gif",
    });