摘要：具體用法其中表示數組元素的值，表示數組元素的下標，表示包含該元素的數組。這里采用隨機函數來獲取數組的下標，函數是獲取之間的數，函數是向下取整，這樣就可以隨機獲取相應的下標數。小程序中的模板就很好地幫我們解決了這個問題，并通過屬性來實現調用。

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

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

不同頁面間的數據綁定

隨機顯示數組里的元素

實時顯示系統的日期

鼠標點擊和頁面跳轉等基本功能

swiper組件和template樣式模板的使用

使用easy mock模擬后臺數據并進行動態傳參

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

在開發“每日一看”頁面的過程中，我遇到了一個難題，如何將“每日一看”頁面中獲取的數據與閱讀詳情頁的數據綁定起來，也就是從這時起，微信小程序開始邂逅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~

在開發過程中，遇到了一些坑，在此總結一下~

這個公眾號一大亮點就是可以隨機顯示文章，每次點進去的文章都不一樣，感受度極佳。這里采用隨機函數來獲取數組的下標，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
          })
        }
      })
  },
})

之前開發的時候覺得這個方法如果自己寫還蠻難的，后面百度了一下，發現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;
        }
  },

在對首頁進行鼠標點擊效果的開發過程中，一開始想到的就是使用偽元素來添加點擊按鈕的樣式效果，后面出現了一個bug，當我點擊按鈕跳轉到另一個頁面，再回退到原頁面時，還是處于點擊態的樣式，這時百度就起了很大的作用，我上網百度了很久，才發現有hover屬性中的hover-stay-time為動畫持續的時間，hover-class 為定義點擊按鈕時的樣式，于是這個bug就解決啦~

    
      每日一看
      看看世界
      情報局
      簡介
    
  

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

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

template 模板的定義：

template 模板的調用：

開發的過程中難免會出現各種各樣的bug，記得一定要百度，百度，百度呀！！！這是個獨立思考的過程，對能力的提高也非常有幫助~做這個項目最大的心得便是看太多不如干一場，肯定會干貨滿滿，收獲滿滿喲~

這個小程序后續還會完善，感興趣的可以持續關注喲(＾Ｕ＾)ノ~

微信小程序開發教程手冊

微信小程序官方開發文檔

使用 Easy Mock 構造后臺虛擬數據

使用微信開發者工具進行開發

最后，歡迎大家一起交流學習ヾ(?°?°?)??

github項目地址

掘金

WeChat： c1621810784

郵箱：1621810784@qq.com