实操-微信小程序渲染html内容
在小程序中渲染html内容–wxParse
下载 wxParse 组件并配置到项目当中
github下载组件
下载完成后其实我们只需要用到:wxParse目录里的文件
将红框中的文件复制到我们自己的项目中即可,例如:
使用 wxParse
1、在 js文件中引入
// pages/user_deal/index.js
var util = require('../../utils/util.js');
var WxParse = require('../../wxParse/wxParse/wxParse.js');
Page({
/**
* 页面的初始数据
*/
data: {
message:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
util.getWebDataWithPostOrGet({
url: 'getUserAgreement',
param: {},
method: "get",
success: function (data) {
WxParse.wxParse('message', 'html', data.message, that, 5);
// that.setData({
// message: data.message
// })
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
注:util 是封装过的 请求函数,此处替换为小程序自带的 请求函数即可
WxParse.wxParse(‘message’, ‘html’, data.message, that, 5);
参数解释:
1:‘message’,绑定的数据名(必填)
2:‘html’,可以为html或者md(必填)
3:‘data.message’,为传入的具体数据(必填)
4:‘that’,为Page对象,一般为this(必填)
5:‘ 5’,imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
2、在wxml中使用
<!--pages/user_deal/index.wxml-->
<view class="container">
<import src="../../wxParse/wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:message.nodes}}"/>
</view>