微信小程序使用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延时重复执行函数 lLoopRun.js
Jun 29 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
js中unicode转码方法详解
Oct 09 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 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提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
$.format,jquery.format 使用说明
2011/07/13 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
用Python进行基础的函数式编程的教程
2015/03/31 Python
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
Python Series从0开始索引的方法
2018/11/06 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
师范生实习自我鉴定
2013/11/01 职场文书
岗位职责范本
2013/11/23 职场文书
领导证婚人证婚词
2014/01/13 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
结婚老公保证书
2015/02/26 职场文书
黄河绝恋观后感
2015/06/08 职场文书
政协常委会议主持词
2015/07/03 职场文书
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android