【微信小程序独立开发2】授权登录上

前言：这一节设想完成的功能为进入小程序后请求授权信息，用户授权登录后，弹出宠物登记页面，并根据宠物类型播放背景音乐

小程序昵称头像在之前的版本获取规则为触发后弹出用户授权弹窗，授权后可直接获取用户头像和昵称，但是在2.27.1版本后，小程序收回了wx.getUserProfile接口，通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。

当前版本为3.31，这里使用新版推荐方式获取用户数据，也可降级到2.27.1版本前，使用之前的接口。

1、编写底部tabBar页面

拟设置三个tabBar，分别为记录，成长，Ta的

首先创建Icons文件夹，用于保存tabBar图片

1、从iconfont中选取几个图标来充当tabBar图标，每个图标各选择两组，分别为选中和未选中

iconfont-阿里巴巴矢量图标库

2、在app.json中添加页面

3、添加tabBar

在app.json中添加

"tabBar": {"color": "#999","selectedColor": "#FF5700","backgroundColor": "#fafafa","list": [{"pagePath": "pages/record/record","text": "记录","iconPath": "./icons/1.png","selectedIconPath": "./icons/3.png"},{"pagePath": "pages/grow/grow","text": "成长点滴","iconPath": "./icons/6.png","selectedIconPath": "./icons/5.png"},{"pagePath": "pages/Ta/Ta","text": "Ta的","iconPath": "./icons/2.png","selectedIconPath": "./icons/4.png"}]},

此时页面效果

2、编写Ta的页面

页面未登录时，显示默认头像和默认昵称，点击编辑个人信息后，显示个人信息编辑页面

头像可选择使用微信头像或者从相册上传头像，昵称同上

首先编写一个简单的展示页面，未登录时，头像，昵称和ID显示默认值

<!--pages/Ta/Ta.wxml-->
<view class="pet_wrapper"><!-- 用户信息 --><view class="user_info_wrapper"><view class="user_info"><image src="{{avatarUrl}}" mode="widthFix"/><view class="user"><view class="user_id">ID:{{userId}}</view><view class="user_name">{{nickName}}</view></view><button class="edit_user_info" bind:tap="editUserInfo">编辑个人信息</button></view></view><!-- 功能栏 -->
</view>

// pages/Ta/Ta.js
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
const defaultNickName = "铲屎官"
const defaultUserId = "001"
Page({/*** 页面的初始数据*/data: {avatarUrl: defaultAvatarUrl,nickName: defaultNickName,userId: defaultUserId},/*** 生命周期函数--监听页面加载*/onLoad(options) {},editUserInfo(){wx.navigateTo({url: '/pages/userInfo/userInfo',})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

/* pages/Ta/Ta.wxss */
.pet_wrapper{.user_info_wrapper{.user_info{display: flex;margin: 20rpx;image{flex: 1;width: 30rpx;height: 30rpx;border-radius: 100%;}.user{flex: 2;display: flex;flex-direction: column;width: 80rpx;height: 100rpx;margin-left: 30rpx;.user_id{flex: 2;font-size: 28rpx;}.user_name{flex: 1;font-size: 28rpx;}}button{flex: 1;width: 80rpx;height: 60rpx;background-color: #fff;justify-content: center;font-size: 25rpx;}}}
}

给button绑定事件，当点击按钮时，跳转到个人信息编辑页

在app.json中添加userInfo

设置userInfo页面的顶部导航栏名称

基本页面仿照宠本本小程序进行编写

<!--pages/userInfo/userInfo.wxml-->
<view class="edit_userInfo_wrap"><!-- 用户头像 --><view class="user_avatar_wrap"><image src="{{userInfo.avatarUrl}}"  mode="widthFix"/></view><!-- 用户基本信息 --><view class="user_info_wrap"><!-- 昵称设置 --><view class="user_name_wrap"><view class="user_name" ><text>铲屎官昵称</text><navigator url="/pages/editNickName/editNickName">{{userInfo.nickName}}</navigator> </view></view><!-- 基本信息设置 --><view class="edit_user_info_wrap"><view class="user_birthday"><text>生日</text></view><view class="user_sex"><text>性别</text></view><view class="user_address"><text>地区</text></view></view><!-- 手机号设置 --><view class="phone_wrap"><view class="userId_wrap"><text>ID</text><view class="user_id">{{userInfo.userId}}</view></view><view class="user_telPhone"><text>手机号</text>{{userInfo.telPhone}}</view></view></view><!-- 保存按钮 --><view class="save_button"><button >保存编辑</button></view>
</view>

/* pages/userInfo/userInfo.wxss */
page{background-color: #f5f5ed;
}
.edit_userInfo_wrap{display: flex;flex-direction: column;height: 100vh;.user_avatar_wrap{flex: 1;display: flex;align-items: center;justify-content: center;margin-top: 20rpx;image{border:2rpx solid white;width: 150rpx;height: 150rpx;border-radius: 100%;}}.user_info_wrap{flex: 6;line-height: 100rpx;margin: 20rpx 50rpx 50rpx 50rpx;font-size: 26rpx;.user_name_wrap{background-color: #fff;border-radius: 25rpx;.user_name{margin: 30rpx;display: flex;text{flex: 1;color: #615839;font-size: 30rpx;}navigator{}}}.edit_user_info_wrap{background-color: #fff;border-radius: 25rpx;.user_birthday{text{color: #615839;font-size: 30rpx;}margin: 30rpx;border-bottom: 1rpx solid #f5f5ed;}.user_sex{text{color: #615839;font-size: 30rpx;}margin: 30rpx;border-bottom: 1rpx solid #f5f5ed;}.user_address{text{color: #615839;font-size: 30rpx;}margin: 30rpx;}}.phone_wrap{background-color: #fff;border-radius: 25rpx;.userId_wrap{display: flex;margin: 30rpx;border-bottom: 1rpx solid #f5f5ed;text{flex: 1;color: #615839;font-size: 30rpx;}.user_id{}}.user_telPhone{text{color: #615839;font-size: 30rpx;}margin: 30rpx;}}}.save_button{flex: 1;border-radius: 40rpx 40rpx 0 0 ;background-color: #fff;button{margin-top: 15rpx;width: 80%;border-radius: 30rpx;font-size: 28rpx;font-weight: 600;background-color: #fee05a;}}
}

此时的页面效果：