微信小程序(1)-用户头像-昵称的获取及其UI设计

要做出来的样式如下

1-用户-User设计

1. user.js（该处代码为小程序的逻辑页面，就是说我们所编写的处理问题的函数就写在这里）
   userinfo：我们命名对的自变量，代表用户信息。
   onShow：就是要在页面展示并设置（ this.setData({userinfo})）我们所获取（const userinfo=wx.getStorageSync(“userinfo”)）的用户信息的缓存。

Page({
  data: {
    userinfo:{}
  },
  onShow(){
    const userinfo=wx.getStorageSync("userinfo");
    this.setData({userinfo})
  }
})

2. user.json（页面设置，比如说页面的标题，标题字体大小颜色等）
   因为user.json继承app.json，所以代码为

{}

3. user.wxml（小程序的页面组件设置，我们开始所看见的用户信息就是通过这个来设置）
   user_bg：我们自己定义的用户的包含头像，昵称，登录的整个页面。通过view class=“”来定义。
   user_on：我们自己定义的获取用户信息之后的页面。通过view class=“”来定义。
   user_img：我们自己定义的获取用户信息之后的头像页面。通过view class=“”来定义。
   user_info：我自己定义的获取用户信息之后的昵称页面。通过view class=“”来定义。
   user_un：我们自己定义的未获取用户信息时所存在的登录页面。通过view class=“”来定义。
   wx:if：类似编译语言中的条件判断语句。
   wx:else：类似编译语言中的条件判断语句。
   userinfo.avatarUrl：获取用户的头像所定义的自变量。
   userinfo.nickName：获取用户昵称所定义的自变量。
   navigator：超链接，用于登录页面的跳转。

<view class="user_bg">
 <view wx:if="{{userinfo.avatarUrl}}" class="user_on">
   <view class="user_img">
     <image src="{{userinfo.avatarUrl}}"></image>
   </view>
   <view class="user_info">
     <text>{{userinfo.nickName}}</text>
   </view>
 </view>
 <view wx:else class="user_un">
   <navigator url="/pages/login/login">登录</navigator>
 </view>
</view>

4. user.wxss（当我们设置好用户界面组件后，通过这个来调整用户组件的大小，颜色，距离等）

.user_bg{
  height: 150rpx;
  display: flex;
  align-items: center;
}
.user_on{
  height: 150rpx;
  display: flex;
  align-items: center;
}
.user_info{
  align-items: center;
}
image{
  width: 125rpx;
  height: 125rpx;
  border-radius: 50%;
  margin-left: 45rpx;
  margin-top: 20rpx;
}
text{
  font-size: 50rpx;
  padding-left: 30rpx;
}
.user_un{
  position: absolute;
  left: 45%;
  border: 1rpx solid green;
  border-radius: 10rpx;
  font-size: 50rpx;
}

以上我们就设计好了开始图片中的用户头像和昵称界面

2-用户-信息获取

1. login.js

   handleGetUserInfo：login.wxml中设置的，指示获取用户信息的功能。
   console.log(e)：获取用户信息。
   const { userInfo } = e.detail：将获取到的用户信息赋值给userinfo。
   wx.setStorageSync(“userinfo”, userInfo)： 将获取到的信息存到缓存中，以便于user页面可以获取缓存。
   wx.navigateBack({
   delta: 1
   })：当获取完信息后，返回第一个User页面。

Page({
  handleGetUserInfo(e) {
    //console.log(e);
    const { userInfo } = e.detail;
    wx.setStorageSync("userinfo", userInfo);
    wx.navigateBack({
      delta: 1
    });
  }
})

2. login.json
   页面默认继承app.json，但任然要加上{}

{}

3. login.wxml
   button：按钮组件，plain表示按钮透明，type为按钮的样式类型，我们设置为绿色，open-type表示点击按钮触发什么功能，这里为获取用户信息，bindgetuserinfo表示用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效。

<view class="user_bg">
<button plain type="primary"  open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">登录</button>
</view>

4. login.wxss

.user_bg{
  widows: 30rpx;
  height: 125rpx;
  display: flex; 
  align-items: center;
}

3-用户-最终完成的页面

1. 未获取用户信息的页面
   
2. 登录页面
   
3. 获取信息请求页面
   
4. 成功页面
   

最后-tips

更多的信息大家可以通过微信开放文档去查询，了解，以上页面也存在很多不足，欢迎大家提出问题，以便改正。