微信小程序使用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 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
微信小程序实现日历签到
Sep 21 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中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
简明json介绍
2008/09/28 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
使用angular写一个hello world
2015/01/23 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
师生聚会感言
2014/01/26 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
美术社团活动总结
2014/06/27 职场文书
小学社会实践活动总结
2014/07/03 职场文书
总经理检讨书
2014/09/15 职场文书
城南旧事观后感
2015/06/11 职场文书