【微信小程序遇到的坑】WxParse实现对html标签的解析（html文本在小程序里的展示）

小程序通过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标签的解析