分享到:微信小程序html内容解析转义富文本wxParse的使用

今天在写小程序的时候,发现内容页html转换出现了问题,在解析代码展现到页面的时候,出现大量的html脚本,像span、p、strong..等等很多代码,在小程序中是读不出来这些脚本的,在网上找了一圈,发现有个小插件wxParse-微信小程序富文本解析组件很好用。在此记录下来,方便更多的同学参考学习。

wxParse-master点击下载

支持特性
HTML的大部分标签解析
内联style
标签Class
图片自适应规则
模版层级可扩展性
图片多图片预览
多数据循环方式

基本使用方法

 

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}}"/>

注意点

在上面的基本使用里面在.js文件和.wxml文件里面出现的article这个是两个文件里面是一样的。但是article是js文件里面的一个变量是可以变的,只要保证js文件和wxml文件里面变量名一致即可。 实例结构

page页面是测试页面。


5、wxml文件

<text class='h1'>{{news_title}}</text>
<view class="qh_wap_news_ny_a">
  来源:蕲汇网络
</view>
<view class="qh_wap_news_ny_b">
  <ul>
<import src="../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
  </ul>
</view>
<include src="../common/footer.wxml"></include>


6、wxss文件

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


7、js文件

var WxParse = require('../wxParse/wxParse.js');
const app = getApp()
var anli_val = function (that, e) {
  wx: wx.request({
    url: 'https://www.qihuiweb.com/x/xxx.php?typeid=1&id=' + e,
    data: {},
    header: {
      'content-type': 'application/json' // 默认值
    }, 
    method: 'GET',
    dataType: 'json',
    responseType: 'text',
    success: function (res) {
      var l = res.data
      console.log(l)
      WxParse.wxParse('article', 'html', l.body, that, 0);