微信小程序wxParse使用说明

最近在做一个微信小程序项，遇到了文章的详情页面是富文本的情况，内容是通过接口读取的服务器中的富文本内容，是html格式的，小程序默认是不支持html格式的内容显示的，那我们需要显示html内容的时候，就可以通过wxParse来实现。
wxParse官方下载地址：https://github.com/icindy/wxParse

使用方法：
一，下载完之后我们需要用到此目录下的wxParse文件夹，把他拷贝到我们小程序项目的根目录下：

二，配置文件
首先在xx.wxml导入文件，在文件头写上：

<import src="../../wxParse/wxParse.wxml"/>

然后再wxss导入文件，在文件头写上：

@import "../../wxParse/wxParse.wxss";

三，在页面xx.js里面写上：

var WxParse = require('../../wxParse/wxParse.js');onLoad: function (options) {var that_ = this;wx.request({url: '',headers:{'Content-Type':'application/json'},success:function(rsp){that_.setData({'art': rsp.data})// rsp.data.body   富文本内容var content_ = rsp.data.body;WxParse.wxParse('content_', 'html', content_ , that_, 0);}})}

四，在页面中引用模板

<import src='../../wxParse/wxParse.wxml'/>
<template is="wxParse" data="{{wxParseData:content_.nodes}}" />//这里data中content_为bindName

这样就可以在微信小程序中嵌入html内容啦~

此方法的含义为：

WxParse.wxParse(bindName , type, data, target,imagePadding)
1.bindName绑定的数据名(必填)
2.type可以为html或者md(必填)
3.data为传入的具体数据(必填)
4.target为Page对象,一般为this(必填)
5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

微信小程序wxParse使用说明相关推荐

微信小程序点播插件_微信小程序 wxParse插件显示视频问题
修改wxParse/html2json.js 文件 ,在 html2json(html, bindName)方法里 var node = { node: 'element', tag: tag, }; ...
微信小程序wxparse特殊解析空格,解析↵换行符号
因为在实际的项目中使用wxparse的时候,发现空格和换行解析不了,就进行的源码的查看及修改, (一).解决↵换行符号解析不了的方法在微信小程序中换行\n需要再在text中进行实现,但是wxpars ...
微信小程序——wxParse使用方法
wxParse是一个微信小程序富文本解析组件.现在小程序里面自带了一个组件也能解析富文本,但是表现不尽人意.所以我还是采用的wxParse来解析富文本的. wxParse git地址:https:// ...
微信小程序web-view使用说明，及链接打不开问题
开发微信小程序时,有时会需要在小程序内打开网页链接,这时就需要用到 web-view 标签.web-view 是小程序上用来承载网页的容器,且每个页面只能有一个 web-view,它会自动铺满整个页面 ...
Go语言微信小程序SDK使用说明
介绍微信小程序服务端SDK,实现了小程序的登录.数据解密.客服消息.订阅消息.生成小程序码.生成小程序shortLink.生成页面Scheme码.生成小程序URL Link等功能. 安装说明 go ...
微信小程序 wxParse使用
wxParse使用 1.下载地址 github:https://github.com/icindy/wxParse 码云:https://gitee.com/hongfeifly/wxParse?_ ...
微信小程序wxparse内容页显示不出来不能正确解析html代码
这个是wxparse代码的一个bug,在一些特殊的手机里面,在wxparse/html2json.js中的第112和119行,都有一个 console.dir(这个函数的使用,把这个函数注释掉,内容就 ...
微信小程序wxParse插件解析html
1.在app.json中添加插件 "plugins": {"wxparse": {"version": "1.0.10" ...
微信小程序wxParse用法（解析富文本）
1.先下载wxparse 然后放到你的项目中 (与pages同层级) 2.然后在全局的app.wxss中引入 @import "/wxParse/wxParse.wxss"; 3. ...
WordPress版微信小程序2.6版发布
WordPress版微信小程序的完善和升级的工作一直都在进行中,我争取保证一个月可以出一个版本,希望通过一点点的改进,让这个开源产品日趋完美. 同时,pro版WordPress微信小程序也在紧锣密鼓的 ...

微信小程序wxParse使用说明

微信小程序wxParse使用说明相关推荐

最新文章

热门文章