微信小程序-手机号登录功能实现

再当今移动互联网时代，微信小程序因其便捷性和广泛的用户基础，成为了许多应用的重要入口。那么如何实现快捷手机号登录功能呢？请看下文，这里用uniapp和express演示：

第一步：微信小程序端定义一个登录的按钮，并定义开放类型为获取手机号码（open-type="getPhoneNumber"），通过回调@getphonenumber获取encryptedData和iv，然后将你的登录凭证code，一起发送至后端进行手机号解密。

  <!-- 小程序端授权登录 -->
<template>
      <button class="button phone" open-type="getPhoneNumber" @getphonenumber="onGetphonenumber">
        <text class="icon icon-phone"></text>
        手机号快捷登录
      </button>
</template>


<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 获取code登录凭证
let code = ref()
onLoad(async () => {
  const res = await wx.login()
  code.value = res.code
})

// 获取用户手机号码
const onGetphonenumber = async (ev) => {
  consol