微信小程序解析html

xiaoxiao2021-02-28  8

自己想做一个日语学习的微信小程序,过程中抓取别人数据接口的时候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; } }); },
转载请注明原文地址: https://www.6miu.com/read-1750365.html

最新回复(0)