uniapp中微信小程序一键获取手机号登录

这是关于uniapp实现微信小程序的一键获取手机号登录流程

1、首先必须将 button 的 open-type属性设置为 'getPhoneNumber',然后监听并调用@getphonenumber 事件,才能实现授权登录

2、最为重要的一点是 关于code(登录凭证)获取,code获取最好放到onLoad函数里,不能放在getphonenumber事件里,因为有可能获取不到,需要调用 uni.login()或wx.login()方法获取

3、监听getphonenumber事件,当用户点击登录按钮时,会调用,同时获取的两个登录参数encryptedData 和 iv 这两个是加密的东西,交给后端,让后端解密出手机号,并返回给我们前端

4、此时已经获得了三个登录必须的参数 code , encryptedData , iv ,然后调用约定好的登录api即可实现手机号一键登录

5、如果用户点击了拒绝,则判断里面的errMsg即可

参考代码如下

如有需要请负责粘贴:

html的代码

<button class="button phone" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">

        <text class="icon icon-phone"></text>

        手机号快捷登录

      </button>

js的代码

//登录

  const useMember = useMemberStore()

  const pages = getCurrentPages()

  // 获取登录数据

  let code = ''

  const getLoginData = async () => {

    const res = await uni.login()

    code = res.code

  }

  const onGetPhoneNumber: UniHelper.ButtonOnGetphonenumber = async (e) => {

    if (!e.detail.errMsg?.endsWith('ok')) {

      // 用户取消授权

      console.log('取消了授权')

      return

    }

    const res = await postLoginWxMinAPI({

      code,

      encryptedData: e.detail.encryptedData,

      iv: e.detail.iv,

    })

    useMember.setProfile(res.data)

    // 1.提示用户登录成功

    uni.showToast({

      title: '登录成功',

      icon: 'success',

    })

    setTimeout(() => {

      uni.switchTab({

        url: `/${pages[0].route}`,

      })

    }, 1000)

  }

  onLoad(() => {

    getLoginData()

  })