微信小程序innerHTML解决方案

·  阅读 2269

需求介绍

小程序项目开发中有这么一个需求,接口返回 <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 中有

 innerHTML 等可以在插入一段 html 标签数据,小程序中有 web-view,以及非官方的 wxParse

Version

Debug Base Library : v2.10.1

wxParse: v0.3

使用

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

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

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

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

  1. wxml 文件中插入 html 标签,使用 <template>

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

  <view>
    <template is="wxParse" data="{{wxParseData:detailsContent.nodes}}" />
  </view>
复制代码
  1. js 中获取数据后,渲染到页面使用 WxParse.wxParse 函数实现
let self = this
let str = '<div>abc<p>123</p></div>'
WxParse.wxParse('detailsContent', 'html', str, self, 5)
复制代码
End.
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改