在小程序中渲染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>

保存一下，已经可以看到效果了

实操-微信小程序渲染html内容相关推荐

微信小程序 python 渲染_微信小程序渲染html内容
最近又做了一个新的小程序关于物流订单查询欢迎来体验遇到了一个小问题:数据中返回电话号码的字符串识别出来并且高亮和可以绑定事件.比如数据中包含您的派送员黄xx正在派件,电话:137xxxx41460已 ...
微信小程序渲染实时时间
微信小程序渲染实时时间 1.看看在框架目录中是否有util文件夹,它用来存放工具栏的JavaScript函数 2.在要获取时间的.js文件中加载util.js文件 3.在onload方法中,调用uti ...
微信小程序渲染层错误：可以在AppData中获取到值但无法渲染到页面
微信小程序渲染层错误:可以在AppData中获取到值但无法渲染到页面 1.遇到的问题: 2.解释: 3.附上正确的完整代码: 在我跟着视频(bili:BV1nE41117BQ)P78 学做小程序的过程 ...
微信小程序渲染图片报错：[渲染层网络层错误] Failed to load local image resource
微信小程序渲染图片报错解决:[渲染层网络层错误] Failed to load local image resource 背景通过用户点击上传图片,通过res.tempFilePaths拿到用户上传 ...
微信小程序滚动播放内容
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序页面使内容充满整个屏幕
微信小程序页面使内容充满整个屏幕内容居中 wxml页面代码 <view class="empty_tip "><image class="" ...
微信小程序scroll-view底部内容无法完全显示
微信小程序scroll-view底部内容无法完全显示真机调试时,滑动到最底部,松手无法显示最底部的内容,如图: 需要在scroll-view组件内的最后加一个空白组件view在占位,使最后的信息能够 ...
【重磅】App内可直接打开微信小程序，新增内容安全接口等
今晚,微信又公布了几项微信小程序新能力: 微信小程序上线App直接打开小程序功能内容安全接口.插件详情页等多种能力接连更新上线一.App直接打开小程序之前微信已经开放过相关能力,可以实现App和 ...
微信小程序判断input内容不能为空
在微信小程序中判断input或者textarean内容为空直接上代码 wxml: <view class="molde_one"><textarea class ...

实操-微信小程序渲染html内容