51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

手机号码,快捷登录

查看: 2704|回复: 1
打印 上一主题 下一主题

微信小程序入门到实战(五)

[复制链接]

该用户从未签到

跳转到指定楼层
1#
发表于 2019-2-14 15:15:51 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 听海——sky 于 2019-2-14 15:21 编辑

缓存

缓存的作用是为了加快数据的访问,小程序里面可以设置缓存(本地),设置缓存后,如果没有手动清除缓存的话,就会一直存在。大小不能超过10M。数据优先。

  • 设置缓存
  1. wx.setStorageSync('key','value'):同步
  2. wx.setStorage({key:'key',data:'value'}):异步
复制代码
  1. wx.setStorageSync('icessun','2018/2/14')   // 同步设置缓存

  2. wx.setStorage({key:'跳一跳',data:'666'})   // 异步设置缓存
复制代码


同步设置缓存,缓存值可以为一个字符串,也可以为一个对象,当第一个参数值相同的时候,后面的会覆盖前面的。异步也一样。
  1. wx.setStorageSync('key',{
  2.       game: "跳一跳",
  3.       gold: "666"
  4.     })
复制代码


异步设置缓存,里面的属性是固定的,接收一个对象为参数,也就是说,当你不使用key/data作为参数名字时,就会报错:

  1. setStorage:fail parameter error: parameter.key should be String instead of Undefined;
复制代码



获取缓存
获取缓存的方法很简单,把对应设置缓存的set变为get就行。

  1. wx.getStorageSync('key'):同步 直接返回获取到的值
  2. wx.getStorage({key:'key',callback}):异步 通过回调函数返回获取的值
复制代码
  1. wx.setStorageSync('key', {
  2.       game: "跳一跳",
  3.       gold: "666"
  4.     })

  5.     var a=wx.getStorageSync('key');
  6.     console.log(a);   //     {game: "跳一跳", gold: "666" }
复制代码

上面是同步获取缓存值的方法,直接通过变量去接收获取到的缓存值,如果是异步的方法获取缓存值,那么需要在回调函数里面取得缓存值;同步和异步两种方法中的`key`是必须要传入的,否者不知道获取的具体缓存值。

  1. wx.setStorage({
  2.       key: "跳一跳",
  3.       data: "666"
  4.     })

  5.     var a = wx.getStorage({
  6.       key:'跳一跳',
  7.       success: function (res) {
  8.         console.log(res.data);
  9.         console.log(res);
  10.       }
  11.     });
复制代码

![异步获取缓存值](




清除缓存

清除缓存的方法有两种,clearStorage和removeStorage,每一种都有同步和异步之分:

  1. // 从本地缓存中异步移除指定 key
  2. wx.removeStorage({
  3.   key: 'key',
  4.   success: function(res) {
  5.     console.log(res.data)
  6.   }
  7. })

  8. // 同步移除指定 key
  9. try {
  10.   wx.removeStorageSync('key')
  11. } catch (e) {
  12.   // Do something when catch error
  13. }

  14. //清理本地数据缓存
  15. wx.clearStorage()

  16. // 同步清理本地数据缓存
  17. try {
  18.     wx.clearStorageSync()
  19. } catch(e) {
  20.   // Do something when catch error
  21. }
复制代码

前面说过,缓存是一直存在的,只能通过调用这个方法去清除缓存。



缓存实践
  • 文章收藏实现


那么用缓存,怎么样实现呢?首先是文章数量很多,怎么样知道是那篇文章被收藏了,也就是说文章与缓存数据怎么样一一对应,同时也说明缓存数据的存储方式?收藏的图标怎么样容易切换显示(这个问题,前面的文章已经说了解决办法)?


收藏和未收藏,是两个不同的状态,那么就会想到布尔值去实现;与文章的一一对应关系,那么会想到使用一个对象去操作,key 表示对应的文章,value表示收藏的状态。

  1. postCollected={
  2.     0:'ture',    // 文章的id:是否被收藏(true/false)
  3.     1:'false'
  4.      ...
  5. }
复制代码

在文章加载的时候,先要获取一下缓存,看是否存在收藏记录,然后进行状态的判断,弹框提示。
  1. var postData = require('相对路径') // 本地数据
  2. onLoad:function(options){
  3.     var postId = options.id;
  4.     var  postData = postData.postList[postId];  // 本地数据中数据输出,对应页面的数据
  5.     this.setData({
  6.        postData:postData,
  7.        postId:postId
  8.    })

  9.    var postsCollected= wx.getStorageSync('icessun');  // 读取缓存
  10.    if(postsCollected){    // 状态判断
  11.              var postStor = postsCollected[postId];
  12.               this.setData({
  13.                     collected:postStor
  14.                })
  15.     }else{
  16.            var  postsCollected = {};  // 把缓存对象默认为空,防止后面访问对象属性出错
  17.             postsCollected[postId] = false;
  18.             wx.setStorageSync('icessun',postsCollected);
  19.     }
  20. }
复制代码


其中的options.id获取的是前一个页面传递过来的参数(前一篇文章末尾已经说过):文章ID。然后判断缓存中页面是否被收藏,把这个状态值设置给wxml,进而控制图片的显示。

  1. <!--collected 状态变量 在js文件里面控制真假  -->
  2.       <image catchtap='onCollectionTap' wx:if='{{collected}}' src='/images/icon/collection.png'></image>
  3.       <image catchtap='onCollectionTap' wx:else src='/images/icon/collection-anti.png'></image>
复制代码


实现了缓存文章收藏的状态,怎么样在收藏和未收藏之间来回切换呢?

  1. onCollectionTap: function (event) {
  2.     var postsStorage = wx.getStorageSync('icessun');
  3.     var postStor = postsStorage[this.data.currentPostId]; // 根据文章的id,获取收藏的状态
  4.     postStor = !postStor;  // 收藏与未收藏之间的切换

  5.     postsStorage[this.data.currentPostId] = postStor;
  6.     this.showModal(postsStorage, postStor)
  7.   }
复制代码

异步存储缓存

  1. onCollectionTap: function (event) {
  2.     this.getPostCollectedAsy();
  3.   },
  4. // 异步方法缓存
  5.   getPostCollectedAsy: function () {
  6.     var that = this;
  7.     wx.getStorage({  // 异步方法的使用
  8.       key: 'icessun',
  9.       success: function (res) {
  10.         var postCollected = res.data;
  11.         var postsColl = postCollected[that.data.currentPostId];
  12.         postsColl = !postsColl;
  13.         postCollected[that.data.currentPostId] = postsColl;
  14.         that.showToast(postCollected, postsColl);
  15.       },
  16.     })
  17.   }
复制代码

异步不会阻塞UI,但还是需要根据实际业务需求来,业务需要解耦的话,那么就使用异步,一般都推荐使用同步。脱离业务谈同步和异步,意义不大。


在收藏图片上面加一个按钮,点击的时候,弹出一个提示框:是否收藏。跟新收藏状态就行。

  1. showModal: function (postsStorage, postStor) {
  2.     var _this = this;  // 注意this的指向
  3.     wx.showModal({
  4.       title: ' ',
  5.       content: postStor ? '收藏该文章?' : '取消收藏该文章?',
  6.       showCancel: 'true',
  7.       cancelText: '取消',
  8.       cancelColor: '#333',
  9.       confirmText: '确认',
  10.       confirmColor: '#405f80',
  11.       success: function (res) {
  12.         if (res.confirm) {
  13.           wx.setStorageSync('icessun', postsStorage);
  14.           _this.setData({
  15.             collected: postStor
  16.           })
  17.         }
  18.       }
  19.     })
  20.   }
复制代码

this指向的是函数调用的上下文环境,success函数里面的this指向showModal,但里面没有setData方法,this执行被改变了。所以要在showModal函数里面先把this暂存一下,保持this执行的不变。


界面交互,两种方法showToast,showModal,前者不用操作就会消失,后者需要操作才会消失。

  1. showToast: function (postsStorage, postStor) {
  2.     var _this = this;
  3.     // 先根据缓存设置图标,然后在提示文字 注意参数的传递 也要注意this的指向
  4.     wx.setStorageSync('icessun', postsStorage);
  5.     _this.setData({
  6.       collected: postStor
  7.     });
  8.     wx.showToast({
  9.       title: postStor ? '收藏成功' : '取消成功',
  10.       duration: 1000,
  11.       icon: "success"
  12.     })
  13.   }
复制代码



文章阅读数增加

使用缓存去记录文章的阅读数量(本地数据)。

因为微信小程序核心是一个响应的数据绑定系统,整个系统分为两块视图层(View)和逻辑层(App Service),框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。



思考:

类似与上一个文章收藏,也是使用一个对象把文章ID和阅读量进行一一对应。页面数据的更改,都是在该页面的Data属性里面进行;进入了页面详情页,那么该页面的浏览量就增加1;

  1. onLoad: function (options) {
  2. // 页面加载的时候先访问缓存
  3.     var viewDatas = wx.getStorageSync("viewData");
  4.     for (var i = 0; i < postData.postList.length; i++) {
  5.       if (viewDatas[i]) {
  6.         postData.postList[i].view_num = viewDatas[i]
  7.       }
  8.     }

  9.     this.setData({
  10.       // 获取导入的模版数据,设置到页面data数据里面,供wxml页面使用
  11.       post_key: postData.postList
  12.     });
  13.   },

  14.   newsdetail: function (event) {
  15.     // 当前点击事件触发的元素身上设置的postid,访问自定义属性
  16.     var postid = event.currentTarget.dataset.postid;
  17.     var viewDatas = wx.getStorageSync("viewData");
  18.     if (viewDatas) {
  19.       if(viewDatas[postid]){
  20.         viewDatas[postid] = viewDatas[postid] + 1;
  21.       }else{
  22.         viewDatas[postid]=1;
  23.       }
  24.       postData.postList[postid].view_num = viewDatas[postid];
  25.       this.setData({
  26.         post_key: postData.postList
  27.       });
  28.       wx.setStorageSync("viewData", viewDatas);
  29.     }
  30.     else {
  31.       var viewDatas = {};
  32.       viewDatas[postid] = 1;
  33.       postData.postList[postid].view_num = 1;
  34.       this.setData({
  35.         post_key: postData.postList
  36.       });
  37.       wx.setStorageSync("viewData", viewDatas);
  38.     }

  39.     wx.navigateTo({
  40.       url: 'post-detail/post-detail?id=' + postid
  41.     });
  42.   }
复制代码

首先,页面初始化的时候,就应该读取一下缓存;根据缓存与文章是一一对应的关系,使用循环去操作。注意一点的是,我们应该判断viewDatas的真假,而不是wx.getStorageSync("viewData")的真假。然后是详情页面的点击,和前面说的一样,应该判断viewDatas的真假,否者会出现,第一次点击是好的,然后就出现浏览量为null的情况,是因为点击一个没有在缓存中出现过的文章,其viewDatas[postid]为undefined,与数字1相加出现NaN,进而出现null。初始化的时候,要把缓存置空var viewDatas = {};,防止后面访问出现错误。

  1. <i><i>if(viewDatas[postid]){
  2.         viewDatas[postid] = viewDatas[postid] + 1;
  3. }else{
  4.         viewDatas[postid]=1;
  5.       }</i></i>
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?(注-册)加入51Testing

x
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏
回复

使用道具 举报

本版积分规则

关闭

站长推荐上一条 /1 下一条

小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

GMT+8, 2024-11-6 12:45 , Processed in 0.068365 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2024 Comsenz Inc.

快速回复 返回顶部 返回列表