用微信抓html格式的答案,微信小程序解析html

自己想做一个日语学习的微信小程序，过程中抓取别人数据接口的时候403 forbidden,由于网络安全的原因，最终也没有拿到详情页面数据，项目做了一半。

实现效果：

1、根据不同的分类，点击进入列表页时动态显示导航栏标题。

2、除了入门单元外，每个列表页又分为课文和单词两个tab切换模块(需要传递参数)

3、抓取的数据是html标签格式的数据，要进行数据解析

4、根据不同的分类，点击进入列表页时显示不同的数据(对获取的数据进行分类显示)。

数据格式：

知识点：

1、使用css3 transform将 ∟(直角符号)转为向右的箭头符号

2、在从首页进入列表页的时候，要携带参数

url="../list/list?type={{item.type}}&name={{item.name}}"

在列表页中的onLoad方法中接收参数，然后设置

that.setData({title:options.name});

// 动态修改导航栏标题

wx.etNavigationBarTitle({

title:that.data.title

});

3、tab切遇新是直朋能到换

wx:for="{{topTabItems}}" wx:key="index"

data-index="{{index}}"

bindtap='switchTab'>{{item}}

使用flex布局完成tab样式，选中时通过添加类名动态改变样式

给tab-item绑定switchTab事件，并传递参数index(data-index=”{{index}}”)

获取参数时通过

e.currentTarget.dataset.index(这里需要跟data-xxx中的xxx保持一致即可，自己可以随意命名)

switchTab:function(e){

this.setData({

currentTopItem: e.currentTarget.dataset.index

});

｝

4、解析html

使用了第三方插件：wxParse-微信小程序富文本解析自定义组件

github地址：https://github.com/icindy/wxParse

按照里面的基本使用效果，就能正确渲染出页面

5、对获取的数据进行分类显示

因为要对获取的数据进行分类显示，我在使用wxParse时并没有完全按照里面的写法使用里面的模版进行渲染数据，而是在本地修改了里面的方法，wxParse.js文件中的wxParse方法直接返回数据return transData;

对数组中的20条数据

如果title===’入门单元’，截取前三条返回

然后对剩余数据根据下标索引奇偶进行分类返回

tab为课文时返回偶数部分，为单词时返回奇数部分

if (that.data.title === '入门单元') {

// 数组截取

var result = transData.nodes.slice(0, 3);

} else {

// 数组截取

var all = transData.nodes.slice(3);

if (this.data.currentTopItem === 0) {

var result = this.even(all);

} else {

var result = this.odd(all);

}

｝

that.setData({ books: result, loading: false });

获取数组和第，。年过事工宗据指数遍互业经搞断果会中的偶数项使用的是arr.fil抖要支圈者器说是事天开的。年后编定功口小发还应久剑ter方法

// 偶数

even:function(arr){

return arr.filter((val, index) => {

if (index % 2 === 0) {

return true;

}

});

},

本文来源于网络：查看 >https://blog.csdn.net/u012086400/article/details/79065850