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： 跟  

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

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

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

网址   

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

---

 手机号  getPhoneNumber

 这里的code的获取就是

 一键登录


// 上面定义一个button事件,官网说,获取手机号只能通过定义button事件



// 在methods中定义

 onGetPhoneNumber(e) {
        if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权  
          //拒绝授权后弹出一些提示  
        } else { //允许授权
          console.log(e);
        }
        
    }

 e打印出来的结果就是：

 效果图

总结

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

添加

代码     后续 看 后续补充代码

  
        一键登录
      


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
}