（二）、微信小程序实现登录获取用户授权信息，并绑定当前微信账号（包含云开发相关配置)，强制用户授权获取信息设置

不管是小程序还是网站，登录页面都是用户进入系统程序的第一步，以下是本人在毕设过程中所做的登录页面以及利用微信云开发实现用户登录授权信息的相关过程。
1、登录页面的设计
我的登录页面开始设置的时候还没有了解到有vant组件的存在，所以全是手写各种样式，当我发现vant组件库之后真的是“相见恨晚”（后面有的页面是用这个组件库建的，到时候详细展开）。由于本人的小程序有多种身份，所以在正式输入账号密码进行登录之前会有一个身份的选择，用户选择之后跳转至登录页面。在选择过程中，会绑定一个id用来验证身份。

以下代码中我有部分的删减仅供参考使用，和上面提供的截图会有所不同，各位大佬按照自己的想法运用美学理论进行设计。
wxml代码：

<view class="welcome-container">
 <view class="moto-container">
   <text class="moto" catchtap="onTap" data-user-postId="1">我是普通用户</text>
   <text class="moto" catchtap="onTap" data-user-postId="2">我是维修员</text>
   <text class="moto" catchtap="onTap" data-user-postId="3">我是管理员</text>
   <text class="moto" catchtap="register" data-user-postId="4">注册用户</text>
 </view>
</view>

wxss代码：

/* flex布局 弹性盒子模型 */
.welcome-container{
display:flex;
flex-direction: column;
align-items: center;
background-color: #b3d4db;
}

page{
  height:100%;
  background-color: #b3d4db;
}

.moto{
  font-size: 22rpx;
  font-weight: bold;
  font-family: MicroSoft Yahei;
  line-height: 80rpx;
  color:#405f80;
  border:1px solid #405f80;
  display: block;
  border-radius: 5px;/* 让矩形有圆弧角 */
  margin-top: 20rpx;
}

.moto-container{
  margin-top:150rpx;
  width:200rpx; 
  text-align: center;
}

js代码：

// pages/welcome/welcome.js
Page({

  onTap: function (event) {
    // console.log(event.currentTarget.dataset.userPostid);
    //这个是我在wxml页面上设置的id用来进行身份识别
    wx.navigateTo({
      url: '../test/test?id=' + event.currentTarget.dataset.userPostid,
    })
    // wx.redirectTo({

  },
  register() {
    wx.navigateTo({
      url: '/pages/register/register'
    })
  }
})

2、真正的登录页面

具体实现代码比较简单，就不在这里占用地方了

3、用户验证登录成功之后跳转到程序主页面，这是因为还没有绑定个人信息，程序会自动跳转至绑定信息的页面，强制要求用户进行授权获取信息。
wxml代码：

<view class="userinfo">
  <button wx:if="{{!userInfo.openid}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="userinfo-btn"> 点击微信授权 </button>
  <block wx:else>
    <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </block>
</view>

wxss代码：

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  background:  #14aaf0;
   width: 100%; 
  height: 300rpx;
}
.userinfo-btn{
  margin-top: 50rpx;
  background: none !important;
  color: #fff !important;
  font-size: 40rpx;
}
.userinfo-avatar {
  width: 108rpx;
  height: 108rpx;
  margin: 40rpx;
  border-radius: 50%;
}
.userinfo-nickname {
  color: #fff;
}

js代码：

var app = getApp()
const db = wx.cloud.database()
const userinfoList = db.collection('user') 
Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    userlists:[]
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
          })
        }
      })
    }
    // console.log(app.globalData.userInfo.openid)
    let isfirst = wx.getStorageSync('userInfo')
    if(isfirst){
      userinfoList.where({
        _openid: app.globalData.userInfo.openid
      }).get({
        success: res => {
          this.setData({
            userlists: res.data[0],
          })
        }
      })
    }

  },
  getUserInfo: function (e) {
  //这里调用云函数返回所需的openid
    wx.cloud.callFunction({
    //这个就是云函数的名字，要保持好一致
      name:'Login',
      success:res=>{
          //需要openid
        console.log(res.result.wxInfo.OPENID)
        e.detail.userInfo.openid = res.result.wxInfo.OPENID
        app.globalData.userInfo = e.detail.userInfo
        this.setData({
          userInfo: e.detail.userInfo
        })
        //缓存userInfo用来验证是否已经成功获取授权信息
        wx.setStorageSync('userInfo', e.detail.userInfo)
        userinfoList.where({
          _openid: e.detail.userInfo.openid
        }).get({
          success: res => {
            this.setData({
              userlists: res.data[0],
            })
          }
        })
      }
    })


  }
})

相关云函数代码及验证是否已经获取授权信息的代码如下：

云函数代码：
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxInfo = cloud.getWXContext()

  return {
    wxInfo
  }
}
其他页面监听是否已经获取授权信息代码：
  onShow: function () {
    let userOpenId = wx.getStorageSync('userInfo')
    if (!userOpenId) {
      wx.showToast({
        title: '您还未授权,请先授权~',
        icon: 'none'
      })
//设置自动跳转
      setTimeout(() => {
        wx.switchTab({
          url: '../user-info/user-info',
        })
      }, 1500)
    } else {
      // console.log(userOpenId)
    }
  }

以上就是我的程序中有关登录和授权信息的所有资料，希望能对你们有所帮助，望各位不要直接粘贴复制，添加些自己的东西。
补：因为当时自己在做的时候有关云开发的博客比较少，为了在无所不知的博客里奉献上自己的一点力量，决定把自己的毕设的相关代码记录下来方便自己以后回顾温习，也希望自己当时一直找不到想要的资料的心情不在你们身上发生。