热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了微信小程序本地数据存储实例详解的相关资料,需要的朋友可以参考下

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

前言

如果您在看此文章之前有过其他程序的开发经验,那一定会知道一般例如安卓或者苹果的原生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

总结

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

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


推荐阅读
  • 从CodeIgniter中提取图像处理组件
    本指南旨在帮助开发者在未使用CodeIgniter框架的情况下,如何独立使用其强大的图像处理功能,包括图像尺寸调整、创建缩略图、裁剪、旋转及添加水印等。 ... [详细]
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • JavaScript 跨域解决方案详解
    本文详细介绍了JavaScript在不同域之间进行数据传输或通信的技术,包括使用JSONP、修改document.domain、利用window.name以及HTML5的postMessage方法等跨域解决方案。 ... [详细]
  • 如何将955万数据表的17秒SQL查询优化至300毫秒
    本文详细介绍了通过优化SQL查询策略,成功将一张包含955万条记录的财务流水表的查询时间从17秒缩短至300毫秒的方法。文章不仅提供了具体的SQL优化技巧,还深入探讨了背后的数据库原理。 ... [详细]
  • 调试利器SSH隧道
    在开发微信公众号或小程序的时候,由于微信平台规则的限制,部分接口需要通过线上域名才能正常访问。但我们一般都会在本地开发,因为这能快速的看到 ... [详细]
  • 美团安全响应中心推出全新配送业务测试活动,带来双重福利,邀您共同参与! ... [详细]
  • Python3爬虫入门:pyspider的基本使用[python爬虫入门]
    Python学习网有大量免费的Python入门教程,欢迎大家来学习。本文主要通过爬取去哪儿网的旅游攻略来给大家介绍pyspid ... [详细]
  • 利用Node.js实现PSD文件的高效切图
    本文介绍了如何通过Node.js及其psd2json模块,快速实现PSD文件的自动化切图过程,以适应项目中频繁的界面更新需求。此方法不仅提高了工作效率,还简化了从设计稿到实际应用的转换流程。 ... [详细]
  • 本文探讨了如何在PHP与MySQL环境中实现高效的分页查询,包括基本的分页实现、性能优化技巧以及高级的分页策略。 ... [详细]
  • 如何在Django框架中实现对象关系映射(ORM)
    本文介绍了Django框架中对象关系映射(ORM)的实现方式,通过ORM,开发者可以通过定义模型类来间接操作数据库表,从而简化数据库操作流程,提高开发效率。 ... [详细]
  • CentOS下ProFTPD的安装与配置指南
    本文详细介绍在CentOS操作系统上安装和配置ProFTPD服务的方法,包括基本配置、安全设置及高级功能的启用。 ... [详细]
  • 使用Echarts for Weixin 小程序实现中国地图及区域点击事件
    本文介绍了如何使用Echarts for Weixin在微信小程序中构建中国地图,并实现区域点击事件。包括效果展示、条件准备和逻辑实现的具体步骤。 ... [详细]
  • 花生壳内网穿透:实现企业智能网关远程管理和维护
    随着物联网技术的发展,企业对智能网关的需求日益增加。本文介绍如何利用花生壳内网穿透技术,实现企业智能网关的远程管理和维护,提高效率,降低成本。 ... [详细]
  • 本文讲述了一位80后的普通男性程序员,尽管没有高学历,但通过不断的努力和学习,在IT行业中逐渐找到了自己的位置。从最初的仓库管理员到现在的多技能开发者,他的职业生涯充满了挑战与机遇。 ... [详细]
  • 周排行与月排行榜开发总结
    本文详细介绍了如何在PHP中实现周排行和月排行榜的开发,包括数据库设计、数据记录和查询方法。涉及的知识点包括MySQL的GROUP BY、WEEK和MONTH函数。 ... [详细]
author-avatar
实圪垯电动乐园_855
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有