微信小程序解析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切换

<view class='tab'>
    <view class="tab-item  
    {{currentTopItem===index?'active':''}}" 
    wx:for="{{topTabItems}}" wx:key="index" 
    data-index="{{index}}"
    bindtap='switchTab'>
     {{item}}
    view>
view>

使用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.filter方法

 // 偶数
  even:function(arr){
    return arr.filter((val, index) => {
      if (index % 2 === 0) {
        return true;
      }
    });
  },