异步数据缓存看起来挺组件化,但是回调函数比较复杂,不方便阅读理解。
如无特殊需要,推荐使用同步数据缓存
异步缓存的思路是:
声明Key名,然后通过res取得本页data内的Key数据
然后进行需要的运算,获取新的缓存值
最后通过回调函数传递出去给目标函数
以下展示异步数据缓存写法:
// 异步数据缓存
getPostsCollectedAsy: function (event) {
var that = this;
wx.getStorage({
key:"posts_Collected",
success:function(res){
var postsCollected = res.data;
var postCollected = postsCollected[that.data.currentPostId];
postCollected = !postCollected;
// 更新文章的缓存值
postsCollected[that.data.currentPostId] = postCollected;
that.showToast(postsCollected, postCollected);
}
})
},
// 同步数据缓存
getPostsCollectedSyc: function(event){
var postsCollected = wx.getStorageSync('posts_Collected');
// 获取本页文章ID与键名,并赋值给变量postCollected
var postCollected = postsCollected[this.data.currentPostId];
// 取反,切换储存状态(备注:没有设置储存状态ture或false,则默认为假)
postCollected = !postCollected;
// 更新文章的缓存值
postsCollected[this.data.currentPostId] = postCollected;
// 更新数据绑定变量,从而实现切换图片
this.showToast(postsCollected, postCollected);
},
//收藏状态
onColletionTap: function (event) {
this.getPostsCollectedAsy();
},
// 消息提示框
showToast:function(postsCollected, postCollected){
// 更新数据绑定变量,从而实现切换图片
wx.setStorageSync('posts_Collected', postsCollected);
this.setData({
collected: postCollected
})
wx.showToast({ //显示消息提示框
title: postCollected ? "收藏成功" : "取消成功",
duration: 1000,
icon: "success"
})
},
如果不需要进行异步,可以直接把同步数据缓存和消息提示框,直接写进收藏状态onColletionTap
里
实际上,这样才更加简单、便于理解
由于API使用还不熟练,顺便再记录一个界面交互的API使用
一般可用于分享功能,这个很简单,直接就可以使用,所以不做赘述
(反正已经写了注释,每行代码的功能很显眼了)
但还是贴一下代码,学习七月老师的思路
onShareTap: function (event) {
var itemList = [
"分享给微信好友",
"分享到朋友圈",
"分享到QQ",
"分享到微博"
];
wx.showActionSheet({ // 显示操作菜单
itemList: itemList, // 按钮的文字数组,数组长度最大为6个
itemColor: "#405f80",
success: function (res) {
// res.cancel 用户是不是点击了取消按钮
// res.tapIndex 数组元素的序号,从0开始
wx.showModal({
title: "用户 " + itemList[res.tapIndex],
content: "用户是否取消?" + res.cancel + "现在无法实现分享功能,什么时候能支持呢"
})
}
})
},
这个功能我比较喜欢,因为代码效果看得见,实现后听得到。
虽然功能简单,但是感觉很炫。
API官方直接用官方的就行,这里贴一下注释好的代码
setAudioMonitor()
需要在其他函数调用
具体实现过程,难点是事件监听
如何使全局播放器与局部播放器同步
于是用到事件监听,通过事件监听检测与改变isPlayingMusic
的布尔值
其他无非是事件三要素,加上API的使用
// 音乐
setAudioMonitor: function () {
// this是上下文环境变量,上下层超过一层构造函数,就会改变指针指向
var that = this;
//监听音乐播放
wx.onBackgroundAudioPlay(function () {
that.setData({
isPlayingMusic: true
})
app.globalData.g_isPlayingMusic = true;
app.globalData.g_currentMusicPostId = that.data.currentPostId;
});
// 监听音乐暂停
wx.onBackgroundAudioPause(function () {
that.setData({
isPlayingMusic: false
})
app.globalData.g_isPlayingMusic = false;
app.globalData.g_currentMusicPostId = null;
});
},
// 暂停与播放
onMusicTap: function (event) {
var currentPostId = this.data.currentPostId; // 获取当前文章页面ID与数据
var postData = postsData.postList[currentPostId]; // 每次引用的方便简写
var isPlayingMusic = this.data.isPlayingMusic;
// 获取音乐播放状态,未设置默认为假
if (isPlayingMusic) { //播放时运行以下代码
wx.pauseBackgroundAudio();
this.setData({
isPlayingMusic: false //暂停
})
}
else { //暂停时运行以下代码
wx.playBackgroundAudio({
dataUrl: postData.music.url,
title: postData.music.title,
coverImgUrl: postData.music.coverImg,
})
this.setData({
isPlayingMusic: true //播放
})
}
},
有同学可能注意到了,代码中出现了无关代码app.globalData.g_isPlayingMusic
又长又难辨认的代码
这其实这个功能的关键,如果没有它,即使实现了本页面的音乐播放按钮同步。全局播放和局部播放的同步。
返回上一级再进入页面的话,就会出现画面不同步的问题
如何不同步暂且不提,这里我们引出了下一个知识点
主目录的app.js,变量都定义在App({ })里面,就想page({ })
并且App({ })也有生命周期
不过定义全局变量用不到生命周期,所以这里不写
仅仅贴出定义全局变量的方法
App({
globalData:{
g_isPlayingMusic:false,
g_currentMusicPostId: null
}
})
来对比一下,app.globalData.g_isPlayingMusic
是不是很眼熟
不过想要在页面文件中使用,必须进行引入
不过和普通的脚本文件不同,App.js 里面的方法不需要手动进行暴露
直接其他页面的JS直接引入即可
示例:
var postsData = require(‘../../../data/posts-data.js’)
var app = getApp();
然后再其他页面文件里,还需要声明一下变量,方便调用
例如在初始化中声明:
onLoad: function (option) {
var globalData = app.globalData;
var postId = option.id;// 获取本页文章ID