一、官方文档背景：

这个图一定要认真去看，一步一步来，不要着急

小程序登录的链接:

.

.

二、微信小程序授权登录+获取手机号

1、简单说明官方文档的操作：先授权登录后拿手机号

（1）前端调用wx.login接口拿到获取临时登录凭证code，并回传到后端 （2）后端利用auth.code2Session接口，换取 用户唯一标识OpenID和 会话密钥 session_key （3）前端点击按钮时触发getPhoneNumber(e)回传给后端 encryptedData和iv 加密数据解密算法 （4）后端利用从前端得到的session_key、加密数据解密算法和自己拿到的app_id进行解密手机号后回传给前端

2、前端代码：

（1）自定义util.js,替换util的原生utils.js(其实原生也可以用，按个人喜好）

（2）login.wxml

附：样式图片

（3）login.wxss

.header {
          
   
  margin: 90rpx 0 90rpx 50rpx;
  text-align: center;
  width: 650rpx;
  height: 300rpx;
  line-height: 450rpx;
}

.header image {
          
   
  width: 200rpx;
  height: 200rpx;
  border-radius: 100rpx;
}

.content {
          
   
  margin-left: 50rpx;
  margin-bottom: 90rpx;
}

.content text {
          
   
  display: block;
  color: #9d9d9d;
  margin-top: 40rpx;
}

.bottom {
          
   
  border-radius: 80rpx;
  margin: 70rpx 50rpx;
  font-size: 35rpx;
}

（4）login.json

{
          
   
  "usingComponents": {
          
   },
  "navigationBarTitleText":"授权登录"
}

（5）login.js

import requestUrl from ../../utils/util.js
// 获取应用实例
const app = getApp()

Page({
          
   
    data: {
          
   
        //判断小程序的API，回调，参数，组件等是否在当前版本可用。
        canIUse: wx.canIUse(button.open-type.getUserInfo),
        openid: null,
        sessionkey:null,
        token: null,
        phonenumber:null
    },
    onLoad: function (options) {
          
   
    //登录
        wx.login({
          
   
            success: res => {
          
   
                // 发送 res.code 到后台换取 openId, sessionKey, unionId
                if (res.code) {
          
   
                    console.log(code, res.code)
                    requestUrl.requestUrl({
          
   
                        url: "wx/getOpenId",
                        params: {
          
   
                            code: res.code
                        },
                        method: GET,
                    }).then((res) => {
          
   
                        this.data.openid = res.data.data.openId
                        this.data.sessionkey = res.data.data.sessionKey
                    }).catch((errorMsg) => {
          
   
                        console.log(errorMsg)
                    })
                }
            }
          })
    },
    //获取手机号
    getPhoneNumber: function (e) {
          
   //点击的“拒绝”或者“允许
        // console.log(e.detail.errMsg)
        // console.log(e.detail.iv)
        // console.log(e.detail.encryptedData)
        if(e.detail.errMsg=="getPhoneNumber:ok"){
          
   //点击了“允许”按钮，
            requestUrl.requestUrl({
          
   
                url:"wx/getPhone",
                params: {
          
   
                    encryptedData: e.detail.encryptedData,
                    iv: e.detail.iv,
                    sessionKey: this.data.sessionkey,
                    openId: this.data.openid
                },
                method:"post",
            }).then((res) => {
          
   //then接收一个参数，是函数，并且会拿到我们在requestUrl中调用resolve时传的参数
                console.log("允许授权了")
                let data = {
          
   
                    token: res.data.data.token,
                    phonenumber: res.data.data.phone,
                    openid: res.data.data.openId,
                    sessionKey: res.data.data.sessionKey
                }
                if(res.data.code==200){
          
   
                    wx.navigateTo({
          
   
                        url: `../index/index?token=${
           
    data.token}&phone=${
           
    data.phonenumber}&openid=${
           
    data.openid}&sessionKey=${
           
    data.sessionKey}`,
                        success: function(res) {
          
   },
                      })
                }
            }).catch((errorMsg) => {
          
   
                console.log(errorMsg)
            })
        }
    }
})

三、以上操作后的页面展示：

附提醒：