微信小程序(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})
}
})

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

{}

1. 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>

1. 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
});
}
})

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

{}

1. 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>

1. login.wxss

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

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

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

最后-tips

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

• 点赞
• 收藏
• 分享
• 文章举报