小程序解析html富文本插件wxParse配制全面指南

第一步：下载wxParse

下载地址：https://github.com/icindy/wxParse

点击下载

压缩包包含的文件，【红框文件】需要拷贝到小程序根目录

第二步：使用教程

官网教程

（原本想说的，还是算了，如果想看的直接去作者：https://github.com/icindy/wxParse 这里看就行了！我看了这个文档，竟然进了一次坑！直接晒我的教程吧！）

我的教程

第一步：配制xx.wxml文件（配制到你用到的页面中）

 

<import src="../../wxParse/wxParse.wxml"/>

第二步：配制xx.wxss文件（配制到你用到的页面中）

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

第三步：配制xx.js文件（配制到你用到的页面中）

头部引用 

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

onLoad()方法里使用

article_content:WxParse.wxParse('article_content', 'html', res.data.article_content, that, 5)

/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/

第四步：xx.wxml文件里引用（引用到你用到的页面）

<view><template is="wxParse" data="{{wxParseData:content.nodes}}" />view>

完成这四步，就完美完成了，但是有得编辑器里面的图片不是绝对地址，所以会引起图片不显示的问题！

图片不显示问题

修改文件【html2json.js】

代码所在位置

这里的【server_url】就是指你的域名，我是直接在顶部【 ver】了一个变量【server_url】赋值的域名地址，所以你看到的这块代码出现了【server_url】！

1.把wxParse文件全部放入项目。

2.在wxml中import wxParse.wxml,并把template插入到到对应的位置上

<import src="../../../wxParse/wxParse.wxml"/>
<view class="view-title">{{title}}view>
<view class="view-time-box">
  <text class="view-date">{{date}}text>
  <text class="view-time">{{time}}text>
view>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

3.在wxss中import wxParse.wxss，并设置样式；比如‘wxParse-image’是富文本图片转化成image组件之后的类名，‘wxParse-p’是p标签转化成view组件后设置的类名

@import "../../../wxParse/wxParse.wxss";
page{
  background: #fff;
}
.view-title{
  line-height: 80rpx;
  font-size: 48rpx;
  color:#0C0C0C;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 190rpx;
  min-height: 80rpx;
  width:690rpx;
  padding:30rpx 30rpx 0;
}
.view-time-box{
  height: 66rpx;
  line-height: 66rpx;
  font-size: 30rpx;
  color:#999999;
  margin-bottom: 40rpx;
  padding:0 30rpx;
}
.view-date{
  margin-right: 20rpx;
}
.wxParse-img{
  margin-top:20rpx;
  display: block;
  position:relative;
  top:0;
  left:50%;
  transform: translateX(-50%);
}
.wxParse-p{
  text-indent: 2em;
  margin-top:20rpx;
  color:#0C0C0C;
  line-height:50rpx;
  font-size:34rpx;
  padding:0 30rpx 30rpx;
  text-align: justify;
}

4.js

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

  /**
   * 页面的初始数据
   */
  data: {
    title: '',
    date: "",
    time: "",
    id: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      id:options.id
    })
  },
  onShow: function () {
    wx.showLoading({
      title: '加载中...',
    })
    var that = this;

    // 模拟获取数据
    setTimeout(function () {
      that.setData({
        title:'侨宝柑普茶新会陈皮侨宝柑',
        date:"2018-03-01",
        time:"13:20:53"
      })
      var article = `
        "../../../imgs/index/s.png">
    微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）
    微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）
        "../../../imgs/index/s.png">
    近两年，小青柑的火爆有目共睹，娇小玲珑的产品形态、便携式的消费场景、柑与茶结合的时尚方式以及独特的口感和养生功效，都在顺应着目前年轻化、多元化、便携化的茶叶消费市场需求，让它成为了一大爆品。
      `;
      /**
      * WxParse.wxParse(bindName , type, data, target,imagePadding)
      * 1.bindName绑定的数据名(必填)
      * 2.type可以为html或者md(必填)
      * 3.data为传入的具体数据(必填)
      * 4.target为Page对象,一般为this(必填)
      * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
      */
      WxParse.wxParse('article', 'html', article, that, 20);

      // 更改数据、获取新数据完成
      wx.hideLoading();
    }, 500)
  }
})