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

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

'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);

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

“天天练口语”