【学习打卡】第9天 牢记setData对于data属性的影响，showToast更换成showModal

课程名称：微信小程序入门与实战（全新版）

课程章节：  牢记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 分钟，早日休息，明日继续👷。