當微信小程式遇上filter~

晚安喵發表於2017-12-28

微信小程式Filter

在微信小程式的開發過程中，當你想要實現不同頁面間的資料繫結，卻為此抓耳饒腮時，不妨讓微信小程式與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文件

別樣的驚喜~

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>
  
複製程式碼

我有話要說~

開發的過程中難免會出現各種各樣的bug，記得一定要百度，百度，百度呀！！！這是個獨立思考的過程，對能力的提高也非常有幫助~做這個專案最大的心得便是看太多不如干一場，肯定會幹貨滿滿，收穫滿滿喲~
這個小程式後續還會完善，感興趣的可以持續關注喲(＾Ｕ＾)ノ~

一波安利~

微信小程式開發教程手冊
微信小程式官方開發文件
使用 easy-mock 構造後臺虛擬資料
使用微信開發者工具進行開發

最後獻上 github地址裡面有原始碼，若是喜歡，希望大家給個star 鼓勵一下啦~ღ( ´･ᴗ･` )比心

當微信小程式遇上TensorFlow：小程式實現
2018-10-08
微信小程式
當微信小程式遇上TensorFlow：Server端實現
2019-03-02
微信小程式Server
當微信小程式遇上TensorFlow：Server端實現補充
2019-03-01
微信小程式Server
當微信小程式遇上TensorFlow：接收base64編碼影象資料
2018-10-16
微信小程式
微信遇上本地生活，小程式搭建吃喝玩樂平臺
2021-12-29
微信小程式使用filter過濾器幾種方式
2019-02-27
微信小程式Filter過濾器
微信小程式獲取當前位置
2019-01-28
微信小程式
當 Rust 遇上 Fedora
2021-09-09
Rust
當UIColor遇上Swift
2018-01-03
UISwift
當 React 遇上 KendoUI
2014-09-29
ReactUI
當UIColor遇上 Swift
2016-03-02
UISwift
當transition遇上display
2016-01-13
當 Go 遇上了 Lua
2019-03-12
Go
當 Go struct 遇上 Mutex
2021-04-21
GoStructMutex
當 bind 遇上 apply
2017-09-26
APP
老遊戲遇上新問題：當動森遇上詐騙
2020-04-10
遊戲
微信小程式
2024-10-31
微信小程式
當程式碼遇上詐騙，開發者該何去何從？
2024-08-20
微信小程式小技巧
2018-08-15
微信小程式
當Shell遇上了NodeJS
2019-03-03
NodeJS
當區塊鏈遇上保險
2018-08-07
區塊鏈
當go get遇上gitlab
2017-11-30
GoGitlab
當Python字串遇上MySQL
2017-12-21
Python字串MySql
當好萊塢遇上國產電影
2024-07-23
我的第一個微信小程式（Discuz!! + 微信小程式）
2018-02-01
微信小程式
我的第一個微信小程式（Discuz!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + 微信小程式）
2018-02-01
微信小程式
微信小程式（1）微信小程式TLS版本大於1.2
2018-03-28
微信小程式TLS
微信小程式小總結
2017-01-18
微信小程式
微信小程式路由
2020-06-24
微信小程式路由
當新零售遇上 Serverless
2021-08-09
Server
當12C PDB遇上JDBC
2016-11-03
JDBC
當 JS 遇上物聯網（IoT）
2017-09-09
JS
天生一對，當遊戲遇上MongoDB
2016-07-11
遊戲MongoDB
SOA Agents──當網格遇上SOA
2009-03-19
微信小程式微信支付流程
2017-05-26
微信小程式
微信小程式是什麼微信小程式有什麼用？
2016-09-22
微信小程式
當程式碼變更遇上精準測試的總結
2018-08-01
當程式設計師遇上極品客戶的時候
2018-06-11
程式設計師