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

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

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

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

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

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

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

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

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

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

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

下面簡(jiǎn)單介紹一下filter~

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

數(shù)組對(duì)象(arry)

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

具體用法： arry.filter();

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

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

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

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

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

更多詳情： filter文檔

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

    閱讀

在 dairy.js 中，因?yàn)轫?yè)面每次都是隨機(jī)顯示一篇文章，這時(shí)就需要獲取該文章的id，并作為參數(shù)，當(dāng)頁(yè)面跳轉(zhuǎn)時(shí)作為一個(gè)鉤子把兩個(gè)頁(yè)面聯(lián)系起來(lái)。

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

當(dāng)頁(yè)面跳轉(zhuǎn)到詳情頁(yè)時(shí)，在 detail.js 中使用 filter 把 acticle_id 等于上一頁(yè)面文章 id 的數(shù)據(jù)賦值給 datas，再對(duì)其進(jìn)行操作，就實(shí)現(xiàn)了數(shù)據(jù)的動(dòng)態(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等于上一頁(yè)面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 中對(duì)傳入的 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]. 來(lái)調(diào)用，而不是 item.來(lái)調(diào)用，這是數(shù)據(jù)索引的問題。如下圖所示，我的數(shù)據(jù)是個(gè)三級(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é)一下~

這個(gè)公眾號(hào)一大亮點(diǎn)就是可以隨機(jī)顯示文章，每次點(diǎn)進(jìn)去的文章都不一樣，感受度極佳。這里采用隨機(jī)函數(shù)來(lái)獲取數(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作為閱讀詳情頁(yè)的一個(gè)鉤子
            id: arr[index].acticle_id
          })
        }
      })
  },
})

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

//監(jiān)聽頁(yè)面顯示
  // 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;
        }
  },

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

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

使用swiper組件實(shí)現(xiàn)對(duì)頁(yè)面的左右滑動(dòng)的效果。

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

template 模板的定義：

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

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

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

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

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

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

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

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

github項(xiàng)目地址

掘金

WeChat： c1621810784

郵箱：[email protected]