微信小程序innerHTML解决方案

需求介绍

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

爬坑过程

优先使用官方的内置组件

1. web-view 页面数据不能正常显示
   
2. rich-text 内容可以显示，但是遇到 <div> 或 <p> 标签文本不换行
   
3. view 内容显示异常
   

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

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

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

需求介绍
小程序项目开发中有这么一个需求，接口返回 <div>abc<p>123</p></div> 字符串，然后在小程序页面显示。
爬坑过程
优先使用官方的内置组件
web-view 页面数据不能正常显示
rich-text 内容可以显示，但是遇到 <div> 或 <p> 标签文本不换行
view 内容显示异常
网上搜一搜，发现一个好东西 —— wxParse
wxParse-微信小程序富文本解析组件
作用：支持 Html 及 markdown 转 wxml 可视化

Version

Debug Base Library : v2.10.1

wxParse: v0.3

使用

1. 下载 wxParse 的 GitHub 仓库 github.com/icindy/wxPa… 到本地
   
2. 把 wxParse 项目中的 wxParse 目录复制到小程序项目的根目录，如下效果

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

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)