07设置用户头像的大小授权获取用户的信息缓存

原创

朦胧淡月 2022-09-01 17:50:02 博主文章分类：微信小程序 ©著作权

©著作权归作者所有：来自51CTO博客作者朦胧淡月的原创作品，请联系作者获取转载授权，否则将追究法律责任

1==》当且这个页面是粉红色的
page是当前这个页面的最大容器
page{
  background: pink;
}

2===》 如何设置用户头像的大小 而且是圆形
open-data是开放能力中的 在组件中

type="userAvatarUrl" 可以直接获取用户头像
userNickName  可以获取用户昵称
userGender    用户性别

<view class='box'>
   <open-data type="userAvatarUrl" class="user-ava"></open-data>
   <open-data type="userNickName"></open-data>
    //但是没有获取到省份 和城市 和 性别
   <open-data type="userProvince"></open-data>
   <open-data type="userCity"></open-data>
   <open-data type="userGender" lang="zh_CN"></open-data>
</view>

给外层一个盒子
.box{
  width: 100%;
  height: 200rpx;
}

.user-ava{
  width:160rpx;
  height:160rpx;
  display: block; //必须转为块级元素  否者设置宽高没有用  
  background-size: 100%;
  border-radius:50%;
  overflow: hidden; //将它变为圆形头像  必须值
  margin: 20rpx auto; //居中
}

3===》 全局样似在app.wxss中去配置

07设置用户头像的大小授权获取用户的信息缓存_微信

4===》水平居中 align-items: center;    justify-content: center;

<view class='box'>
    <open-data type="userAvatarUrl" class="user-ava"></open-data>
    <open-data type="userNickName"></open-data>
</view>

.box{
  width: 100%;
  height: 200rpx;
  display: flex;
  flex-direction: row; /*排在同一行 */

  /* 水平居中 */
  align-items: center;
  justify-content: center;
  /* end */
}

注意例三和例四的结合使用；例三是圆的讲解，例四是水平居中的讲解。

5===》wx.getUserInfo(Object object) 获取用户的信息
通过点击按钮在js拿到用户信息

<button open-type='getUserInfo' type='primary' bindgetuserinfo="mybindGetUserInfo">获取用户的权限</button>

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   wx.getUserInfo({
     success: function (res) {
      console.log("用户数据",res)
     }
   })
  },

 
如果用户没有授权  你在js是不可以获取到用户信息的 只有通过标签<open-data></open-data>
一旦用户授权了，你就可以在任何的页面 拿到用户的权限


7==》现在获取用户权限，只能够通过按钮的方式来操作(重要)

07设置用户头像的大小授权获取用户的信息缓存_缓存_02

8==> 缓存  B页面可以获取A页面中的值
A页面
   wx.setStorage({
         key: "username",
        data: "我是A中的值"
      })


B页面
    // 读取缓存
    wx.getStorage({
      key: 'username',
      success(res) {
        console.log("读取我的页面的缓存",res.data)
      }
    })


wx.setStorage(Object object)
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，
否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。