记录小程序学习(2)（异步，制作一个音乐播放小功能）

异步

异步可读性差，可减少服务器压力
例如网购，下单后会先给用户显示提交成功的订单。而后再处理一些其他的问题

同步异步区别
getPostsCollectedSyc同步

同步方法：

定义：顺序执行，上一个没执行完，下一个不会执行，所以 方法复杂时可能会导致卡顿

代码复杂地低，方便阅读，容易查错

能直接返回函数

异步方法：

定义：不会让ui有停滞的情况，（但是可能会异步执行同步，然后有嵌套异步或者同步，导致回调事件很长），所以流畅快速，不易卡顿

代码复杂度高，不便阅读，不容易查错

异步方法是不能直接返回函数的，需要调用回调方法来返回函数
制作一个音乐播放小功能

---

开发文档https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/wx.pauseBackgroundAudio.html

数据绑定实现 根据状态是否播放显示暂停图片，未播放显示播放图片

遇到问题1：根据版本问题 数据绑定要用 this.setData({})

效果图 代码

问题2：为何上图中是postsData.postList.music
而下图为postData.music

alt+shift+F格式化代码

总控开关与我们编写开关 不同步
完善方法：
查找文档，在onLoad中添加监听

由框架调用代码，是由事件驱动思想
数据绑定好处：单元测试

在当前页面音乐播放，可是切换页面后 再回来音乐还在播放，但是自已设置的图片显示关闭音乐状态
完善方法：

首先定义全局变量

get获得
在onload中if判断音乐状态，为真，说明音乐正在播放，所以要改本地的（isPlayingMusic） 将控制数据绑定为真

因为全局变量中 设置默认false,所以要在监听中改变
然后在监听中 音乐开始时app.globalData.g_isPlayingMusic=true;
音乐停止时
app.globalData.g_isPlayingMusic=flase;

---

app.js中 app里 onLauch,onShow,onHide的生命周期
首先onLauch,onShow
然后切换到后台时onHide
再次切回小程序时onShow（onLauch不会重复）

在第一页面播放第一首歌A，然后退出进入第二个页面，发现自已设置的图片显示播放状态，歌曲播放的是A，第二个页面应该是播放B才对。
造成问题的原因g_isPlayingMusic指代不对
完善方法：
首先设置全局变量
//指代哪个音乐播放
g_currentMusicPostId:null

设置当前音乐播放是哪个
在暂停时把当前的音乐清空
然后在IF中判断音乐是否播放，并且播放的是不是当前列表的音乐

改善完成，播放第一个页面的音乐，进入第二个页面 还是播放第一个页面的音乐，并且第二个页面的图标显示关闭

轮播跳转文章详情

方法1：

onSwiperItemTap:function(event){
var postId = event.currentTarget.dataset.postid;
console.log(“onPostTap”);
wx.navigateTo({
url: “post-detail/post-detail?id=” + postId
})
},
方法2 事件冒泡機制完善：
首先點擊的是image,因爲他是子元素，由於事件冒泡機制，事件會由image轉送到swiper-item，最后再转送到swiper

遇到错误页面消失

设置断点 排查错误 i为小写

onSwiperTap:function(event){
var postId = event.target.dataset.postid;
wx.navigateTo({
url: “post-detail/post-detail?id=” + postId
})
},
target与currentTarget区别
target指的是当前点击的组件
currentTarget指的是事件捕获的组件
综上，事件是在swiper捕获的，点击组件是在iamge中，
postId 在iamge中，所以这里用target
事件冒泡 catchtap与bindtap 的区别
bindtap即响应它的事件，又继续冒泡
响应了它的事件，不继续冒泡

三种路由API