【微信小程序独立开发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;
        }
    }
}

此时的页面效果：

在下节完成头像、昵称、手机号的获取和生日、性别、地区组件的编写，属实写累了0.0