课程名称:微信小程序入门与实战(全新版)
课程章节: 牢记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 分钟,早日休息,明日继续👷。