微信小程序加载和解析html标签

小程序的页面可以是使用wx的语法编写的页面，也可以是第三方html页面，还可以是wx的页面然后使用wxParse解析html的标签最终构成小程序可以加载的wx页面。今天用到了第三种。

首先需要下载wxParse插件，我生成了云盘链接。

下载之后解压并放置在小程序项目的根目录下。如下图。

内部文件无须作任何改动即可使用。所使用页面需要做一下引用。

wxml文件，需要引入wxParse的模板。

<!--news.wxml-->
<import src="../../../wxParse/wxParse.wxml"/> 

<view class="container boxsizing">
  <view class="content-title">{{title}}</view>//这里是我自己的内容，所以这个页面也可以进行一些修饰
  <view class="content-time">{{time}}</view>//这里是我自己的内容，所以这个页面也可以进行一些修饰
  <template is="wxParse" data="{{wxParseData:article.nodes}}"/>//这里是模板解析出来的内容
</view>

路径需要依你的项目路径来改变。图中红框所圈的地方是必须要写的。

js文件需要引入wxParse.js

const app = getApp()
const WxParse = require('../../../wxParse/wxParse.js')//注意路径

同时在你的页面js文件中需要调用wxParse的渲染方法，写在你想要渲染页面的地方

    /**
    * 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', this.data.content, this, 5);

    第一个参数可以参照wxml中template中wxParseData所绑定的值,名字可以换但必须要一致。里边的this.data.content就是你请求到的html编码。可以在页面的wxss中对模板的标签进行修饰，其实他们最后都被解析成了wx的标签。

微信小程序加载和解析html标签

浏览过的版块