一个菜鸟的互联网技术分享博客
您的位置: 主页 > 微信小程序使用wxParse解析富文本HTML
advertisement

微信小程序使用wxParse解析富文本HTML

上一个博客记录了微信小程序组件之rich-text,转义显示富文本操作,但是这个微信小程序API文档没有将富文本中的视频在wxml中展示出来,那么就存在局限性,但是问题出现,那么就要去解决!!!
解决方法就是使用:
wxParse (目前已经停止维护了,但是用还是可以用的)
下载地址:
https://github.com/ianzhi/wxParse下载
具体步骤如下:
1、
从git仓库下载wxParse源码
2、
下载的文件,只把wxParse文件拷贝到项目里,如下图所示:

3、在项目里引用,分别在js, wxml,wxss引用,如下:
(1)在app.wxss全局样式文件中,需要引入wxParse的样式表

@import "/page/wxParse/wxParse.wxss";
(2)在需要加载html内容的页面对应的js文件里引入wxParse
var WxParse = require('../../wxParse/wxParse.js');
(3)通过调用WxParse.wxParse方法来设置html内容,主要代码入下图所示

(4)在页面中引用模板,代码如下:

<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
(5)最后来看看最终的效果,如下图所示:

zhangren.online
上一篇:微信小程序组件之rich-text,转义显示富文本操作
下一篇:解决微信小程序使用switchTab跳转后页面不刷新的问题

您可能喜欢

回到顶部