小程序通过WxParse实现对html标签的解析,并且图片可以查看大图
wxParse下载地址https://pan.baidu.com/s/1nG3eX01qaqVqQq7zN5S0NQ
使用方法:
一:将wxParse引入项目中
二:在需要解析html的js文件中,引入wxParse.js
const WxParse = require('../../../wxParse/wxParse.js');
//从接口中获取数据
wx.request({
url: app.globalData.localUrl + '/api/v2/base/hospital/get',
method: "post",
data: {
hospital_id: hospital_id
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'csrf-csrf': 'csrf-csrf',
},
success: function (res) {
let data = res.data.data;
let total_content = data.introduce; //接口中带html标签的内容
/**
* 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', total_content, that, 5);
that.setData({
hospitalDetail: data,
})
},
fail(res) {
wx.showModal({
title: res.data.msg
})
}
})
},
三:在对应的wxss样式文件中引入wxParse的css样式
@import '../../wxParse/wxParse.wxss';
四:在wxml文件里,引入wxParse模板
最顶部引入
<import src="../../../wxParse/wxParse.wxml" />
在需要放置html内容的地方,添加模板
<template is="wxParse" data="{{wxParseData:article.nodes}}" />
wxParseData:article.nodes为固定用法
即可完成对html标签的解析