微信小程序 本地数据存储实例详解


Posted in Javascript onApril 13, 2017

微信小程序 本地数据存储实例详解

前言

如果您在看此文章之前有过其他程序的开发经验,那一定会知道一般例如安卓或者苹果的原生APP都提供了本地的存储功能,甚至可以使用sqlite数据库来做存储。可是微信的小程序框架基于微信本身,其实际运行环境只是在浏览器里面,所以不会提供那么丰富的数据存储实力。但html5开始已经可以在浏览器里面存储数据,好在微信的小程序给这个功能封装好了,这样我们可以使用数据存储。

每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)

wx.getStorage(wx.getStorageSync)、 
wx.clearStorage(wx.clearStorageSync)

可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。

上面的set和get都有对应的Sync方法,带Sync的方法为同步方法、不带Sync的方法为异步方法。

设置缓存都需要设置一个key和对应的data值,我们在《微信web开发者工具》中的调试状态下可以点击调试窗口的Storage 栏来查看我们缓存在本地的数据。

缓存可以保存数组、数值、字符串、对象。

设置缓存

提供setStorage和setStorageSync两个接口,并且在使用设置存储方法时,如果小程序的存储值当中已经存在对应的key的值,那么会使用新的值替换原来的值。

setSotrage接口

wx.setStorage({
 key:"key",
 data:"value",
 success:function(res){console.log(res)},
 fail:function(res){console.log(res)},
 complete:function(res){console.log(res)},
})
//Object {errMsg: "setStorage:ok"}
//Object {errMsg: "setStorage:ok"}

setStorageSync接口

因为该方法为同步接口,所以直接设置key和data:

wx.setStorageSync('key', 'value')

上面两个demo中我们都使用了字符串缓存,当然我们也可以缓存一个对象,例如:

wx.setStorage({key:"ob",data:{name:'smallerpig',sex:1,age:18}})

获取缓存

getSotrage接口

异步接口,所以我们可以定义几个回调:

wx.getStorage(
{
 key:'key',
 success:function(res){
  console.log(res)//Object {errMsg: "getStorage:ok", data: "value1"}
 },
 fail:function(res){console.log(res)},
 complete:function(res){console.log(res)}
})

其中,我们可以看出来,微信小程序的很多异步接口的回调都会给出三个回调:success、fail、complete,在执行成功的时候回执行success、complete回调;在执行失败之后会分别执行fail、complete回调。

getSotrageSync接口

该接口为同步接口,所以只需传递对应的key值就可以了。如下列代码:

wx.getStorageSync('ob')
//Object {name: "smallerpig", sex: 1, age: 18}

获取当前存储总结

使用wx.getStorageInfo接口

例如下列代码:

wx.getStorageInfo({
 success: function(res) {
 console.log(res.keys)
 console.log(res.currentSize)
 console.log(res.limitSize)
 }
//["logs", "r3session", "key"]0: "logs"1: "r3session"2: "key"]
//1
//10240
})

也可以使用同步接口wx.getStorageInfoSync。

缓存的使用

在上一篇文章中,小猪介绍了如何解密通过wx.getUserInfo接口获取到的cryptedData数据。其中的session_key小猪是写在flask的缓存中,缓存的键是写死为:xcx_session_key。在真实环境中我们不能够这样写,因为这样不同的用户获取到的session_key是相同的,所以我们需要给不同的用户附上不同的缓存key。把flask的缓存key返回给微信小程序,小程序中可以固定一个key值,data值保持flask后台给到的值。

说的比较绕,这里需要读者好好理解下。

在flask的代码的使用code获取session_key中,使用下列代码:

@app.route('/user/getuserinfo', methods=['GET', 'POST'])
def getuserinfo():
 code = request.data
 url = 'https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code' % (appid, secret, code)
 r = requests.get(url)
 j = json.loads(r.text)
 r3session_key = binascii.hexlify(os.urandom(64))
 cache.set(r3session_key, j['session_key'])
 return r3session_key

接下来,在wx.request的回调中把flask中返回的r3session_key保存起来:

wx.request({
 url: 'https://***.smallerpig.com/user/getuserinfo',
 data: r.code,
 method: 'POST',
 success: function(res){
 wx.setStorageSync('r3session', res.data)
 }
})

再接下来,在调用wx.getUserInfo时将返回的数据加上从微信小程序本地缓存中取到的r3session丢给flask来处理,flask根据来的r3session从本地服务器的flask缓存中取到微信的值解密cryptedData。这才是一个完整的过程。

小程序的getUserInfo代码:

wx.getUserInfo({
 success: function (res) {
 that.globalData.userInfo = res.userInfo
 typeof cb == "function" && cb(that.globalData.userInfo)
 //将本地存储中的r3session值也同样传递到我的服务器,在服务器中找出微信给到我们的session_key
 var r3session = wx.getStorageSync('r3session')
 res.r3session = r3session
 wx.request({
  url: 'https://***.smallerpig.com/user/getuserunionid',
  data: res,
  success: function(res){
  // success
  console.log(res)
  },
 })
 }
})

对应的flask代码:

@app.route('/user/getuserunionid', methods=['GET', 'POST'])
def getuserid():
 r = json.loads(request.data)
 encryptedData = r['encryptedData']
 iv = r['iv']
 xcx_session_key = r['r3session']
 session_key = cache.get(xcx_session_key) # 从缓存中取出对应r3session对应的session_key
 pc = WXBizDataCrypt(appid, session_key)
 return pc.decrypt(encryptedData, iv)

参考官方文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/data.html

总结

经过几篇文章的介绍,如果您是按照小猪的代码一步一步做的话你应该已经了解小程序开发的大致过程,接下来的重点无非就是熟悉小程序提供给大家的接口,然后根据这些接口来完善我们的业务逻辑。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
DOM 基本方法
Jul 18 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 #Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 #Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 #Javascript
angularjs指令之绑定策略(@、=、&)
Apr 13 #Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 #Javascript
详解angularJs指令的3种绑定策略
Apr 13 #Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 #Javascript
You might like
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php 邮件发送问题解决
2014/03/22 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
laravel 数据验证规则详解
2019/10/23 PHP
JavaScript访问样式表代码
2010/10/15 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
JS数组的常用10种方法详解
2020/05/08 Javascript
原生js实现购物车
2020/09/23 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
学python最电脑配置有要求么
2020/07/05 Python
Python执行时间的几种计算方法
2020/07/31 Python
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
物业电工岗位职责
2013/11/20 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
详解Python牛顿插值法
2021/05/11 Python
python单向链表实例详解
2022/05/25 Python
table不让td文字溢出操作方法
2022/12/24 HTML / CSS