uniapp小程序之一键使用手机号登录

目录

前言

前提

postman 第一步

 效果图

总结

添加

后续  补充  （☆）

---

前言

因为要完成微信登录功能，这有两种选择，第一种就是使用微信号，昵称去登录；第二种就是使用手机号登录

前提

要使用手机号登录的前提就是首先，你的appid是企业注册的，其次就是，要让管理微信公众平台appid的管理员把你的微信号添加到项目成员 ，

由于业务的需求，我这边目前只能选择使用 手机号登录，查看官方文档 

可知要使用 getPhoneNumber  

但前提是要 获取 code

我们现在postman里面发送请求，看看结果

postman 第一步

网址

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

获取接口调用凭证 getAccessToken

 appid： 跟  

 下面这张图，相信大家看着也会 ，然后点击 send 获取到token

上面既然能获取到token了，那下面我们就获取手机号 

网址   

https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN

---

 手机号  getPhoneNumber

 这里的code的获取就是

 <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">一键登录</button>
 
 
// 上面定义一个button事件,官网说,获取手机号只能通过定义button事件
 
 
 
// 在methods中定义
 
 onGetPhoneNumber(e) {
        if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权  
          //拒绝授权后弹出一些提示  
        } else { //允许授权
          console.log(e);
        }
        
    }

 e打印出来的结果就是：

 效果图

总结

只要使用公司注册，认证好的 appid 以及把自己的微信加入 项目成员，加入成功后吗，还有让管理员开始获取手机的设置，就可以了，就这么简单

添加

代码     后续 看 后续补充代码

  <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
        一键登录
      </button>
 
 
export default {
 
    
    methods：{
         
       // 手机号
      async onGetPhoneNumber(e) {
        console.log(e, '打印手机号信息');
        if (e.detail.errMsg == "getPhoneNumber:ok") {
          this.errMsg = e.detail.errMsg
          const {
            data: {
              obj,
              resCode
            }
          } = await uni.$http.post('/uniapp/member/wechatLogin', {
            code: e.detail.code
          })
          console.log('手机号的token:', resCode, obj.memberToken, '手机号');
          // this.updateToken(obj.memberToken) 存token 
          if ('00100000' !== resCode) return uni.$showMsg()
        }
      }    
       
     
    }
 
}

后续  补充

完整代码

js文件   因为后续 支付 需要使用到 code 因此封装了一个方法

function code() {
  let codePay = new Promise((resolve, reject) => {
    uni.login({
      provider: 'weixin',
      success: res => {
        resolve(res.code)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
  return codePay
}
 
 
module.exports = {
  code
}

<template>
  <view>
    <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
      一键登录
    </button>
  </view>
 
</template>
 
<script>
  import {
    code
  } from '@/common/userInfo.js'
  export default {
    name: "my-login",
    data() {
      return {
    //  code: '',
        errMsg: '',
        appid: '',
      };
    },
    // async mounted() {
    //  this.code = await code().then(data => {
    //    return data
    //  })
    //  console.log(this.code, '一进来就获取code');
    // },
    methods: {
      // 手机号
      async onGetPhoneNumber(e) {
        let accountInfo = uni.getAccountInfoSync();
        this.appid = accountInfo.miniProgram.appId; // 小程序 appId
        console.log(this.appid);
        if (e.detail.errMsg == "getPhoneNumber:ok") {
           
           let code = await code().then(data => {
                return data
              })
          this.errMsg = e.detail.errMsg
          const {
            data: {
              obj,
              resCode
            }
          } = await uni.$http.post('/uniapp/member/wechatLogin', {
            code: e.detail.code,
            appId: this.appid,
            // openIdCode: this.code
            openIdCode: code
          })
          console.log('wechatLogin 一键手机号登录 手机号的token:', resCode);
          // this.updateToken(obj.memberToken)
          if ('00100000' !== resCode) return uni.$showMsg('登录失败')
        }
      }
    }
  }
</script>
 
<style lang="scss" scoped>
  // background-color: #030917;
  .login-btn {
    position: fixed;
    bottom: 10%;
    width: 510rpx;
    margin: 0 118rpx 0 122rpx;
    background-color: #427cb2;
    color: #fff;
  }
</style>

 注意

在 mounted中获取 code 有 bug

若当前用户在登录页 并未点击 登录

则时间超过10分钟后 code会过期 此时 点击会报 微信授权失败

因此 就在用户点击同意后 获取code