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

站长资源 2024/11/5 佚名

2 0 1

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

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

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

在实际开发中，在用到一个数据时，我们需要调用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="/UploadFiles/2021-04-02/{{pictureurl}}">

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
 })
 
 }
})



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

微信小程序开发数据缓存,小程序开发数据缓存

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

www.yaopr.com 丐帮资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月05日

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

nuxt.js服务端渲染中axios和proxy代理的配置操作

nuxt 路由、过渡特效、中间件的实现代码

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接