微信小程序使用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 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
php阳历转农历优化版
2016/08/08 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
js date 格式化
2017/02/15 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
python编程嵌套函数实例代码
2018/02/11 Python
Python中单例模式总结
2018/02/20 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
岗位竞聘书范文
2014/03/31 职场文书
2014年党务公开方案
2014/05/08 职场文书
赔偿协议书
2015/01/27 职场文书
公司停电通知
2015/04/15 职场文书
于丹论语心得观后感
2015/06/15 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
二十年同学聚会感言
2015/07/30 职场文书
中秋晚会致辞
2015/07/31 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS