這篇文章主要介紹了微信小程式基於本地快取實作讚功能的方法,涉及微信小程式介面佈局、事件回應及快取操作等相關實作技巧,需要的朋友可以參考下
本文實例講述了微信小程式基於本機快取實作讚功能的方法。分享給大家供大家參考，具體如下：
wxml中的寫法
#注意：
1. 使用wx:if= "{{condition}}" wx:else 實現圖示的切換效果；
2. 為圖片綁定點擊事件bindtap="toCollect"，兩個image標籤都要綁定！
<image wx:if="{{collection}}" src="/images/icon/pic1.png" bindtap="toCollect"></image>
<image wx:else src="/images/icon/pic2.png" bindtap="toCollect"></image>js中的寫法：
Page({
data: {
},
onLoad: function(option) {
// 获取接收到的id值
var getId = option.id;
// 让接收到的id值传递到data:{}里面
this.setData({
currentId: getId
});
// 读取所有的文章列表点赞缓存状态
var cache = wx.getStorageSync('cache_key');
// 如果缓存状态存在
if (cache) {
// 拿到所有缓存状态中的1个
var currentCache = cache[getId];
// 把拿到的缓存状态中的1个赋值给data中的collection，如果当前文章没有缓存状态，currentCache 的值就是 false，如果当前文章的缓存存在，那么 currentCache 就是有值的，有值的说明 currentCache 的值是 true
this.setData({
collection: currentCache
})
} else {
// 如果所有的缓存状态都不存在 就让不存在的缓存存在
var cache = {};
// 既然所有的缓存都不存在，那么当前这个文章点赞的缓存也不存在，我们可以把当前这个文章点赞的缓存值设置为 false
cache[getId] = false;
// 把设置的当前文章点赞放在整体的缓存中
wx.setStorageSync('cache_key',cache);
}
},
// 点击图片的点赞事件 这里使用的是同步的方式
toCollect: function(event) {
// 获取所有的缓存
var cache = wx.getStorageSync('cache_key');
// 获取当前文章是否被点赞的缓存
var currentCache = cache[this.data.currentId];
// 取反，点赞的变成未点赞 未点赞的变成点赞
currentCache = !currentCache;
// 更新cache中的对应的1个的缓存值，使其等于当前取反的缓存值
cache[this.data.currentId] = currentCache;
// 重新设置缓存
wx.setStorageSync('cache_key',cache);
// 更新数据绑定,从而切换图片
this.setData({
// collection 默认的是 false
collection: currentCache
});
// 交互反馈
wx.showToast({
title: currentCache?'点赞':'取消',
icon: 'success',
duration: 2000
});
}
})#js中操作回饋—wx.showModal的寫法：##
// 点击图片的点赞事件 这里使用的是同步的方式
toCollect: function(event) {
// 获取缓存，得到当前文章是否被点赞
var cache = wx.getStorageSync('cache_key');
// 获取当前文章是否被点赞的缓存
var currentCache = cache[this.data.currentId];
// 取反，点赞的变成未点赞 未点赞的变成点赞
currentCache = !currentCache;
// 更新cache中的对应的1个的缓存值，使其等于当前取反的缓存值
cache[this.data.currentId] = currentCache;
// 调用 showModal方法
this.showModal(cache,currentCache);
}，
showModal: function(cache,currentCache) {
var that = this;
wx.showModal({
title: "点赞"
content: currentCache?"要点赞吗？":"要取消赞吗？",
showCancel: "true",
cancelText: "取消",
cancelColor: "#666",
confirmText: "确定",
confirmColor: "#222",
success: function(res) {
if (res.confirm) {
// 重新设置缓存
wx.setStorageSync('cache_key',cache);
// 更新数据绑定,从而切换图片
that.setData({
collection: currentCache
})
}
}
})
}在JavaScript中有關於多執行緒運行程式庫（詳細教學）
以上是在微信小程式中如何實現讚功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
