微信小程序使用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实现Sleep暂停功能代码
Sep 03 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
Jquery 扩展方法
2010/05/06 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
关于redux-saga中take使用方法详解
2018/02/27 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
python实现爬取千万淘宝商品的方法
2015/06/30 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
法国珠宝店:CLEOR
2017/01/29 全球购物
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
2014迎新年晚会策划方案
2014/02/23 职场文书
检讨书模板大全
2015/05/07 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
详解php中流行的rpc框架
2021/05/29 PHP
delete in子查询不走索引问题分析
2022/07/07 MySQL