缓存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)
}
})
},
网友评论