当前位置:首页 > 微信开发 > 小程序 > 微信小程序使用wxParse富文本解析组件解析显示HTML

微信小程序使用wxParse富文本解析组件解析显示HTML

DChen3年前 (2021-05-28)小程序1.48 K0

接触了一阵微信小程序,虽然编写程序简单,但是微信限制了太多,感觉没多大用处。比如,要想在微信小程序中显示一个网页,必须是企业认证的账号才能使用web-view组件显示网页,那这就尴尬了。个人账号不能显示网页html,必须使用微信的wxml语法才能正常解析,为了解决这个问题,有人写出了wxParse这个东西,它能将HTML与Markdown转换成微信的wxml,从而让微信显示出来。

wxParse使用方法

下载wxParse支持文件:https://github.com/icindy/wxParse

微信小程序使用wxParse富文本解析组件解析显示HTML  微信 小程序 wxParse 第1张

微信小程序使用wxParse富文本解析组件解析显示HTML

文件结构

- wxParse/
  -wxParse.js(必须存在)
  -html2json.js(必须存在)
  -htmlparser.js(必须存在)
  -showdown.js(必须存在)
  -wxDiscode.js(必须存在)
  -wxParse.wxml(必须存在)
  -wxParse.wxss(必须存在)
  -emojis(可选)

复制wxParse到你的微信小程序项目中,具体放哪里自己决定


引入必要文件

在使用的View中引入WxParse模块

var WxParse = require('../../wxParse/wxParse.js');

在使用的Wxss中引入WxParse.css,可以在app.wxss

@import "/wxParse/wxParse.wxss";

数据绑定

var article = '<div>我是HTML代码</div>';/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/var that = this;WxParse.wxParse('article', 'html', article, that, 5);

模版引用

引入模板

<import src="你的路径/wxParse/wxParse.wxml"/>

这里data中article为bindName

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



取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

版权声明:本文由“憨小猪”发布,如需转载请注明出处。

本文链接:https://www.phper.red/post/96.html

返回列表

上一篇:php实现微信小程序内容安全接口校验

没有最新的文章了...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。