微信小程序入门到实战(五)
2018-03-04 21:12
423 查看
缓存
缓存的作用是为了加快数据的访问,小程序里面可以设置缓存(本地),设置缓存后,如果没有手动清除缓存的话,就会一直存在。大小不能超过10M。数据优先。设置缓存
wx.setStorageSync('key','value'):同步
wx.setStorage({key:'key',data:'value'}):异步
wx.setStorageSync('icessun','2018/2/14') // 同步设置缓存 wx.setStorage({key:'跳一跳',data:'666'}) // 异步设置缓存
同步设置缓存,缓存值可以为一个字符串,也可以为一个对象,当第一个参数值相同的时候,后面的会覆盖前面的。异步也一样。
wx.setStorageSync('key',{ game: "跳一跳", gold: "666" })
异步设置缓存,里面的属性是固定的,接收一个对象为参数,也就是说,当你不使用
key/data作为参数名字时,就会报错:
setStorage:fail parameter error: parameter.key should be String instead of Undefined;
获取缓存
获取缓存的方法很简单,把对应设置缓存的
set变为
get就行。
wx.getStorageSync('key'):同步 直接返回获取到的值
wx.getStorage({key:'key',callback}):异步 通过回调函数返回获取的值
wx.setStorageSync('key', { game: "跳一跳", gold: "666" }) var a=wx.getStorageSync('key'); console.log(a); // {game: "跳一跳", gold: "666" }
上面是同步获取缓存值的方法,直接通过变量去接收获取到的缓存值,如果是异步的方法获取缓存值,那么需要在回调函数里面取得缓存值;同步和异步两种方法中的`key`是必须要传入的,否者不知道获取的具体缓存值。
wx.setStorage({ key: "跳一跳", data: "666" }) var a = wx.getStorage({ key:'跳一跳', success: function (res) { console.log(res.data); console.log(res); } });
![异步获取缓存值](http://upload-images.jianshu.io/upload_images/1811036-0801ea1bfde83c94.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
清除缓存
清除缓存的方法有两种,
clearStorage和
removeStorage,每一种都有同步和异步之分:
d26e
// 从本地缓存中异步移除指定 key wx.removeStorage({ key: 'key', success: function(res) { console.log(res.data) } }) // 同步移除指定 key try { wx.removeStorageSync('key') } catch (e) { // Do something when catch error } //清理本地数据缓存 wx.clearStorage() // 同步清理本地数据缓存 try { wx.clearStorageSync() } catch(e) { // Do something when catch error }
前面说过,缓存是一直存在的,只能通过调用这个方法去清除缓存。
缓存实践
文章收藏实现那么用缓存,怎么样实现呢?首先是文章数量很多,怎么样知道是那篇文章被收藏了,也就是说文章与缓存数据怎么样一一对应,同时也说明缓存数据的存储方式?收藏的图标怎么样容易切换显示(这个问题,前面的文章已经说了解决办法)?
收藏和未收藏,是两个不同的状态,那么就会想到布尔值去实现;与文章的一一对应关系,那么会想到使用一个对象去操作,
key表示对应的文章,
value表示收藏的状态。
postCollected={ 0:'ture', // 文章的id:是否被收藏(true/false) 1:'false' ... }
在文章加载的时候,先要获取一下缓存,看是否存在收藏记录,然后进行状态的判断,弹框提示。
var postData = require('相对路径') // 本地数据 onLoad:function(options){ var postId = options.id; var postData = postData.postList[postId]; // 本地数据中数据输出,对应页面的数据 this.setData({ postData:postData, postId:postId }) var postsCollected= wx.getStorageSync('icessun'); // 读取缓存 if(postsCollected){ // 状态判断 var postStor = postsCollected[postId]; this.setData({ collected:postStor }) }else{ var postsCollected = {}; // 把缓存对象默认为空,防止后面访问对象属性出错 postsCollected[postId] = false; wx.setStorageSync('icessun',postsCollected); } }
其中的
options.id获取的是前一个页面传递过来的参数(前一篇文章末尾已经说过):文章ID。然后判断缓存中页面是否被收藏,把这个状态值设置给
wxml,进而控制图片的显示。
<!--collected 状态变量 在js文件里面控制真假 --> <image catchtap='onCollectionTap' wx:if='{{collected}}' src='/images/icon/collection.png'></image> <image catchtap='onCollectionTap' wx:else src='/images/icon/collection-anti.png'></image>
实现了缓存文章收藏的状态,怎么样在收藏和未收藏之间来回切换呢?
onCollectionTap: function (event) { var postsStorage = wx.getStorageSync('icessun'); var postStor = postsStorage[this.data.currentPostId]; // 根据文章的id,获取收藏的状态 postStor = !postStor; // 收藏与未收藏之间的切换 postsStorage[this.data.currentPostId] = postStor; this.showModal(postsStorage, postStor) }
异步存储缓存
onCollectionTap: function (event) { this.getPostCollectedAsy(); }, // 异步方法缓存 getPostCollectedAsy: function () { var that = this; wx.getStorage({ // 异步方法的使用 key: 'icessun', success: function (res) { var postCollected = res.data; var postsColl = postCollected[that.data.currentPostId]; postsColl = !postsColl; postCollected[that.data.currentPostId] = postsColl; that.showToast(postCollected, postsColl); }, }) }
异步不会阻塞
UI,但还是需要根据实际业务需求来,业务需要解耦的话,那么就使用异步,一般都推荐使用同步。脱离业务谈同步和异步,意义不大。
在收藏图片上面加一个按钮,点击的时候,弹出一个提示框:是否收藏。跟新收藏状态就行。
showModal: function (postsStorage, postStor) { var _this = this; // 注意this的指向 wx.showModal({ title: ' ', content: postStor ? '收藏该文章?' : '取消收藏该文章?', showCancel: 'true', cancelText: '取消', cancelColor: '#333', confirmText: '确认', confirmColor: '#405f80', success: function (res) { if (res.confirm) { wx.setStorageSync('icessun', postsStorage); _this.setData({ collected: postStor }) } } }) }
this指向的是函数调用的上下文环境,
success函数里面的
this指向
showModal,但里面没有
setData方法,
this执行被改变了。所以要在
showModal函数里面先把
this暂存一下,保持
this执行的不变。
界面交互,两种方法
showToast,
showModal,前者不用操作就会消失,后者需要操作才会消失。
showToast: function (postsStorage, postStor) { var _this = this; // 先根据缓存设置图标,然后在提示文字 注意参数的传递 也要注意this的指向 wx.setStorageSync('icessun', postsStorage); _this.setData({ collected: postStor }); wx.showToast({ title: postStor ? '收藏成功' : '取消成功', duration: 1000, icon: "success" }) }
文章阅读数增加
使用缓存去记录文章的阅读数量(本地数据)。
因为微信小程序核心是一个响应的数据绑定系统,整个系统分为两块
视图层(View)和
逻辑层(App Service),框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。
思考:类似与上一个文章收藏,也是使用一个对象把文章ID和阅读量进行一一对应。页面数据的更改,都是在该页面的
Data属性里面进行;进入了页面详情页,那么该页面的浏览量就增加1;
onLoad: function (options) { // 页面加载的时候先访问缓存 var viewDatas = wx.getStorageSync("viewData"); for (var i = 0; i < postData.postList.length; i++) { if (viewDatas[i]) { postData.postList[i].view_num = viewDatas[i] } } this.setData({ // 获取导入的模版数据,设置到页面data数据里面,供wxml页面使用 post_key: postData.postList }); }, newsdetail: function (event) { // 当前点击事件触发的元素身上设置的postid,访问自定义属性 var postid = event.currentTarget.dataset.postid; var viewDatas = wx.getStorageSync("viewData"); if (viewDatas) { if(viewDatas[postid]){ viewDatas[postid] = viewDatas[postid] + 1; }else{ viewDatas[postid]=1; } postData.postList[postid].view_num = viewDatas[postid]; this.setData({ post_key: postData.postList }); wx.setStorageSync("viewData", viewDatas); } else { var viewDatas = {}; viewDatas[postid] = 1; postData.postList[postid].view_num = 1; this.setData({ post_key: postData.postList }); wx.setStorageSync("viewData", viewDatas); } wx.navigateTo({ url: 'post-detail/post-detail?id=' + postid }); }
首先,页面初始化的时候,就应该读取一下缓存;根据缓存与文章是一一对应的关系,使用循环去操作。注意一点的是,我们应该判断
viewDatas[i]的真假,而不是
wx.getStorageSync("viewData")的真假。然后是详情页面的点击,和前面说的一样,应该判断
viewDatas[i]的真假,否者会出现,第一次点击是好的,然后就出现浏览量为
null的情况,是因为点击一个没有在缓存中出现过的文章,其
viewDatas[postid]为
undefined,与数字
1相加出现
NaN,进而出现
null。初始化的时候,要把缓存置空
var viewDatas = {};,防止后面访问出现错误。
if(viewDatas[postid]){ viewDatas[postid] = viewDatas[postid] + 1; }else{ viewDatas[postid]=1; }
相关文章推荐
- 微信小程序入门到实战(一)
- 微信小程序入门到实战(四)
- 微信小程序入门与实战 常用组件 API 开发技巧 项目实战
- 微信小程序入门到实战(三)
- 微信小程序入门教程+案例demo
- 微信小程序入门教程--列表渲染多层嵌套循环及wx:key的使用
- 微信小程序-入门篇(app.wxml及app.wxss)
- 【cocos2d-x入门实战】微信飞机大战之十四:背景音乐和音效
- 《OD学微信开发》微信小程序入门示例
- 微信小程序入门六: WebSocket应用
- 微信小程序实战(二)---实现搜索页面
- 微信小程序初体验,入门练手项目--通讯录,部署上线(二)
- 如何入门微信小程序开发
- 微信小程序极简入门(四)--豆瓣电影小程序页面详情跳转
- 微信小程序入门之实例参考
- 邀请函|7月12日小猪CMS微信小程序实战交流会火热报名中
- 微信小程序开发-从基础到实战(三)
- 微信小程序入门——页面跳转、数据传递、数据接收
- 入门微信小程序开发及相关资料
- 微信小程序(应用号)开发新闻客户端的实战课程