目录
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();}
