微信小程序使用wxParse解析html的实现示例


Posted in Javascript onAugust 30, 2018

最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现。

首先我们在github上下载wxParse

https://github.com/icindy/wxParse

微信小程序使用wxParse解析html的实现示例

下载完之后我们需要用到目录下的wxParse文件夹,把他拷贝到我们的项目目录下

下面是具体的使用步骤

1.在app.wxss全局样式文件中,需要引入wxParse的样式表

@import "/page/wxParse/wxParse.wxss";

2.在需要加载html内容的页面对应的js文件里引入wxParse

var WxParse = require('../../wxParse/wxParse.js');

3.通过调用WxParse.wxParse方法来设置html内容

/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/

Page({
 data: {
 },
 onLoad: function () {
  var that = this;
  wx.request({
    url: '', 
    method: 'POST',
    data: {
      'id':13
    },
    header: {
      'content-type': 'application/json'
    },
    success: function(res) {
      var article = res.data[0].post;
      WxParse.wxParse('article', 'html', article, that,5);
    }
  })
 }
})

4.在页面中引用模板

<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

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

微信小程序使用wxParse解析html的实现示例

wxParse多数据循环使用方法

方法介绍

/**
* WxParse.wxParseTemArray(temArrayName,bindNameReg,total,that)
* 1.temArrayName: 为你调用时的数组名称
* 3.bindNameReg为循环的共同体 如绑定为reply1,reply2...则bindNameReg = 'reply'
* 3.total为reply的个数
*/
var that = this;
WxParse.wxParseTemArray("replyTemArray",'reply', replyArr.length, that)

使用方式

循环绑定数据

var replyHtml0 = `<div style="margin-top:10px;height:50px;"><p class="reply"> wxParse回复0:不错,喜欢[03][04] </p> </div>`; 
var replyHtml1 = `<div style="margin-top:10px;height:50px;"> <p class="reply"> wxParse回复1:不错,喜欢[03][04] </p> </div>`; 
var replyHtml2 = `<div style="margin-top:10px;height:50px;"> <p class="reply"> wxParse回复2:不错,喜欢[05][07] </p> </div>`; 
var replyHtml3 = `<div style="margin-top:10px;height:50px;"> <p class="reply"> wxParse回复3:不错,喜欢[06][08] </p> </div>`; 
var replyHtml4 = `<div style="margin-top:10px; height:50px;"> <p class="reply"> wxParse回复4:不错,喜欢[09][08] </p> </div>`; 
var replyHtml5 = `<div style="margin-top:10px;height:50px;"> <p class="reply"> wxParse回复5:不错,喜欢[07][08] </p> </div>`; 

var replyArr = []; 
replyArr.push(replyHtml0); 
replyArr.push(replyHtml1); 
replyArr.push(replyHtml2); 
replyArr.push(replyHtml3); 
replyArr.push(replyHtml4); 
replyArr.push(replyHtml5); 
for (let i = 0; i < replyArr.length; i++) { 
  WxParse.wxParse('reply' + i, 'html', replyArr[i], that); 
  if (i === replyArr.length - 1) { 
    WxParse.wxParseTemArray("replyTemArray",'reply', replyArr.length, that) 
  } 
}

模版使用

<block wx:for="{{replyTemArray}}" wx:key="">
    回复{{index}}:<template is="wxParse" data="{{wxParseData:item}}"/>
  </block>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript去除空格的几种方法
Oct 03 Javascript
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
vue中rem的配置的方法示例
Aug 30 #Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 #Javascript
vue-swiper的使用教程
Aug 30 #Javascript
分享vue里swiper的一些坑
Aug 30 #Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 #Javascript
小程序图片长按识别功能的实现方法
Aug 30 #Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 #Javascript
You might like
php注入实例
2006/10/09 PHP
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
讲解Python中的标识运算符
2015/05/14 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Python双链表原理与实现方法详解
2020/02/22 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
Java面试题:为什么要用Java
2012/05/11 面试题
招商业务员岗位职责
2013/12/16 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
担保书格式
2015/01/20 职场文书
助学感谢信范文
2015/01/21 职场文书
专家推荐信怎么写
2015/03/25 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
2015年工程部工作总结
2015/04/30 职场文书
合同纠纷调解书
2015/05/20 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书