富贵资源网 Design By www.hznty.com

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

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

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

在实际开发中,在用到一个数据时,我们需要调用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
 })
 
 }
})

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

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

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

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。