微信小程序开发数据缓存基础知识辨析及运用实例详解


Posted in Javascript onNovember 06, 2020

提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。

提示:以下是本篇文章正文内容,下面案例可供参考

一、微信数据缓存是什么?

在实际开发中,在用到一个数据时,我们需要调用api接口去得到,然后渲染在页面中,但是对于一些数据,是经常需要使用的,如果每次使用时都需要调用api接口,会十分麻烦。数据缓存就解决了这个问题,我们可以在初次调用某api得到数据的同时将数据缓存,那么在之后的使用过程中,可以直接通过缓存区得到,这样就提高了程序的效率。举个例子。在第二次登录微信时,我们还没有进行登录操作,但是发现我们的头像数据已经渲染到页面中,这就是因为再一次登录时,图片的地址是从缓存区中得到的缘故,在本文中也会对此实例进行操作,微信小程序中的数据缓存可类比js中的localstorage

二、数据缓存api使用方法和辨析

1.存入数据

wx.setStorageSync(string key, any data)

wx.setStorageSync("name","张三")

wx.setStorage(Object object)

wx.setStorage({
 data: "李四",
 key: 'name1',
 })

当执行了这段代码之后就会发现在调试区storage中出现以下数据

微信小程序开发数据缓存基础知识辨析及运用实例详解

2.读数据

wx.getStorageSync(string key)

var b=wx.getStorageSync('name')
 console.log(b);

Object wx.getStorageInfoSync()

var a=wx.getStorage({
 key: 'name1',
 })
 a.then(e=>{
 console.log(e.data);
 
 })

wx.getStorageInfoSync()得到的是一个promise对象,因此使用then方法通过e.data得到缓存区数据
当执行了这段代码之后就会发现在调试区console中出现以下数据

微信小程序开发数据缓存基础知识辨析及运用实例详解

3.删除数据 wx.removeStorage(Object object)

wx.removeStorage({
 key: 'name1',
 })

wx.removeStorageSync(‘name')

wx.removeStorageSync('name')

当执行了这段代码之后就会发现在调试区storage中出现以下数据会被删除


4.删除全部数据(这里不再细说)

wx.clearStorage()
wx.clearStorageSync()

三、api辨析

可以看到上面的多可api可分为两大类,一种是带sync的一种是不带的,其实带sync的是异步api,而不带的是同步api,这也是带sync的这部分api得到的是一个promise对象,这里以wx.setStorageSync() ,wx.setStorage() 做以示例

1.wx.setStorage()

代码如下(示例):在wxml中写入了两个按钮,点击第一个触发函数tongbu,用来演示同步情况

tongbu:function(){
 wx.setStorageSync("name","张五") //同步api
 var a=wx.getStorageSync('name')
 console.log(a);
}

最开始name对应的数据是张三,在这里我们修改为张五,然后读取数据,发现console为

微信小程序开发数据缓存基础知识辨析及运用实例详解

说明是单线程顺序执行,在修改了name后才执行了console.log

2.wx.setStorage()

代码如下(示例):点击第一个触发函数yibu,用来演示异步情况

yibu:function(){
 wx.setStorage({
 data: "李柳",
 key: 'name1',
 })
 var a=wx.getStorageSync('name1')
 console.log(a);

}
})

最开始name对应的数据是李四,在这里我们修改为李柳,然后读取数据,发现console为

微信小程序开发数据缓存基础知识辨析及运用实例详解

代码console.log在修改数据之后,但是发现在修改数据过后,a没有改变,说明这里的wx.setStorage()是异步api,在执行时,无论这里有无完成执行,都会执行cinsole.log


加载微信个人信息案例

index.wxss

/**index.wxss**/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;
}

.userinfo-nickname {
 color: #aaa;
}

.usermotto {
 margin-top: 200px;
}

image{
 margin-top: 20px;
 margin-bottom: 20px;
 width: 50px;
 height: 50px;
}

index.wxml

<!--index.wxml-->
<view class="container">
 <button bindtap="getmessage">获取用户信息</button>
<view>头像</view>
<view><image src="{{pictureurl}}"></image></view>
<view><text>用户名为 {{name}}</text></view>
</view>

index.js

// pages/index/index.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
  name:'张三',
  pictureurl:'../index/4.png'
 },
 getmessage:function(){
 var a=new Promise((resolve,reject)=>{
 wx.getUserInfo({
  success: function(res) {
  resolve(res)
  }
 })
 })//获取用户数据,前提是已经取得了访问权限
 a.then(res=>{
 this.setData({
  name:res.userInfo.nickName,
  pictureurl:res.userInfo.avatarUrl
 })//将访问得到的数据渲染到页面中
 wx.setStorage({
  data: res.userInfo.nickName,//name中存入用户名信息
  key: 'name',
 })
 wx.setStorage({
  data: res.userInfo.avatarUrl,//pictureurl中存入用户头像的url地址
  key: 'pictureurl',
 })
 })//同时将渲染的数据缓存
 },
 /**
 * 生命周期函数--监听页面加载,加载页面,触发onLoad。此时就可以将数据渲染
 */
 onLoad: function (options) {
 var name=wx.getStorageSync('name')//从缓存中读取用户名信息
 var url=wx.getStorageSync('pictureurl')//从缓存中读取头像url
 console.log(name);
 console.log(url);
 this.setData({
  name:name,
  pictureurl:url
 })
 
 }
})

渲染后的结果示例,第一次点击获取用户数据按钮后当刷新或者关闭后重启程序都会是此页面

微信小程序开发数据缓存基础知识辨析及运用实例详解

到此这篇关于微信小程序开发数据缓存基础知识辨析及运用实例详解的文章就介绍到这了,更多相关微信小程序开发数据缓存内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
实现vuex原理的示例
Oct 21 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 #Javascript
Nuxt的路由动画效果案例
Nov 06 #Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 #Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 #Javascript
微信小程序调用后台service教程详解
Nov 06 #Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 #Javascript
在nuxt中使用路由重定向的实例
Nov 06 #Javascript
You might like
PHP实现的比较完善的购物车类
2014/12/02 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
副总经理岗位职责
2014/03/16 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
知识竞赛主持词
2014/03/26 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
2015年预备党员自我评价
2015/03/04 职场文书