微信小程序innerHTML解决方案

需求介绍

小程序项目开发中有这么一个需求，接口返回 <div>abc<p>123</p></div> 字符串，然后在小程序页面显示。

爬坑过程

优先使用官方的内置组件

1. web-view 页面数据不能正常显示

2. rich-text 内容可以显示，但是遇到 <div> 或 <p> 标签文本不换行

3. view 内容显示异常

网上搜一搜，发现一个好东西 —— wxParse

wxParse-微信小程序富文本解析组件

作用：支持 Html 及 markdown 转 wxml 可视化

例如在 vue 中有 v-html 或原生 js 中有 <pre> innerHTML 等可以在插入一段 html 标签数据，小程序中有 web-view，以及非官方的 wxParse

Version

Debug Base Library : v2.10.1

wxParse: v0.3

使用

1. 下载 wxParse 的 GitHub 仓库 https://github.com/icindy/wxParse 到本地

2. 把 wxParse 项目中的 wxParse 目录复制到小程序项目的根目录，如下效果

3. 在 wxml 文件中引入 <import src="../../wxParse/wxParse.wxml" />

4. 在 js 文件中引入 var WxParse = require('../../wxParse/wxParse.js')

5. 在 wxml 文件中插入 html 标签，使用 <template>

注意 detailsContent 和 js 中代码是对应的

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

6. 在 js 中获取数据后，渲染到页面使用 WxParse.wxParse 函数实现

let self = this
let str = '<div>abc<p>123</p></div>'
WxParse.wxParse('detailsContent', 'html', str, self, 5)

End.