微信小程序中显示 HTML 代码

通过 wxParse 实现

一. wxParse 下载

https://github.com/icindy/wxParse

下载后的文件如下:

将 wxParse 文件夹放在 小程序项目中。

二. 引入(注意路径)

1.在 wxss 中引入 css

@import "/wxParse/wxParse.wxss";

2.在 wxml 中引入

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

在要显示代码的地方：

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

3. 在 js 中引入

const WxParse = require('../../wxParse/wxParse.js')

在加载完成数据的地方使用 ：

WxParse.wxParse('mainCode', 'html', res.data.main_code, this, 5);

注：第一个参数需要与 wxml 中的参数一致。 

参数讲解：

WxParse.wxParse(bindName , type, data, target,imagePadding)
    1.bindName绑定的数据名(必填)
    2.type可以为html或者md(必填)
    3.data为传入的具体数据(必填)
    4.target为Page对象,一般为this(必填)
    5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)