微信小程序使用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 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 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的FTP学习(二)
2006/10/09 PHP
php Undefined index的问题
2009/06/01 PHP
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
php计算title标题相似比的方法
2015/07/29 PHP
javascript 必知必会之closure
2009/09/21 Javascript
jquery 表单取值常用代码
2009/12/22 Javascript
js日历功能对象
2012/01/12 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
node.js实现上传文件功能
2019/07/15 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
利用python获取Ping结果示例代码
2017/07/06 Python
python中subprocess批量执行linux命令
2018/04/27 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
关于python字符串方法分类详解
2019/08/20 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
UNIX文件类型
2013/08/29 面试题
自荐信怎么写呢?
2013/12/09 职场文书
食品销售计划书
2014/04/26 职场文书
健康状况证明模板
2014/10/23 职场文书
消防安全培训工作总结
2015/10/23 职场文书
python实现简易名片管理系统
2021/04/11 Python