目录
1.全局共享数据的用法
2.小程序的本地持久化存储
3.小程序获取头像和用户昵称
4.如何实现进入页面就隐藏TabBar
1.全局共享数据的用法
小程序中的全局数据再app.js文件中声明，app本来就是小程序给我们配置的全局文件，因此在app.js文件中声明的数据也都是全局数据，然后我们需要在页面中通过getApp来获取app实例，然后再拿数据。
定义全局数据：
// app.js
App({
// 全局共享数据
globaldata: {
cartnum: 0,
},
});使用和修改全局数据：
// 获取全局唯一的app实例对象
const app = getApp();
// index.js
Page({
data: {
num: 0,
},
//获取全局数据，需要注意推荐再onShow生命周期中获取全局数据而不推荐再onLoad生命周期中获取数据，因为后者只会加载一次，而前者只要页面显示就会进行调用，可以确保页面的响应式
onShow() {
const num = app.globaldata.cartnum;
console.log("--------", num);
this.setData({
num: num,
});
},
//修改全局数据的值
add() {
app.globaldata.cartnum += 1;
console.log("=====", app.globaldata.cartnum);
this.setData({
num: app.globaldata.cartnum,
});
},
});
2.小程序的本地持久化存储
在小程序中存储在本地缓存中的数据会一直存在，除非用户主动删除或因存储空间原因被系统清理，否则数据一直都可用。单个key允许存储的最大数据长度为1MB，所有数据存储上限为10MB。而且对存储数据的类型没有要求，可以存储数组、对象、字符串等类型。
（1）wx.setStorageSync(key, data): 同步将数据存储在本地缓存中。可以存储的数据大小不能超过 10MB。
wx.setStorageSync('userInfo', { name: 'John', age: 30 });
（2）wx.setStorage(options): 异步将数据存储在本地缓存中，支持大于 10MB 的数据存储。
wx.setStorage({
key: 'userInfo',
data: { name: 'John', age: 30 },
success: function (res) {
console.log(res);
}
});
（3） wx.getStorageSync(key): 同步从本地缓存中获取指定 key 对应的内容。
let userInfo = wx.getStorageSync('userInfo');
console.log(userInfo);
（4） wx.getStorage(options): 异步从本地缓存中获取指定 key 对应的内容。
wx.getStorage({
key: 'userInfo',
success: function (res) {
console.log(res.data);
}
});
（5）wx.removeStorageSync(key): 同步移除本地缓存中指定 key 的数据。
wx.removeStorageSync('userInfo');
（6）wx.removeStorage(options): 异步移除本地缓存中指定 key 的数据。
wx.removeStorage({
key: 'userInfo',
success: function (res) {
console.log(res);
}
});
（7）wx.clearStorageSync(): 同步清理本地数据缓存。
wx.clearStorageSync();
（8）wx.clearStorage(options): 异步清理本地数据缓存。
wx.clearStorage({
success: function (res) {
console.log(res);
}
});
3.小程序获取头像和用户昵称
通过小程序提供的组件可以非常容易的获取到头像和用户昵称，通常我们会在登录时进行此操作，我们可以在点击事件中发送登录请求
wxml:
<view class="box">
<!-- 获取用户头像和昵称 -->
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{avatarUrl}}"></image>
</button>
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>
</view>js:
const defaultAvatarUrl =
"https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
// 默认的灰色头像
Page({
data: {
avatarUrl: defaultAvatarUrl,
},
onChooseAvatar(e) {
const { avatarUrl } = e.detail;
this.setData({
avatarUrl,
});
// 如果和登录一块操作的话就可以在这个地方发送登录请求
},
});
wxss:
/* 简单设点样式 */
.box {
margin-top: 100rpx;
}
.avatar {
width: 200rpx;
height: 200rpx;
margin: 60rpx 0;
}
.weui-input {
text-align: center;
m4.如何实现进入页面就隐藏TabBar
我们可以在onLoad或者onShow生命周期内设置wx.hideTabBar()；来实现进入页面隐藏TabBar 的效果。然后离开时在将TabBar显示出来。
//进入时隐藏TabBar
onLoad(){
wx.hideTabBar();
},
//离开时显示TabBar
onHide(){
wx.showTabBar();
}
