微信小程序教学第三章第四节（含视频）：小程序中级实战教程：下拉更新、分享、阅读标识

下拉更新、分享、阅读标识

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

---

开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具
这一篇中，咱们把列表这块的剩余功能作完：下拉更新、分享、阅读标识。

<br>

下拉更新功能

下拉更新这个功能与咱们在第一章中写的小 demo 所用方法一致：onReachBottom。

<br>

当用户滚动过程当中触发了 上拉 这个动做时候，微信小程序会自动监听到并执行 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();
        }
    },   
}

<br>

分享功能

相似于 onReachBottom，分享功能也是微信自带的一个监听事件回调函数 onShareAppMessage，它返回一个对象，对象中定义了分享的各类信息及分享成功和分享失败的回调，具体细节能够查看分享接口官方文档

修改 index.js，增长分享的回调事件：

let handler = {
    // 此处省略部分代码

    /*
    * 分享
    */
    onShareAppMessage () {
        let title = config.defaultShareText || '';
        return {
            title: title,
            path: `/pages/index/index`,
            success: function(res) {
                // 转发成功
            },
            fail: function(res) {
                // 转发失败
            }
        }
    },
}

<br>

阅读标识

如何实现阅读标识呢？其实思路也简单。若是用户从列表中点击某篇文章阅读，此篇文章确定是须要标识的。因此咱们只须要在跳转到文章详情以前，把此篇文章的 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>

<br>

修改 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}`
        });
    },
}

<br>

修改 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
        });
    },
}

<br>

别急，写到这里，尚未结束呢，差最后一步了。

<br>

修改 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);

<br>

到此，列表页面的功能开发完成，下一篇咱们将开始详情页面的开发

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

访问官网更快阅读所有免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。 包含：文章、视频、源代码

iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

【11月11号】上海iKcamp最新活动

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

与“每天练口语”小程序总榜排名第4、教育类排名第一的研发团队，面对面沟通交流。