微信小程序使用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 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
瀑布流布局代码一例
Apr 11 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
浅析Ajax语法
Dec 05 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
详解vue中组件参数
Jul 09 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 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英文字符串截取代码分享
2014/07/15 PHP
php验证session无效的解决方法
2014/11/04 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
JS 有名函数表达式全面解析
2010/03/19 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
Python3 入门教程 简单但比较不错
2009/11/29 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
详解python中@的用法
2019/03/27 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
《一个小村庄的故事》教学反思
2014/04/13 职场文书
论文指导教师评语
2014/04/28 职场文书
企业活动策划方案
2014/06/02 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
原生JS实现飞机大战小游戏
2021/06/09 Javascript
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS