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

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

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

不同頁面間的數(shù)據(jù)綁定

隨機(jī)顯示數(shù)組里的元素

實(shí)時顯示系統(tǒng)的日期

鼠標(biāo)點(diǎn)擊和頁面跳轉(zhuǎn)等基本功能

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

使用easy mock模擬后臺數(shù)據(jù)并進(jìn)行動態(tài)傳參

整個項(xiàng)目包括“每日一看”、“看看世界”、“情報(bào)局”和“介紹”四個主頁面。

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

下面簡單介紹一下filter~

filter 是一個基于數(shù)組的方法，通過一個回調(diào)函數(shù)對數(shù)組進(jìn)行篩選，并返回?cái)?shù)組中滿足條件的元素，相當(dāng)于過濾器的效果。

數(shù)組對象(arry)

每個filter 方法都有一個數(shù)組對象，通過該方法對數(shù)組里的元素進(jìn)行篩選。

具體用法： arry.filter();

回調(diào)函數(shù)(callbackfn)

對于數(shù)組中的每個元素，filter 方法都會調(diào)用callbackfn 函數(shù)一次。

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

其中 value 表示數(shù)組元素的值，index 表示數(shù)組元素的下標(biāo)， array 表示包含該元素的數(shù)組。

返回值
filter 方法的返回值是一個數(shù)組，包含所有滿足回調(diào)函數(shù)條件的值。

更多詳情： filter文檔

在 dairy.wxml 頁面中用 navigator 組件實(shí)現(xiàn) ‘每日一看’ 頁面和 ‘閱讀詳情’ 頁的跳轉(zhuǎn)，并傳遞一個 id 參數(shù)，每篇文章都有唯一的一個 id，這樣就可以通過 js 使用 filter 過濾器篩選出兩個 id 相等的文章數(shù)據(jù)，也就實(shí)現(xiàn)了數(shù)據(jù)的動態(tài)綁定。

    閱讀

在 dairy.js 中，因?yàn)轫撁婷看味际请S機(jī)顯示一篇文章，這時就需要獲取該文章的id，并作為參數(shù)，當(dāng)頁面跳轉(zhuǎn)時作為一個鉤子把兩個頁面聯(lián)系起來。

that.setData({
        headline: arr[index].headline,
        from: arr[index].from,
        // 設(shè)置id作為閱讀詳情頁的一個鉤子
        id: arr[index].acticle_id
      })
    }
})

當(dāng)頁面跳轉(zhuǎn)到詳情頁時，在 detail.js 中使用 filter 把 acticle_id 等于上一頁面文章 id 的數(shù)據(jù)賦值給 datas，再對其進(jìn)行操作，就實(shí)現(xiàn)了數(shù)據(jù)的動態(tài)綁定。

 Page({
  data: {
    // 表示該篇文章
    item: []
  },
  onLoad: function(params) {
    // 檢驗(yàn)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的數(shù)組賦值給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 數(shù)據(jù)進(jìn)行調(diào)用，于是別樣的驚喜就出現(xiàn)啦~

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


    {{item[0].content}}

特別注意： 可能有細(xì)心的人兒已經(jīng)發(fā)現(xiàn)為什么這里用的是 item[0]. 來調(diào)用，而不是 item.來調(diào)用，這是數(shù)據(jù)索引的問題。如下圖所示，我的數(shù)據(jù)是個三級結(jié)構(gòu)，item 表示的是最外層的文章數(shù)組元素，要獲取文章的作者或標(biāo)題等信息，必須使用 item[0]. 才能進(jìn)行調(diào)用。只有理解數(shù)據(jù)索引的本質(zhì)，才能準(zhǔn)確地調(diào)用數(shù)據(jù)。

于是，小程序在遇上filter后，就創(chuàng)造出了別樣的驚喜 O(∩_∩)O~

在開發(fā)過程中，遇到了一些坑，在此總結(jié)一下~

這個公眾號一大亮點(diǎn)就是可以隨機(jī)顯示文章，每次點(diǎn)進(jìn)去的文章都不一樣，感受度極佳。這里采用隨機(jī)函數(shù)來獲取數(shù)組的下標(biāo)，Math.random()函數(shù)是獲取[0,1)之間的數(shù)，Math.floor()函數(shù)是向下取整，這樣就可以隨機(jī)獲取相應(yīng)的下標(biāo)數(shù)。

 onLoad: function () {
    var that = this;
      wx.request({
        url: "https://www.easy-mock.com/mock/5a2b5f76158e7b70032804d0/getActicleInfo/getActicleInfo",
        method: "GET",
        data: {},
        success: function(res) {
          //獲取文章數(shù)據(jù)的列表
          var arr = res.data.data.acticle_List;
          //用隨機(jī)函數(shù)隨機(jī)獲取數(shù)組的下標(biāo)
          var index = Math.floor(Math.random()*arr.length);
          // console.log(arr[index].acticle_id);
          that.setData({
            headline: arr[index].headline,
            from: arr[index].from,
            // 設(shè)置id作為閱讀詳情頁的一個鉤子
            id: arr[index].acticle_id
          })
        }
      })
  },
})

之前開發(fā)的時候覺得這個方法如果自己寫還蠻難的，后面百度了一下，發(fā)現(xiàn)js里面提供了相應(yīng)的API，直接使用就好，特別方便。有關(guān)系統(tǒng)時間的API

//監(jiān)聽頁面顯示
  // day：星期幾
  // date：某日
  // month：月份
  onShow: function () {
      var myDate = new Date();
      // setData設(shè)置或更新數(shù)據(jù)
      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;
        }
  },

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

    
      每日一看
      看看世界
      情報(bào)局
      簡介
    
  

使用swiper組件實(shí)現(xiàn)對頁面的左右滑動的效果。

當(dāng)一串代碼面臨復(fù)制粘貼時，這時就應(yīng)該考慮對其進(jìn)行封裝，這樣直接在不同的地方調(diào)用就好了，也完成了代碼的優(yōu)化。小程序中的 template 模板就很好地幫我們解決了這個問題，并通過 is 屬性來實(shí)現(xiàn)調(diào)用。

template 模板的定義：

template 模板的調(diào)用：

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

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

微信小程序開發(fā)教程手冊

微信小程序官方開發(fā)文檔

使用 Easy Mock 構(gòu)造后臺虛擬數(shù)據(jù)

使用微信開發(fā)者工具進(jìn)行開發(fā)

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

github項(xiàng)目地址

掘金

WeChat： c1621810784

郵箱：1621810784@qq.com