小程序内解析富文本的几种方案

小程序内解析富文本的几种方案

~

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",
    });