美文网首页
微信小程序富文本使用wxParse

微信小程序富文本使用wxParse

作者: 老板下碗面 | 来源:发表于2020-08-18 11:49 被阅读0次

wxml页面中引入wxParse.wxml

插入模板<template is="wxParse" data="{{wxParseData:article.nodes}}" />

<!-- // 引入模板 -->
<import src="../../wxParse/wxParse.wxml" />
<!-- 会解析我们的特殊字符,我们通过设置decode属性为true -->
<view class='agreement_box' decode='true'>
    <!-- //这里data中article为bindName -->
    <template is="wxParse" data="{{wxParseData:article.nodes}}" />
</view>

js页面引入wxParse.js

/**

   * WxParse.wxParse(bindName , type, data, target,imagePadding)

   * 1.bindName绑定的数据名(必填)

   * 2.type可以为html或者md(必填)

   * 3.data为传入的具体数据(必填)

   * 4.target为Page对象,一般为this(必填)

   * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

   */
 getAgree() {
    var that = this;
    post(false, '', 'content/block', {
      name: 'agreement_weixin'
    }).then(res => {
      /**
       * WxParse.wxParse(bindName , type, data, target,imagePadding)
       * 1.bindName绑定的数据名(必填)
       * 2.type可以为html或者md(必填)
       * 3.data为传入的具体数据(必填)
       * 4.target为Page对象,一般为this(必填)
       * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
       */
      var article = res.data.content //我是代码
      // that.setData({
      //   list
      // })
      WxParse.wxParse('article', 'html', article, that, 5);
    })
  },

wxss引入wxParse.wxss样式

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

就可以了

相关文章