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

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

本文配套视频地址: 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);

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏猿人谷

iOS应用程序生命周期(前后台切换,应用的各种状态)详解

iOS的应用程序的生命周期,还有程序是运行在前台还是后台,应用程序各个状态的变换,这些对于开发者来说都是很重要的。 iOS系统的资源是有限的,应用程序在前台和在...

2169
来自专栏菩提树下的杨过

Asp.Net4.0/VS2010新变化(3):webform中也可以直接url路由

以前在做asp的时候,要把 /default.asp?id=123映射成/default/123,需要借助IISRewriter这个组件,到了asp.net以后...

17910
来自专栏小曾

.Net Web开发技术栈

有很多朋友有的因为兴趣,有的因为生计而走向了.Net中,有很多朋友想学,但是又不知道怎么学,学什么,怎么系统的学,为此我以我微薄之力总结归纳写了一篇.Net w...

882
来自专栏飞扬的花生

ASP.MVC 基于AuthorizeAttribute权限设计案例

     ASP.MVC上实现权限控制的方法很多,比如使用AuthorizeAttribute这个特性 1.创建自定义特性用于权限验证 public clas...

1807
来自专栏后台全栈之路

U-Boot 中添加自定义网络通信的方法

U-boot 没有 TCP 协议栈,不支持 TCP(提出要在 U-boot 里面支持 TCP 的协议的 PM 你给我出去)。但是UDP 还是有的。使用 U-bo...

1248
来自专栏Bug生活2048

.net core下验证码及二维码登录的实现

验证码实现的逻辑比较简单,生成一个随机数的图片,然后将随机数保存至cookie中,用于客户端校验。

903
来自专栏iOS技术

YYWebImage 源码剖析:线程调度与缓存策略

在 iOS 开发中,异步网络图片下载框架可以说是很大的解放了生产力,通常情况下开发者只需要简单的代码就能将网络图片异步下载并显示到手机屏幕上,并且还带有缓存优化...

1114
来自专栏王磊的博客

ASP.NET 缓存 Cache

ASP.NET 提供一个功能完整的缓存引擎,页面可使用该引擎通过 HTTP 请求存储和检索任意对象. 缓存的生存期与应用程序的生存期相同,也就是说,当应用程序重...

4035
来自专栏Spark学习技巧

重磅:Flume1-7结合kafka讲解

本文主要是将flume监控目录,文件,kafka Source,kafka sink,hdfs sink这几种生产中我们常用的flume+kafka+hadoo...

4117
来自专栏前端布道

HTML5离线应用与客户端存储

支持离线 Web 应用开发是 HTML5 的另一个重点。所谓离线 Web 应用,就是在设备不能上网的情况下仍然可以运行的应用。

831

扫码关注云+社区