微信小程序实战 （四）

缓存storage的使用
设置缓存wx.setStorageSync('key',{
name:'1111'
})
获取缓存内容wx.getStorageSync('key')
清除缓存removeStorageSync('key')
清除所有缓存clearStorageSync()
小程序中不能实现操作dom去改变样式，或者动态切换图片，小程序中通过数据绑定的原则来实现。

利用缓存实现文章的收藏与取消收藏

// pages/posts/post-detail/post-detail.js
var postsData = require('../../../data/posts-data.js')
Page({
  data:{
  },
  onLoad: function (options) {
    var postId = options.id
    this.data.currentPostId = options.id
    console.log(postsData)
    var postData = postsData.postList[postId]
    //this.data.postData = postData
   this.setData({
     postData: postData
   });

   var postsCollected = wx.getStorageSync('post_collected')
    console.log('1111', postsCollected)
    if (postsCollected){
      var postCollected = postsCollected[postId]
      if (postCollected){
        this.setData({
          collected: postCollected
        })
      }
     
   }else{
      var postsCollected={}
      postsCollected[postId] = false
      wx.setStorageSync('post_collected', postsCollected)
   }
  },
  onColletionTap:function(event){
    let postsCollected = wx.getStorageSync('post_collected')
    let postCollected = postsCollected[this.data.currentPostId]
    postCollected = !postCollected //S收藏切换
    postsCollected[this.data.currentPostId] = postCollected 
    wx.setStorageSync('post_collected', postsCollected) //更新缓存
    //更新数据绑变量，切换图片
    this.setData({
      collected:postCollected
    })
    wx:wx.showToast({
      title: postCollected? '收藏成功' : '取消成功',
      duration:1000
    })
  }
})

showModal和showToast的用法，注意一点当前的this指向问题

onColletionTap:function(event){
    let postsCollected = wx.getStorageSync('post_collected')
    let postCollected = postsCollected[this.data.currentPostId]
    postCollected = !postCollected //S收藏切换
    postsCollected[this.data.currentPostId] = postCollected 
    // this.showModal(postsCollected, postCollected)
    this.showToast(postsCollected, postCollected)
  },
  showModal(postsCollected, postCollected){
    let self=this
    wx.showModal({
      title: '收藏',
      content: postCollected ? '收藏文章' :'取消收藏文章',
      showCancel: true,
      cancelText: 'NO',
      cancelColor: '',
      confirmText: 'YES',
      confirmColor: '',
      success: function (res) { 
        if (res.confirm){
          wx.setStorageSync('post_collected', postsCollected) //更新缓存
          //更新数据绑变量，切换图片
          self.setData({
            collected: postCollected
          })
        }
      },
      fail: function (res) { },
      complete: function (res) { },
    })

  },
  showToast(postsCollected, postCollected){
    let self = this
    wx.showToast({
      title: postCollected ? '收藏成功' : '取消成功',
      duration: 1000
    })
    wx.setStorageSync('post_collected', postsCollected) //更新缓存
    //更新数据绑变量，切换图片
    self.setData({
      collected: postCollected
    })
  }
 

小程序中的分享

onShareTap:function(event){
    let itemList = ['分享到朋友圈', '分享给好友', '分享到微博', '分享到QQ']
    wx:wx.showActionSheet({
      itemList: itemList,
      itemColor: '#405f80',
      success: function(res) {
        // res.cancel
        // res.cancelColor
      },
      fail: function(res) {},
      complete: function(res) {},
    })
  }

以上均属于用户交互方面的交互反馈组件

同步异步的方法实现获取缓存,具体使用场景根据具体业务逻辑而定，没有明确得好坏之分

getPostsCollectedAsy:function(){
    let self= this
    wx:wx.getStorage({
      key:'post_collected',
      success:function(res){
        let postsCollected = res.data
        let postCollected = postsCollected[self.data.currentPostId]
        postCollected = !postCollected //S收藏切换
        postsCollected[self.data.currentPostId] = postCollected
        // this.showModal(postsCollected, postCollected)
        self.showToast(postsCollected, postCollected)
      }
    })
  },