微信小程序中解析html代码片段,使用wxParse

使用wxParse插件进行转换

• 下载链接 : 点这里.
• 下载完后，复制wxParse这个文件夹，把这个文件夹放到自己小程序的utils里面

wxss

• 首先在全局样式app.wxss里面引入wxParse的样式表

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

js

• 在需要解析html页面的js文件引入wxParse.js

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

• 使用方式

 /**
 * WxParse.wxParse(bindName , type, data, target,imagePadding)
 * 1.bindName绑定的数据名，对应wxml中引入的属性名(必填)
 * 2.type可以为html或者md, 我们这里是解析html所以填html(必填)
 * 3.data为传入的具体数据, 传入html片段字符串(必填)
 * 4.target为微信Page对象,一般为this(必填)
 * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
 */
 
 onLoad: function(){.
   let html = '<div>您好</div>';
   let that = this;
   wxParse.wxParse('name', 'html', html, that, 0);
 }

wxml

• 引入wxParse.html
• 使用自己在js定义的代码片段

<import src="../../utils/wxParse/wxParse.wxml" />
<template is="wxParse" data="{{wxParseData:name.nodes}}" />