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


Posted in Javascript onJuly 06, 2018

前言

最近在做一个微信小程序项,遇到了文章的详情页面是富文本的情况,内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现。下面话不多说了,来一起看看详细的介绍吧

wxParse官方下载地址:https://github.com/icindy/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);

四,在页面中引用模板

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

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
小程序实现发表评论功能
Jul 06 #Javascript
vue中倒计时组件的实例代码
Jul 06 #Javascript
微信小程序websocket实现聊天功能
Mar 30 #Javascript
vue中锚点的三种方法
Jul 06 #Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 #Javascript
详解Angular如何正确的操作DOM
Jul 06 #Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 #Javascript
You might like
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
Python输出9*9乘法表的方法
2015/05/25 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
ipad上运行python的方法步骤
2019/10/12 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
python如何获取apk的packagename和activity
2020/01/10 Python
python第三方库学习笔记
2020/02/07 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
自我鉴定的范文
2013/10/03 职场文书
车间操作工岗位职责
2013/12/19 职场文书
高中军训感言800字
2014/03/05 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
幸福中国演讲稿
2014/09/12 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
医生见习报告范文
2014/11/03 职场文书
论群众路线学习笔记
2014/11/06 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
2015年社区工作总结
2015/04/08 职场文书
社区敬老月活动总结
2015/05/07 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
详解jQuery的核心函数和事件处理
2022/02/18 jQuery
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL