异步
异步可读性差,可减少服务器压力
例如网购,下单后会先给用户显示提交成功的订单。而后再处理一些其他的问题
同步异步区别
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