在微信小程序的开发过程中，当你想要实现不同页面间的数据绑定，却为此抓耳饶腮时，不妨让微信小程序与filter 来一场完美的邂逅，相信会给你带来别样的惊喜~

前段时间被安利了一个很实用的公众号—前端早读课，它简洁、大方的页面和方便、实用的功能深深地吸引着我~(＾Ｕ＾)ノ 恰好这段时间学了小程序，就自己仿着写了个前端早读课的小程序。

实现的功能

不同页面间的数据绑定

随机显示数组里的元素

实时显示系统的日期

鼠标点击和页面跳转等基本功能

swiper组件和template样式模板的使用

使用easy mock模拟后台数据并进行动态传参

项目展示

整个项目包括“每日一看”、“看看世界”、“情报局”和“介绍”四个主页面。

完美邂逅~

在开发“每日一看”页面的过程中，我遇到了一个难题，如何将“每日一看”页面中获取的数据与阅读详情页的数据绑定起来，也就是从这时起，微信小程序开始邂逅filter~

下面简单介绍一下filter~

filter华丽登场~

filter 是一个基于数组的方法，通过一个回调函数对数组进行筛选，并返回数组中满足条件的元素，相当于过滤器的效果。

filter的三要素

数组对象(arry)

每个filter 方法都有一个数组对象，通过该方法对数组里的元素进行筛选。

具体用法： arry.filter();

回调函数(callbackfn)

对于数组中的每个元素，filter 方法都会调用callbackfn 函数一次。

具体用法： function callbackfn(value, index, array);

其中 value 表示数组元素的值，index 表示数组元素的下标， array 表示包含该元素的数组。

返回值

filter 方法的返回值是一个数组，包含所有满足回调函数条件的值。

别样的惊喜~

filter的骚操作—实现数据的动态绑定

敲黑板的重点来啦！！！

在 dairy.wxml 页面中用 navigator 组件实现 ‘每日一看’ 页面和 ‘阅读详情’ 页的跳转，并传递一个 id 参数，每篇文章都有唯一的一个 id，这样就可以通过 js 使用 filter 过滤器筛选出两个 id 相等的文章数据，也就实现了数据的动态绑定。

阅读

在 dairy.js 中，因为页面每次都是随机显示一篇文章，这时就需要获取该文章的id，并作为参数，当页面跳转时作为一个钩子把两个页面联系起来。

that.setData({

headline: arr[index].headline,

from: arr[index].from,

// 设置id作为阅读详情页的一个钩子

id: arr[index].acticle_id

})

}

})

当页面跳转到详情页时，在 detail.js 中使用 filter 把 acticle_id 等于上一页面文章 id 的数据赋值给 datas，再对其进行操作，就实现了数据的动态绑定。

Page({

data: {

// 表示该篇文章

item: []

},

onLoad: function(params) {

// 检验id是否传递成功

console.log(params.id);

var that = this;

wx.request({

url: 'https://www.easy- mock.com/mock/5a2b5f76158e7b70032804d0/getActicleInfo/getActicleInfo',

success: function(res) {

// 使用过滤器把id等于上一页面id的数组赋值给datas

var datas = res.data.data.acticle_List.filter(item => {

return item.acticle_id == params.id;

});

that.setData({

item: datas

});

console.log(datas);

}

})

}

})

在 detail.wxml 中对传入的 item 数据进行调用，于是别样的惊喜就出现啦~

{{item[0].headline}}

作者：@{{item[0].author}}

{{item[0].content}}

特别注意： 可能有细心的人儿已经发现为什么这里用的是 item[0]. 来调用，而不是 item.来调用，这是数据索引的问题。如下图所示，我的数据是个三级结构，item 表示的是最外层的文章数组元素，要获取文章的作者或标题等信息，必须使用 item[0]. 才能进行调用。只有理解数据索引的本质，才能准确地调用数据。

于是，小程序在遇上filter后，就创造出了别样的惊喜 O(∩_∩)O~

一起排坑~

在开发过程中，遇到了一些坑，在此总结一下~

1. 随机显示数组里的元素

这个公众号一大亮点就是可以随机显示文章，每次点进去的文章都不一样，感受度极佳。这里采用随机函数来获取数组的下标，Math.random()函数是获取[0,1)之间的数，Math.floor()函数是向下取整，这样就可以随机获取相应的下标数。

onLoad: function () {

var that = this;

wx.request({

url: 'https://www.easy-mock.com/mock/5a2b5f76158e7b70032804d0/getActicleInfo/getActicleInfo',

method: 'GET',

data: {},

success: function(res) {

//获取文章数据的列表

var arr = res.data.data.acticle_List;

//用随机函数随机获取数组的下标

var index = Math.floor(Math.random()*arr.length);

// console.log(arr[index].acticle_id);

that.setData({

headline: arr[index].headline,

from: arr[index].from,

// 设置id作为阅读详情页的一个钩子

id: arr[index].acticle_id

})

}

})

},

})

2. 实时显示系统的日期

之前开发的时候觉得这个方法如果自己写还蛮难的，后面百度了一下，发现js里面提供了相应的API，直接使用就好，特别方便。有关系统时间的API

//监听页面显示

// day：星期几

// date：某日

// month：月份

onShow: function () {

var myDate = new Date();

// setData设置或更新数据

this.setData({

date: myDate.getDate(),

month: myDate.getMonth() + 1,

day: week(),

});

function week(day) {

switch(myDate.getDay()) {

case 1: day="星期一"; break;

case 2: day="星期二"; break;

case 3: day="星期三"; break;

case 4: day="星期四"; break;

case 5: day="星期五"; break;

case 6: day="星期六"; break;

default: day="星期天";

}

return day;

}

},

3. 用hover实现鼠标点击效果

在对首页进行鼠标点击效果的开发过程中，一开始想到的就是使用伪元素来添加点击按钮的样式效果，后面出现了一个bug，当我点击按钮跳转到另一个页面，再回退到原页面时，还是处于点击态的样式，这时百度就起了很大的作用，我上网百度了很久，才发现有hover属性中的hover-stay-time为动画持续的时间，hover-class 为定义点击按钮时的样式，于是这个bug就解决啦~

每日一看

看看世界

情报局

简介

4. 页面左右滑动的效果

使用swiper组件实现对页面的左右滑动的效果。

5. template 模板样式的使用

当一串代码面临复制粘贴时，这时就应该考虑对其进行封装，这样直接在不同的地方调用就好了，也完成了代码的优化。小程序中的 template 模板就很好地帮我们解决了这个问题，并通过 is 属性来实现调用。

template 模板的定义：

{{author}}分享于

{{share_time}}

{{content}}

template 模板的调用：

我有话要说~

开发的过程中难免会出现各种各样的bug，记得一定要百度，百度，百度呀！！！这是个独立思考的过程，对能力的提高也非常有帮助~做这个项目最大的心得便是看太多不如干一场，肯定会干货满满，收获满满哟~

这个小程序后续还会完善，感兴趣的可以持续关注哟(＾Ｕ＾)ノ~

一波安利~

最后，欢迎大家一起交流学习ヾ(◍°∇°◍)ﾉﾞ

WeChat： c1621810784

邮箱：1621810784@qq.com