手记

【学习打卡】第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 分钟,早日休息,明日继续👷。


0人推荐
随时随地看视频
慕课网APP