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


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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
TypeScript入门-接口
Mar 30 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 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程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php中cookie的使用方法
2014/03/29 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
javascript CSS画图之基础篇
2009/07/29 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
Python3基础之list列表实例解析
2014/08/13 Python
Python 数据结构之队列的实现
2017/01/22 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
幼儿园春游活动方案
2014/01/19 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
法人代表任命书范本
2014/06/05 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
利用Java连接Hadoop进行编程
2022/06/28 Java/Android