微信小程序 和 Taro 两种写法，获取手机号实现一键登录

前言

自己在写微信小程序项目的时候因为用到了一键登录的功能，在网上看了很多教程大多是用login()获取code，这个方法其实是不准确的。当时我也用这个方法，但是获取的code是不生效的，得不到用户的手机号。

真正获取手机号对应code的方法是getPhoneNumber，是按钮的内置方法

微信小程序

1.首先先获取手机号对应的code

1. button | 微信开放文档
2. 

2.具体写法

         wxml

 <button type="default" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
 一键登录
 </button>

        js

 getPhoneNumber(e){
      console.log(e.detail,"请求电话回调")
    }

        效果

        到了下面这一步那么恭喜你，说明你请求电话号码的code一起获取成功了

3.根据code请求电话号码

• 获取手机号 | 微信开放文档

    具体内容可以看官方文档，很简单，只需要调用官方接口传两个参数就可以正确返回电话号码

    注意：一个code只能使用一次，并且有效期为5min

• 
•  

Taro写微信小程序

方法和微信小程序大致相同，也是使用taro按钮自动的内置方法,还要taro的配套组件库taro-ui里面的buttton同样有内置的方法，大家感兴趣可以自行查看

1.获取手机号对应的code

• Button | Taro 文档
• 

2.具体写法

• import {  Button } from "@tarojs/components";
  
  export default function Index() {
  
    // 授权获取手机号
    const getPhoneNumber = async (e: any) => {
      console.log(e.detail, "获取手机号回调");
    };
  
  return (
      <View>
           <Button
              type="primary"
              openType="getPhoneNumber"
              onGetPhoneNumber={getPhoneNumber} 
            >
              手机号码一键登录
            </Button>
      </View>
  )

• 

3.根据code请求电话号码

具体方法和上文写的微信小程序的方法相同