微信小程序使用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 load Page,load css,load js实现代码
Mar 31 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
小程序实现发表评论功能
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/07/17 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
js 字符串操作函数
2009/07/25 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
python中reload(module)的用法示例详解
2017/09/15 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
python 8种必备的gui库
2020/08/27 Python
冬季安全检查方案
2014/05/23 职场文书
警察群众路线整改措施
2014/09/26 职场文书
看雷锋电影观后感
2015/06/10 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
2019年工作总结范文
2019/05/21 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
python如何在word中存储本地图片
2021/04/07 Python
redis缓存存储Session原理机制
2021/11/20 Redis
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电