小程序插入html代码(类似vue中的v-html)

365 阅读1分钟

使用wxParse插件

1、下载wxParse(链接:github.com/icindy/wxPa…

2、wxParse文件夹放入小程序根目录

3、引入css样式 @import "/wxParse/wxParse.wxss";

4、引入js代码 var WxParse = require('../../wxParse/wxParse.js');

5、var content= '

HTML代码
';

  var _this= this;

  WxParse.wxParse('content', 'html', content, _this, 0);

   // 1、bindName绑定的数据名(必填)

  //  2、type可以为html或者md(必填)

  // 3、data为传入的具体数据(必填)

  // 4、target为Page对象,一般为this(必填)

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

6、// 引入模板

  <import src="../../wxParse/wxParse.wxml"/>

  //这里data中article为bindName

  <template is="wxParse" data="{{wxParseData:content.nodes}}"/>

7、循环引入模板

  js

  for (let i = 0; i < data.length; i++) {

      WxParse.wxParse('title' + i, 'html', data[i].title, _this);

      WxParse.wxParse('content' + i, 'html', data[i].content, _this);

      if (i === data.length - 1) {

        WxParse.wxParseTemArray("titleArray", 'title', data.length, _this)

        WxParse.wxParseTemArray("contentArray", 'content', data.length, _this)

      }

  }

  wxml

  <view class="questions-item" wx:for="{{contentArray}}" wx:key="index"> 

      <template is="wxParse" data="{{wxParseData:item}}"/>

  </view>