首页 技术 正文
技术 2022年11月20日
0 收藏 305 点赞 3,550 浏览 2145 个字

  近期,开发小程序时,遇到后台给我返回了一串html代码,需要我这边来解析,头疼了好久,网上找资料找了变天,终于找到wxParse,然而看到的都是针对于页面中有单个html或者固定数据的,我现在的问题是,后台给我返回许多条数据,每一条数据中都有一串html代码需要解析。

  说到这儿,就先来说说wxParse的基本用法吧。

  首先引入必要的文件。

  (1)、在需要用到wxParse的js文件中引入wxParse.js文件、 

let wxParse = require("../../wxParse/wxParse.js");

  

  (2)、在.wxss文件中引入wxParse.wxss文件。

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

  假如现在有这样一个例子,const article = ‘<span align=”center”>抢<font color=”red”>7</font>元券后,入耳式耳机只要<font color=”red”>5.6</font>元!!安卓手机都通用的~</span>’

  那么在相应的js文件中就可以这样写

wxParse.wxParse('article', 'html', atricle, this,0)

  (3)、还没完,还得在相应的.wxml文件中引入wxParse.wxml模板文件。用法如下:

<import src="../../wxParse/wxParse.wxml"></import>// 在需要用到富文本解析的地方使用如下,此处data中的article为绑定的数据名
<template is="wxParse" data="{{wxParseData:article.nodes}}"></template>

  此处盗用一张图。

    小程序解析html之富文本插件wxParse

  现在,回到博文开头说的问题,如何解析多条html代码,这时候可能需要用到wxParse插件中的另一个文件,即html2json.js文件。

  将上面的第一步换成如下:

let wxParse = require("../../wxParse/html2json.js");

  例如现在有这样一组数据:

     let goods_list = [
{
"reward_price": 0.35,
     "self_reward_price": 0.52,
     "dto_desc": "我来推荐",
     "mall_des": "<p>进店铺领<font color=\"red\">5</font>元,无门槛</p>"
}, {
"reward_price": 0.35,
     "self_reward_price": 0.52,
     "dto_desc": "我来推荐",
     "mall_des": "<p>进店铺领<font color=\"red\">5</font>元,无门槛</p>"
}, {
"reward_price": 0.35,
     "self_reward_price": 0.52,
     "dto_desc": "我来推荐",
     "mall_des": "<p>进店铺领<font color=\"red\">5</font>元,无门槛</p>"
}
]

  这里我的做法是,先初始化一个空数组arr,用来存放后面需要解析的富文本。具体做法是:

let malldes_list = []
let curPage = this.data.pageNum - 1 // pageNum表示当前页码,从1开始。每次获取完数据不要忘了将pageNum + 1
goods_list.forEach(function (item, index) {
malldes_list[index] = wxParse.html2json(item.mall_des, 'returnData')
})this.setData({
['mallDesList[' + curPage + ']']: malldes_list,
  ['productList[' + curPage + ']']: goods_list,
  pageNum: this.data.pageNum + 1
})

  现在上面的第3条就可以这样来写:

// 列表页也涉及到分页,使用的二维数组。所以需要使用wx:for嵌套,在需要用到富文本解析的地方用上template模板。
<block wx:for="{{productList}}" wx:for-item="arrItem" wx:for-index="arrIndex" wx:key="arrIndex">
<block wx:for="{{arrItem}}" wx:for-item="item" wx:for-index="index" wx:key="item.goods_id">
<template is="wxParse" data="{{wxParseData:mallDesList[arrIndex][index].nodes}}"></template>
</block>
</block>

  啰嗦了半天,搞定了。

  最后,发下我的wxParse包含了那些文件:

    小程序解析html之富文本插件wxParse

  附上官网:https://github.com/icindy/wxParse

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,022
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,513
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,359
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,142
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,773
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,851