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

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

本文配套視頻地址：
https://v.qq.com/x/page/h0554i4u5ob.html

---

開始前請把 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);

到此，列表頁面的功能開發完成，下一篇我們將開始詳情頁面的開發

iKcamp官網：http://www.ikcamp.com

訪問官網更快閱讀全部免費分享課程：《iKcamp出品｜全網最新｜微信小程序｜基於最新版1.0開發者工具之初中級培訓教程分享》。
包含：文章、視頻、源代碼

iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、噹噹開售。

【11月11號】上海iKcamp最新活動

報名地址：http://www.huodongxing.com/event/5409924174200

與“天天練口語”小程序總榜排名第四、教育類排名第一的研發團隊，面對面溝通交流。