微信小程序中难免会遇到后台给到的数据是HTML的,这就需要用到wxParse插件,来解析html。
首先需要下载wxParse插件,wxParse插件网盘链接
下载解压并放置在根目录下,如下图:
内部文件无须作任何改动即可使用。所使用页面需要做一下引用。
wxml文件,需要引入wxParse的模板。
<import src="../../wxParse/wxParse.wxml"/>
<view class="container">
<view class='title'>{{newsDetail.title}}</view>
<view class='sources'>来源:{{newsDetail.source}} {{newsDetail.publishTime}}</view>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
<view class='content'>
<!-- {{newsDetail.content}} -->
</view>
</view>
路径需要依你的项目路径来改变。图中红框所圈的地方是必须要写的。
js文件需要引入wxParse.js
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,可选)
*/
var that = this;
var article=res.newsDetail.content;
WxParse.wxParse('article', 'html', article, that, 5);
WxParse.wxParse('article', 'html', this.data.content, this, 5);
第一个参数可以参照wxml中template中wxParseData所绑定的值,名字可以换但必须要一致。里边的this.data.content就是你请求到的html编码。可以在页面的wxss中对模板的标签进行修饰,其实他们最后都被解析成了wx的标签。