【学习打卡】第7天 JS的动态属性，收藏未收藏的切换，初始化收藏状态

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

课程章节： JS的动态属性，收藏未收藏的切换，初始化收藏状态

主讲老师：7七月

课程内容：

今天学习的内容包括：JS的动态属性，文章收藏状态的切换，初始化收藏状态

 访问对象中的属性

const obj = { flag:1 }
修改对象属性值 flag 的方法：
方法一，确定属性名：obj.flag = 2 
方法二，动态访问属性，不确定属性名，而是通过参数形式传入：obj[flag] = 2

文章收藏状态的切换

/**     * 页面的初始数据     */    
data: {        
    postData: {},        
    collected: false,        
    _pid: null   
},

wxml 页面点击触发 collected 为 true
/**     * 收藏页面     */   
onCollect(event) {        
    const postsCollected = {};        
    // 动态访问属性，不确定属性名，而是通过参数形式传入        
    postsCollected[this.data._pid] = true;        
    
    this.setData({           
        collected: true        
    })   
    
    wx.getStorageSync('posts_collected', postsCollected)     
},

收藏功能整体思路：

先通过点击事件，获取到文章的 id，定义一个空对象用来存储布尔值，然后将这个布尔值和 id 存在缓存里。
再通过 onLoad 生命周期函数监听页面加载，把获取的缓存存进全局变量 data 供点击事件使用。接着把在 data 里获取到的缓存和图标的布尔值进行取反。

 

课程收获：

今天算是把文章收藏功能学完了，不过还有许多细节要慢慢琢磨，感觉自己的 JavaScript 基础还是比较薄弱，要多加练习。

今日课程学习时间大约花费 15 分钟，今天看了四次视频，回头再慢慢消化。