微信小程序富文本使用wxParse

2020-08-18  本文已影响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";

就可以了

上一篇 下一篇

猜你喜欢

热点阅读