慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第6章构建新闻详情页面-同步异步方法对比

同步异步方法对比

1.进入目录 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) {
    //this.getPostsCollectedSyc();     
    this.getPostsCollectedAsy();
  },
  getPostsCollectedAsy:function() {
    var that = this;
    wx.getStorage({
      key:"posts_collected",
      success:function(res) {
        var postsCollected = res.data;
        var postCollected = postsCollected[that.data.currentPostId];
        // 收藏变成未收藏，未收藏变成收藏
        postCollected = !postCollected;
        postsCollected[that.data.currentPostId] = postCollected;
        that.showToast(postsCollected, postCollected);
      }
    })
  },
  getPostsCollectedSyc:function() {
    var postsCollected = wx.getStorageSync('posts_collected');
    var postCollected = postsCollected[this.data.currentPostId];
    // 收藏变成未收藏，未收藏变成收藏
    postCollected = !postCollected;
    postsCollected[this.data.currentPostId] = postCollected;
    this.showToast(postsCollected, postCollected);
  },
  showModal:function(postsCollected, postCollected){
    var that = this;
    wx.showModal({
      title: '收藏',
      content: postCollected?'收藏该文章？':'取消收藏该文章？',
      showCancel: 'true',
      cancelText: '取消',
      cancelColor: '#333',
      confirmText: '确认',
      confirmColor: '#405f80',
      success:function(request) {
        if (request.confirm) {
          // 更新文章是否的缓存值
          wx.setStorageSync('posts_collected', postsCollected);
          // 更新数据绑定变量，从而实现切换图片
          that.setData({
            collected: postCollected
          })
        }
      }
    })
  },
  showToast:function(postsCollected, postCollected) {
    // 更新文章是否的缓存值
    wx.setStorageSync('posts_collected', postsCollected);
    // 更新数据绑定变量，从而实现切换图片
    this.setData({
      collected: postCollected
    })
    wx.showToast({
      title:postCollected?"收藏成功":"取消成功",
      duration:1000,
      icon:"success"
    })
  },
  onSharpTap:function(event) {
    var itemList = [
      "分享给微信好友",
      "分享到朋友圈",
      "分享到QQ",
      "分享到微博"
    ]
    wx.showActionSheet({
      itemList: itemList,
      itemColor:"#405f80",
      success:function(res){
        // ret.cannel 用户是不是点击了取消按钮
        // ret.tapIndex 数组元素的序号，从0开始
        wx.showModal({
          title: '用户' + itemList[res.tapIndex],
          content: '用户是否取消?'+ res.cancel + '现在无法实现分享功能，什么时候能支持呢',
        })
      }
    })
  }
})

2.测试