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中去配置
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==》现在获取用户权限，只能够通过按钮的方式来操作(重要)
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。
