微信小程序使用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 html 静态页面传参数
Apr 10 Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 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数组操作
2011/12/30 PHP
php文件缓存类汇总
2014/11/21 PHP
微信API接口大全
2015/04/15 PHP
PHP的几个常用加密函数
2016/02/03 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
python数据结构之列表和元组的详解
2017/09/23 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
2014年科研工作总结
2014/12/03 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书