微信小程式教學第三章第四節（含視訊）：小程式中級實戰教程：下拉更新、分享、閱讀標識

下拉更新、分享、閱讀標識

本文配套視訊地址： v.qq.com/x/page/h055…

開始前請把 ch3-4 分支中的 code/ 目錄匯入微信開發工具
這一篇中，我們把列表這塊的剩餘功能做完：下拉更新、分享、閱讀標識。

下拉更新功能

下拉更新這個功能與我們在第一章中寫的小 demo 所用方法一致：onReachBottom。

當使用者滾動過程中觸發了 上拉 這個動作時候，微信小程式會自動監聽到並執行 onReachBottom 這個函式，所以我們只需要把這個監聽事件寫好就行了：

修改 index.js，增加 onReachBottom 函式：

let handler = {
    // 此處省略部分程式碼

    /*
    * 每次觸發，我們都會先判斷是否還可以『載入更多』
    * 如果滿足條件，那說明可以請求下一頁列表資料，這時候把 data.page 累加 1
    * 然後呼叫公用的請求函式
    */
    onReachBottom () {
        if (this.data.hasMore) {
            let nextPage = this.data.page + 1;
            this.setData({
                page: nextPage
            });
            this.requestArticle();
        }
    },   
}
複製程式碼

分享功能

類似於 onReachBottom，分享功能也是微信自帶的一個監聽事件回撥函式 onShareAppMessage，它返回一個物件，物件中定義了分享的各種資訊及分享成功和分享失敗的回撥，具體細節可以檢視分享介面官方文件

修改 index.js，增加分享的回撥事件：

let handler = {
    // 此處省略部分程式碼

    /*
    * 分享
    */
    onShareAppMessage () {
        let title = config.defaultShareText || '';
        return {
            title: title,
            path: `/pages/index/index`,
            success: function(res) {
                // 轉發成功
            },
            fail: function(res) {
                // 轉發失敗
            }
        }
    },
}
複製程式碼

閱讀標識

如何實現閱讀標識呢？其實思路也簡單。如果使用者從列表中點選某篇文章閱讀，此篇文章肯定是需要標識的。所以我們只需要在跳轉到文章詳情之前，把此篇文章的 contentId 快取起來

修改 index.wxml，檢視中繫結點選事件 bindtap="showDetail"，同時增加三元判斷，如果文章已經閱讀過，我們給它增加一個 class="visited" 標識：

<view class="wrapper">
    <!--repeat-->
    <view wx:for="{{ articleList }}" wx:for-item="group" wx:key="{{ group.date }}" class="group">
        <view class="group-bar">
            <view class="group-title {{ group.formateDate === '今日' ? 'on' : ''}}">{{ group.formateDate }}</view>
        </view>
        <view class="group-content">
            <!--repeat-->
            <!-- 增加點選事件 bindtap="showDetail"  -->
            <view wx:for="{{ group.articles }}" wx:for-item="item" wx:key="{{ item.contentId }}" data-item="{{ item }}" bindtap="showDetail" class="group-content-item {{ item.hasVisited ? 'visited' : '' }}">
                <view class="group-content-item-desc ellipsis-multi-line ellipsis-line-3">{{ item.title }}</view>
                <image mode="aspectFill" class="group-content-item-img" src="{{ item.cover || defaultImg.coverImg }}" ></image>
            </view>
        </view>
    </view>

    <view hidden="{{ hasMore }}" class="no-more">暫時沒有更多內容</view>
</view>
複製程式碼

修改 index.js，增加點選事件的回撥函式 showDetail:

let handler = {
    // 此處省略部分程式碼

    /*
    * 通過點選事件，我們可以獲取到當前的節點物件
    * 同樣也可以獲取到節點物件上繫結的 data-X 資料
    * 獲取方法： e.currentTarget.dataset
    * 此處我們先獲取到 item 物件，它包含了文章 id
    * 然後帶著引數 id 跳轉到詳情頁面
    */
    showDetail (e) {
        let dataset = e.currentTarget.dataset
        let item = dataset && dataset.item
        let contentId = item.contentId || 0
        wx.navigateTo({
            url: `../detail/detail?contentId=${contentId}`
        });
    },
}
複製程式碼

修改 index.js，增加處理標識功能的函式 markRead，並在上面的 showDetail 函式中呼叫：

let handler = {
    // 此處省略部分程式碼

    showDetail (e) {
        let dataset = e.currentTarget.dataset
        let item = dataset && dataset.item
        let contentId = item.contentId || 0
        // 呼叫實現閱讀標識的函式
        this.markRead( contentId )
        wx.navigateTo({
            url: `../detail/detail?contentId=${contentId}`
        });
    },
    /*
    * 如果我們只是把閱讀過的文章contentId儲存在globalData中，則重新開啟小程式後，記錄就不存在了
    * 所以，如果想要實現下次進入小程式依然能看到閱讀標識，我們還需要在快取中儲存同樣的資料
    * 當進入小程式時候，從快取中查詢，如果有快取資料，就同步到 globalData 中
    */
    markRead (contentId) {
        //先從快取中查詢 visited 欄位對應的所有文章 contentId 資料
        util.getStorageData('visited', (data)=> {
            let newStorage = data;
            if (data) {
                //如果當前的文章 contentId 不存在，也就是還沒有閱讀，就把當前的文章 contentId 拼接進去
                if (data.indexOf(contentId) === -1) {
                    newStorage = `${data},${contentId}`;
                }
            }
            // 如果還沒有閱讀 visited 的資料，那說明當前的文章是使用者閱讀的第一篇，直接賦值就行了 
            else {
                newStorage = `${contentId}`;
            }

            /*
            * 處理過後，如果 data(老資料) 與 newStorage(新資料) 不一樣，說明閱讀記錄發生了變化
            * 不一樣的話，我們就需要把新的記錄重新存入快取和 globalData 中 
            */
            if (data !== newStorage) {
                if (app.globalData) {
                    app.globalData.visitedArticles = newStorage;
                }
                util.setStorageData('visited', newStorage, ()=>{
                    this.resetArticles();
                });
            }
        });
    },
    resetArticles () {
        let old = this.data.articleList;
        let newArticles = this.formatArticleData(old);
        this.setData({
            articleList: newArticles
        });
    },
}
複製程式碼

別急，寫到這裡，還沒有結束呢，差最後一步了。

修改 app.js，小程式初始化時候，我們從快取中把資料拿出來，賦值給 globalData，這樣就做到了真正的閱讀標識

'use strict';

// 引入工具類庫 
import util from './utils/index';

let handler = {
    onLaunch () {
        this.getDevideInfo();

        // 增加初始化快取資料功能
        util.getStorageData('visited', (data)=> {
            this.globalData.visitedArticles = data; 
        });
    },
    alert (title = '提示', content = '好像哪裡出了小問題~請再試一次~') {
        wx.showModal({
            title: title,
            content: content
        })
    },
    getDevideInfo () {
        let self = this;
        wx.getSystemInfo({
            success: function (res) {
                self.globalData.deviceInfo = res;
            }
        })
    },
    globalData: {
        user: {
            openId: null
        },
        visitedArticles: '',
        deviceInfo: {}
    }
};

App(handler);
複製程式碼