微信小程序学习笔记（五）

数据缓存的补充，以及音乐功能的实现

数据缓存之同步、异步

异步数据缓存看起来挺组件化，但是回调函数比较复杂，不方便阅读理解。
如无特殊需要，推荐使用同步数据缓存

异步缓存的思路是：
声明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.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