微信小程序解析富文本的方法

以你之姓@ 2023-10-11 12:25 72阅读 0赞

1.可以使用wxParse插件解析html

2.下载后复制到自己的小程序项目中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70]  
3.设置全局样式

@import "./wxParse/wxParse.wxss";

4.在需要调用插件的页面中引入js

import { shopModel, couponModel } from '../../apis/index.js';
    var WxParse = require('../../wxParse/wxParse.js');
     onLoad(options) {
          let {  uid, scene } = options;
            let that = this; 
          uid = uid || '';
            this.setData({
                uid,
            }); 
     
          shopModel.getDetail({ uid }).then((d) => {
          let detail = d.data;
          that.setData({
            detail
          }) 
          let space = wx.getSystemInfoSync().windowWidth / 750 * 30;
          /*** WxParse.wxParse(bindName , type, data, target,imagePadding)
    		* 1.bindName绑定的数据名(必填)
    		* 2.type可以为html或者md(必填)
    		* 3.data为传入的具体数据(必填)
    		* 4.target为Page对象,一般为this(必填)
    		* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
    		* */  
    		if (detail.about) {
    		  WxParse.wxParse('about', 'html', detail.about, that, space);
            }  
          })
        },

5.wxml

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190923153532983.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0,size_16,color_FFFFFF,t_70