當微信小程序趕上filter~

時間 2019-11-10

標籤微信程序趕上 filter 简体版

原文原文鏈接

在微信小程序的開發過程當中，當你想要實現不一樣頁面間的數據綁定，卻爲此抓耳饒腮時，不妨讓微信小程序與filter 來一場完美的邂逅，相信會給你帶來別樣的驚喜~html

前段時間被安利了一個很實用的公衆號—前端早讀課，它簡潔、大方的頁面和方便、實用的功能深深地吸引着我~(＾Ｕ＾)ノ剛好這段時間學了小程序，就本身仿着寫了個前端早讀課的小程序。前端

實現的功能

不一樣頁面間的數據綁定
隨機顯示數組裏的元素
實時顯示系統的日期
鼠標點擊和頁面跳轉等基本功能
swiper組件和template樣式模板的使用
使用easy mock模擬後臺數據並進行動態傳參

項目展現

整個項目包括「每日一看」、「看看世界」、「情報局」和「介紹」四個主頁面。git

完美邂逅~

在開發「每日一看」頁面的過程當中，我遇到了一個難題，如何將「每日一看」頁面中獲取的數據與閱讀詳情頁的數據綁定起來，也就是從這時起，微信小程序開始邂逅filter~github

下面簡單介紹一下filter~小程序

filter華麗登場~

filter 是一個基於數組的方法，經過一個回調函數對數組進行篩選，並返回數組中知足條件的元素，至關於過濾器的效果。微信小程序

filter的三要素

數組對象(arry)數組

每一個filter 方法都有一個數組對象，經過該方法對數組裏的元素進行篩選。微信
```
具體用法： arry.filter();
```
回調函數(callbackfn)微信開發

對於數組中的每一個元素，filter 方法都會調用callbackfn 函數一次。app
```
具體用法： function callbackfn(value, index, array);
```
其中 value 表示數組元素的值，index 表示數組元素的下標， array 表示包含該元素的數組。
返回值
filter 方法的返回值是一個數組，包含全部知足回調函數條件的值。

更多詳情： filter文檔

別樣的驚喜~

filter的騷操做—實現數據的動態綁定

敲黑板的重點來啦！！！

在 dairy.wxml 頁面中用 navigator 組件實現 ‘每日一看’ 頁面和 ‘閱讀詳情’ 頁的跳轉，並傳遞一個 id 參數，每篇文章都有惟一的一個 id，這樣就能夠經過 js 使用 filter 過濾器篩選出兩個 id 相等的文章數據，也就實現了數據的動態綁定。
```
<navigator url="./detail/detail?id={{id}}">
    <button class="page_bd_motto_read">閱讀</button>
</navigator>
```

在 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 數據進行調用，因而別樣的驚喜就出現啦~

<!--pages/dairy/detail/detail.wxml-->
<view class="page__hd">
    <view class="page__hd_title center">{{item[0].headline}}</view>
    <view class="page__hd_author">做者：@{{item[0].author}}</view>
</view>
<view class="page__bd">
    <text class="page__bd_content center">{{item[0].content}}</text>
</view>

特別注意： 可能有細心的人兒已經發現爲何這裏用的是 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就解決啦~

<view class="page__bd">
    <view class="page__bd_tab" hover-class="active" hover-stay-time="2000">
      <view class="page__bd_tab_item" hover-class="active1" hover-stay-time="2000" bindtap="dairyRead">每日一看</view>
      <view class="page__bd_tab_item" hover-class="active1" hover-stay-time="2000" bindtap="lookWorld">看看世界</view>
      <view class="page__bd_tab_item" hover-class="active1" hover-stay-time="2000" bindtap="intelligence">情報局</view>
      <view class="page__bd_tab_item" hover-class="active1" hover-stay-time="2000" bindtap="introduction">簡介</view>
    </view>
  </view>

4. 頁面左右滑動的效果

使用swiper組件實現對頁面的左右滑動的效果。

5. template 模板樣式的使用

當一串代碼面臨複製粘貼時，這時就應該考慮對其進行封裝，這樣直接在不一樣的地方調用就行了，也完成了代碼的優化。小程序中的 template 模板就很好地幫咱們解決了這個問題，並經過 is 屬性來實現調用。

template 模板的定義：

<!--pages/common/list_intelligence/list_intelligence.wxml-->
<template name = "intelligence_list">
 <view class="page__cell">
    <view class="page__cell_headline center">
        <view class="page__cell_headline_img">
            <image src="{{avatar}}"/>
        </view>

        <view class="page__cell_headline_author">{{author}}分享於</view>
        <view class="page__cell_headline_time">{{share_time}}</view>
   </view>
    <view class="page__cell_detail center">{{content}}</view>
 </view>
</template>

template 模板的調用：

<view class="page__bd">
    <block wx:for="{{intelligence_list}}" wx:key="{{index}}" center >
        <template is="intelligence_list" data="{{...item}}"></template>
    </block>
</view>