课程名称:微信小程序入门与实战(全新版)
课程章节: 牢记setData对于data属性的影响,showToast更换成showModal,showModal的回调函数与Promise
主讲老师:7七月
课程内容:
今天学习的内容包括: 牢记setData对于data属性的影响,showToast更换成showModal,showModal的回调函数与Promise。
setData是做数据绑定的。所有数据绑定的值都在 data 里面。执行setData之后,data中 数据绑定的值就会被覆盖掉。
wx.showToast 和 wx.showModal 的区别:
wx.showToast 轻提示 不需要用户点击会自动取消消息框
wx.showModal 强提示 需要用户点后击才能取消掉消息框
下面是代码示例:
wx.showToast({
title: this.data.collected ? '收藏成功' : '取消收藏',
duration: 3000,
});
wx.showModal({
title: '是否收藏文章'
});重写后的 onCollected 方法
async onCollect(event) {
// 弹窗信息
const result = await wx.showModal({
title: '是否收藏文章'
});
if(result.confirm){
// 通过 data 变量获取缓存
const postsCollected = this.data._postsCollected;
wx.getStorageSync('key');
// 对缓存里的布尔值取反
postsCollected[this.data._pid] = !this.data.collected
this.setData({
// 更新收藏状态
collected: !this.data.collected
})
wx.setStorageSync('posts_collected', postsCollected);
}
},课程收获:
今天学习了一种新的官方内置接口, showModal。和之前 wx.showToast 不同的是,这个 API 弹窗必须用户手动取消。官方文档给出的 success 回调函数过于繁琐,推荐使用 async await 的语法。代码如上。我个人从用户角度来说,更偏好轻提示弹窗,所以在本地代码只添加了,保留了之前的写法。
今日课程学习时间大约花费 15 分钟,早日休息,明日继续👷。