微信小程序使用wxParse解析html的方法示例


Posted in Javascript onJanuary 17, 2019

本文实例讲述了微信小程序使用wxParse解析html的方法。分享给大家供大家参考,具体如下:

首先去 https://github.com/icindy/wxParse 下载wxParse,只拷贝wxParse文件夹即可。

或者点击此处本站下载

一、首先将插件文件夹复制到项目里面

微信小程序使用wxParse解析html的方法示例

二、导入文件

首先在xx.wxml导入文件,在文件头写上:

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

然后再wxss导入文件,在文件头写上:

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

三、在页面xx.js里的onLoad()方法里面写上:

var WxParse = require('../../wxParse/wxParse.js');
WxParse.wxParse('content', 'html', content, that,5)

此方法的含义为:

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);

四、模板引用:

//这里data中content为bindName
<template is="wxParse" data="{{wxParseData:content.nodes}}"/>
代码示例:
var list = "<div>55555555555555555</div>"
var that=this
that.setData({
content: WxParse.wxParse('content', 'html', list, that, 5)
})
that.setData({
title: list[0].ari_name,
// content: list[0].art_details,
content: WxParse.wxParse('content', 'html', list[0].art_details, that, 5)
})

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 #Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 #Javascript
如何能分清npm cnpm npx nvm
Jan 17 #Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 #Javascript
npm 常用命令详解(小结)
Jan 17 #Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 #Javascript
vuex页面刷新后数据丢失的方法
Jan 17 #Javascript
You might like
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
django正续或者倒序查库实例
2020/05/19 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
自我鉴定模板
2013/10/29 职场文书
合作协议书模板2014
2014/09/26 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
职工培训工作总结
2015/08/10 职场文书
Redis实现分布式锁的五种方法详解
2022/06/14 Redis
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers