微信小程序 html插件,微信小程序使用wxParse插件读取富文本,解析html标记

微信小程序使用wxParse插件读取富文本,解析html标记

发布时间：2018-04-07

作者：Admin

标签：微信小程序

微信小程序解析HTML标记

访问量：1203

使用wxParse可以让微信识别到HTML标签(一样可以识别ueditor富文本中的HTML标签)

首先下载wxParse插件

Github: https://github.com/icindy/wxParse

Github点击Download ZIP可直接下载包

下载完成后只需要将包中的wxParse文件夹拷贝到小程序目录中即可

在需要用到的项目js文件中引入wxParse.js(使用相对路径)var WxParse = require('../wxParse/wxParse.js');

然后在需要用到的wxss中引入css样式(可以在全局样式app.wxss中引入)

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

在项目js文件中进行数据绑定

onLoad: function (options) {

var that=this;

wx.request({

url: '服务器接口地址',

success:function(res){

that.setData({

detail:WxParse.wxParse('detail', 'html', res.data[options.id].content, that, 5)

})

参数说明:

/*** WxParse.wxParse(bindName , type, data, target,imagePadding)

* data 数据不能为数组类型需要为String

* 1.bindName绑定的数据名(必填)

* 2.type可以为html或者md(必填)

* 3.data为传入的具体数据(必填)

* 4.target为Page对象,一般为this(必填)

* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)*/

然后就可以在项目wxml文件中引入wxParse视图模块

import src="../wxParse/wxParse.wxml" /> (这是一个标签<>)

然后进行模板数据输出

//detail为在js文件中的数据绑定时的bindName

template is="wxParse" data="wxParseData:detail.nods" />(这是一个标签<>)

微信小程序 html插件,微信小程序使用wxParse插件读取富文本,解析html标记相关推荐

微信小程序商品详情html,微信小程序关于商品详情类的富文本解析器
微信小程序关于商品详情类的富文本解析器 2020年08月10日 | 萬仟网IT编程 | 我要评论微信小程序关于商品详情类的富文本解析器富文本的解析,在vue中有v-html解析富文本的方法,但是在微 ...
微信小程序富文本解析
微信小程序富文本解析 *人狠话不多,直接代码搞起* html代码(后台返回的html代码) <p>这是一段文字</p><p><strong>这是加粗的字 ...
小程序富文本解析利器mp-html
微慕小程序是资讯.媒体类小程序,因为对富文本内容和媒体内容的显示有较高的需求.对于富文本解析,微慕小程序以前采用的开源的wxParse组件,不过wxParse组件存在很多的问题且已经停止维护支持,随着 ...
iOS富文本解析html图片,小程序解析html和富文本编辑内容【亲测有效】
首先去 https://github.com/icindy/wxParse 下载wxParse,只拷贝wxParse文件夹即可. 1.引入wxss @import "../../util/w ...
小程序解码/富文本解析
小程序富文本解码+富文本解析 //1.使用decodeURIComponent进行转码 js代码contentInfo:decodeURIComponent(res.info) //2. 使用微信官方 ...
小程序富文本解析wxParse 安卓手机部分不支持的一种情形
背景: 建议,对富文本的解析,还是使用官方提供的 <rich-text> 比较好,可参考文章:微信小程序 rich-text 富文本的解析显示在小程序开发过程中,必然会涉及到富文本的解析 ...
taro 缺点_Taro小程序富文本解析4种方法
最近遇到一个富文本解析的问题,尝试了很多办法,终于成功了!最后本人选择Parser. 1.Taro组件rich-text 优点:使用极其方便,引用一下就行了. 缺点:不支持视频,放弃! 2.wxPar ...
uniapp怎么解析html字符串,uniapp富文本解析插件的详细使用教程
如果你作为文章资源类或者博客类的小程序你就会发现,很多时候你的文章数据都是html格式或md格式,这样如果不经过处理,会非常难看,所以富文本解析就显得格外重要了,今天给大家写一个uniapp怎么使用富 ...
【uni-app】uParse 富文本解析插件遇到长图、大图宽高比异常问题
前言本文是[uni-app]rich-text 无法处理 video 的解决办法续集. 用 uParse 富文本解析插件后,一切正常.今天同事突然发了个长图(800px*15150px).发现版式异 ...

微信小程序 html插件,微信小程序使用wxParse插件读取富文本,解析html标记

微信小程序 html插件,微信小程序使用wxParse插件读取富文本,解析html标记相关推荐

最新文章

热门文章