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

网友投稿 314 2023-11-13

提示：这里可以添加本文要记录的大概内容：

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

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

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

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

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

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

1.存入数据

wx.setStorageSync(string key, any data)

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

wx.setStorage(Object object)

?
1
2
3
4
wx.setStorage({
data: "李四",
key: name1,
})

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

2.读数据

wx.getStorageSync(string key)

Object wx.getStorageInfoSync()

?
1
2
3
4
5
6
7
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)

?
1
2
3
wx.removeStorage({
key: name1,
})

wx.removeStorageSync(‘name)

?
1
wx.removeStorageSync(name)

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

4.删除全部数据（这里不再细说）

?
1
2
wx.clearStorage()
wx.clearStorageSync()

三、api辨析

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

1.wx.setStorage()

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

?
1
2
3
4
5
tongbu:function(){
wx.setStorageSync("name","张五") //同步api
var a=wx.getStorageSync(name)
console.log(a);
}

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

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

2.wx.setStorage()

代码如下（示例）：点击第一个触发函数yibu，用来演示异步情况

?
1
2
3
4
5
6
7
8
9
10
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**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

?
1
2
3
4
5
6
7
<!--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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 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
})
}
})

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

家！

您可能感兴趣的文章:微信小程序 数据缓存实现方法详解微信小程序学习笔记之本地数据缓存功能详解微信小程序之数据缓存的实例详解微信小程序开发之数据存储 参数传递 数据缓存微信小程序-详解数据缓存

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 数据 微信小程序 实例 小程序
上一篇:健康养生APP开发市场怎么样？
下一篇:本地生活APP开发市场怎么样？
相关文章

 发表评论

暂时没有评论，来抢沙发吧~