小程序富文本转换

最新推荐文章于 2025-07-28 05:28:31 发布

weixin_30748995

最新推荐文章于 2025-07-28 05:28:31 发布

阅读量308

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoxiao2017/p/10418778.html

本文详细介绍如何在微信小程序中实现富文本的解析与展示，包括js文件的配置、wxss样式引用的省略技巧、wxml文件的模板使用，以及通过WxParse插件进行HTML到富文本的转换。

富文本编辑器可以不引用wxss,可以省略

1.index.js

var WxParse = require('../../utils/wxParse/wxParse.js');

//请求接口获取到对应的字段var parma = {

      id: that.data.id
    } 
    wx.request({
      url: app.globalData.url + "******",
      data: parma,
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      method: 'POST',
      success: function (res) {
        console.log(res)
        // console.log(res.data.data.effect_pic)
        console.log(res.data.data.info)
        if (res.data.code == 1) { 
          that.setData({ 
            info: res.data.data.info,//店铺详情
          }) 

　　　　　　// 富文本转换  放在that.setData下面  防止页面还没加载完

          var article = res.data.data.info;
          WxParse.wxParse('article', 'html', article, that, 5); 
　　　　　　或者

          WxParse.wxParse('article', 'html',res.data.data.info, that, 5);

} }, })

2.index.wxss 此处可以省略

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

3.index.wxml

 <view class='box'> 
      <template style='width:100%;' is="wxParse" data="{{wxParseData:article.nodes}}" />
    </view>

转载于:https://www.cnblogs.com/xiaoxiao2017/p/10418778.html