web学习笔记（七十九）

目录

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;
  m

4.如何实现进入页面就隐藏TabBar 

我们可以在onLoad或者onShow生命周期内设置wx.hideTabBar()；来实现进入页面隐藏TabBar 的效果。然后离开时在将TabBar显示出来。

//进入时隐藏TabBar
onLoad(){
    wx.hideTabBar();
  },
//离开时显示TabBar
onHide(){
    wx.showTabBar();
  }