微信小程序解析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; } }); },