uniapp之一键使用手机号登录持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第24天，点击查看

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第24天，点击查看活动详情

前言

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

前提

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

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

可知要使用 getPhoneNumber

但前提是要获取 code

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

postman 第一步

网址

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

获取接口调用凭证 getAccessToken

appid：跟


AppSecret(小程序密钥) 就不需要给大家介绍了吧

下面这张图，相信大家看着也会，然后点击 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()
        }
      }    
       
     
    }

}