【微信小程序遇到的坑】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标签的解析

 

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值