小程序随笔7:wxParse实现html解析

小程序在开发时，读取到服务器的内容可能是html格式的，因小程序不支持html格式的内容显示，所以要对html格式的内容进行解析，因此wxParse就出现了。

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

实现方法：
1、将下载下来的wxParse文件夹复制到根目录下。
2、在小程序页面对应的wxml文件中引用wxParse.wxml

<import src="../../wxParse/wxParse.wxml"/> 
<view class="container">
  <view class="topcezter">
    <view class="title">{{title}}</view>
    <view class="dateauthor">{{dateauthor}}</view>
  </view>
  <view class="wxParse">
    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
  </view>
</view>

重点看class为wxParse的view的布局，上面class为topcenter的view是为了美观，我自己写的标题和时间显示。
3、在小程序页面对应的js文件中引用wxParse.js，并使用

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

然后是Page里面的逻辑如下所示：

Page({
  data:{
    title:"2021款福特探险者新增了国王牧场版",
    dateauthor:"2021-03-11 15:55 viven"
  },
  onLoad:function(options){
    var that = this;
    var article = 
    "<p><img data-ratio=\"0.5760709010339734\" src=\"http://7xqd2w.com2.z0.glb.qiniucdn.com/Fv79kC8T7OziaRshDTTtBBCBbU6O?imageView2/2/w/660/interlace/0/q/100\" data-type=\"png\" data-w=\"1354\"/>2021款福特探险者新增了国王牧场版，这个车型名称出现在福特多款车型上，国王牧场（King ranch）这个名称来自真实的德州一个大型农场，但之前20年来，主要是F系列皮卡和全尺寸SUV征服者才销售国王牧场版，作为一款车中的豪华配置车型。</p >"+
    "<p><br/></p >" +
    "<p style=\"text-align: center;\"><img class=\"rich_pages\" data-ratio=\"0.6218130311614731\" data-s=\"300,640\" src=\"http://7xqd2w.com2.z0.glb.qiniucdn.com/Fr-o2axGdPL0ssdhmqrOhCOAWcwR?imageView2/2/w/660/interlace/0/q/100\" data-type=\"png\" data-w=\"1412\" style=\"\"/></p>" +
    "<p>但在福特车型系列中，国王牧场车型都是排在配置第二豪华位置，顶配通常是称为白金版（Platinum），但国王牧场版会有一些特殊的内饰装饰，例如带有国王牧场印花的皮座椅，探险者的国王牧场版也是如此，配置和售价低于探险者的白金版，报价53,595美元，比入门版探险者的33,740美元起贵了约2万美元。多付出2万美元的国王牧场版，会有哪些配置呢？<br/></p >";

    /**
    * 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, 5);
  }
})

最终效果图如下：

wxparse解析效果图

标题和时间是小程序原生的，下面的图片及文案是wxParse解的html的效果。

随笔记录，不喜勿喷。