慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第6章构建新闻详情页面-交互反馈 wx.showToast

交互反馈 wx.showToast

1.进入目录 pages/posts/post-detail，修改文件 post-detail.js，测试 wx.showToast

var postsData = require('../../../data/posts-data.js')

Page({
  data:{},
  onLoad:function(option) {
    var postId = option.id;
    this.data.currentPostId = postId;
    var postData = postsData.postList[postId];
    // 如果在onLoad方法中，不是异步的去执行一个数据绑定
    // 则不需要使用 this.setData 方法
    // 只需要对 this.data 赋值即可实现数据绑定
    this.setData({
      postData:postData
    })

    // var postsCollected = {
    //   1:"true",
    //   2:"false",
    //   3:"true"
    //   ...
    // } 

    var postsCollected = wx.getStorageSync('posts_collected')
    if (postsCollected) {
      var postCollected = postsCollected[postId]  
      this.setData({
        collected:postCollected
      })
    } else {
      var postsCollected = {};
      postsCollected[postId] = false;
      wx.setStorageSync('posts_collected', postsCollected); 
    }
  },
  
  onCollectionTap:function(event) {
    var postsCollected = wx.getStorageSync('posts_collected');
    var postCollected = postsCollected[this.data.currentPostId];
    // 收藏变成未收藏，未收藏变成收藏
    postCollected = !postCollected;
    postsCollected[this.data.currentPostId] = postCollected;
    // 更新文章是否的缓存值
    wx.setStorageSync('posts_collected', postsCollected);
    // 更新数据绑定变量，从而实现切换图片
    this.setData({
      collected:postCollected
    })

    wx.showToast({
      title:'收藏成功',
    })
  }
})

2.测试效果

3.进入目录 pages/posts/post-detail，修改文件 post-detail.js，正式修改

var postsData = require('../../../data/posts-data.js')

Page({
  data:{},
  onLoad:function(option) {
    var postId = option.id;
    this.data.currentPostId = postId;
    var postData = postsData.postList[postId];
    // 如果在onLoad方法中，不是异步的去执行一个数据绑定
    // 则不需要使用 this.setData 方法
    // 只需要对 this.data 赋值即可实现数据绑定
    this.setData({
      postData:postData
    })

    // var postsCollected = {
    //   1:"true",
    //   2:"false",
    //   3:"true"
    //   ...
    // } 

    var postsCollected = wx.getStorageSync('posts_collected')
    if (postsCollected) {
      var postCollected = postsCollected[postId]  
      this.setData({
        collected:postCollected
      })
    } else {
      var postsCollected = {};
      postsCollected[postId] = false;
      wx.setStorageSync('posts_collected', postsCollected); 
    }
  },
  
  onCollectionTap:function(event) {
    var postsCollected = wx.getStorageSync('posts_collected');
    var postCollected = postsCollected[this.data.currentPostId];
    // 收藏变成未收藏，未收藏变成收藏
    postCollected = !postCollected;
    postsCollected[this.data.currentPostId] = postCollected;
    // 更新文章是否的缓存值
    wx.setStorageSync('posts_collected', postsCollected);
    // 更新数据绑定变量，从而实现切换图片
    this.setData({
      collected:postCollected
    })

    wx.showToast({
      title:postCollected?"收藏成功":"取消成功",
      duration:1000,
      icon:"success"
    })
  }
})

4.测试