慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第6章构建新闻详情页面-应用程序生命周期

应用程序生命周期

1.点击音乐页面上背景图的图标播放音乐，同时最下方会出现微信音乐播放器，如果点击微信音乐播放器的暂停按钮，背景图上的图片也会显示暂停图，看起来没有问题，但是如果音乐播放期间离开音乐页面进入其它页面，然后再返回音乐页面，微信音乐播放器依然在播放，但是音乐页面上背景图的图标不是播放图标而是变成了暂停图标，这是一个bug

2.如何解决这个bug呢？局部变量是不行的，缓存也不行（原因是缓存是可以永久保留，如果突然关闭了小程序，缓存的状态不会改变，当重新打开小程序时，缓存状态还会一样），所以考虑使用全局变量来解决这个问题

3.修改文件 app.js，设置一个全局变量

App({
  globalData: {
    g_isPlayingMusic: false,
  }
})

4.测试，进入目录 pages/posts/post-detail，修改文件 post-detail.js，page 前编写代码获取一个变量app，然后在 onLoad 中第1行调用看是否可以获取

var postsData = require('../../../data/posts-data.js')
var app = getApp();
Page({
  data: {
    isPlayingMusic: false
  },
  onLoad: function(option) {
    var globalData = app.globalData;
    var postId = option.id;
    this.data.currentPostId = postId;
    var postData = postsData.postList[postId];
    // 如果在onLoad方法中，不是异步的去执行一个数据绑定
    // 则不需要使用 this.setData 方法
    // 只需要对 this.data 赋值即可实现数据绑定
    this.setData({
      postData: postData
    })

    // var postsCollected = {
    //   1:"true",
    //   2:"false",
    //   3:"true"
    //   ...
    // } 

    var postsCollected = wx.getStorageSync('posts_collected')
    if (postsCollected) {
      var postCollected = postsCollected[postId]
      this.setData({
        collected: postCollected
      })
    } else {
      var postsCollected = {};
      postsCollected[postId] = false;
      wx.setStorageSync('posts_collected', postsCollected);
    }

    var that = this;
    wx.onBackgroundAudioPlay(function() {
      that.setData({
        isPlayingMusic : true
      })
    });
    wx.onBackgroundAudioPause(function() {
      that.setData({
        isPlayingMusic : false
      })
    });
  },
  onCollectionTap: function(event) {
    this.getPostsCollectedSyc();
    //this.getPostsCollectedAsy();
  },
  getPostsCollectedAsy: function() {
    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() {
    var postsCollected = wx.getStorageSync('posts_collected');
    var postCollected = postsCollected[this.data.currentPostId];
    // 收藏变成未收藏，未收藏变成收藏
    postCollected = !postCollected;
    postsCollected[this.data.currentPostId] = postCollected;
    this.showToast(postsCollected, postCollected);
  },
  showModal: function(postsCollected, postCollected) {
    var that = this;
    wx.showModal({
      title: '收藏',
      content: postCollected ? '收藏该文章？' : '取消收藏该文章？',
      showCancel: 'true',
      cancelText: '取消',
      cancelColor: '#333',
      confirmText: '确认',
      confirmColor: '#405f80',
      success: function(request) {
        if (request.confirm) {
          // 更新文章是否的缓存值
          wx.setStorageSync('posts_collected', postsCollected);
          // 更新数据绑定变量，从而实现切换图片
          that.setData({
            collected: postCollected
          })
        }
      }
    })
  },
  showToast: function(postsCollected, postCollected) {
    // 更新文章是否的缓存值
    wx.setStorageSync('posts_collected', postsCollected);
    // 更新数据绑定变量，从而实现切换图片
    this.setData({
      collected: postCollected
    })
    wx.showToast({
      title: postCollected ? "收藏成功" : "取消成功",
      duration: 1000,
      icon: "success"
    })
  },
  onSharpTap: function(event) {
    var itemList = [
      "分享给微信好友",
      "分享到朋友圈",
      "分享到QQ",
      "分享到微博"
    ]
    wx.showActionSheet({
      itemList: itemList,
      itemColor: "#405f80",
      success: function(res) {
        // ret.cannel 用户是不是点击了取消按钮
        // ret.tapIndex 数组元素的序号，从0开始
        wx.showModal({
          title: '用户' + itemList[res.tapIndex],
          content: '用户是否取消?' + res.cancel + '现在无法实现分享功能，什么时候能支持呢',
        })
      }
    })
  },
  onMusicTap: function(event) {
    var currentPostId = this.data.currentPostId;
    var postData = postsData.postList[currentPostId].music;
    var isPlayingMusic = this.data.isPlayingMusic;
    if (isPlayingMusic) {
      wx.pauseBackgroundAudio();
      this.setData({
        isPlayingMusic:false
      })
    } else {
      wx.playBackgroundAudio({
        dataUrl: postData.url,
        title: postData.title,
        coverImgUrl: postData.coverImg
      })
      this.setData({
        isPlayingMusic: true
      })
    }
  }
})

5.启用调试器测试，在Sources里面 Ctrl+P 找到文件 post-detail.js?[sm]，加断点查看是否可以获取全局变量的值，测试成功

6.进入目录 pages/posts/post-detail，修改文件 post-detail.js，删掉测试代码 var globalData = app.globalData;，了解app.js文件的生命周期

7.修改文件 app.js，查看 app.js的生命周期

// App({
//   globalData: {
//     g_isPlayingMusic: false,
//   }
// })

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function() {
    console.log('onLaunch');
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function(options) {
    console.log('onShow');
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function() {
    console.log('onHide');
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function(msg) {
    console.log('onError');
  }
})

8.测试

9.测试 onHide，点击 "切后台"，马上可以看到了 onHide的输出

10.测试，再次从后台转前台，只有onShow有执行

11.测试完，修改文件 app.json

App({
  globalData: {
    g_isPlayingMusic: false,
  }
})