项目场景：

基于vue2的uniapp商城项目中的微信一键登录功能
（后台是node.js写的）
目前文档中该接口针对非个人开发者，所以只能用文档中提供的测试号实现一下功能。

---

问题描述

我在实现微信一键登录的时候，获取手机号总是失败。

---

原因分析：

我浏览的是微信小程序的文档微信小程序开发文档
实现获取手机号需要前后台配合，我自己失败的问题就是，我自己node没学好，不知道在node中发请求也可以用axios。

---

无拆解

(1)前台代码

login.vue页面中

<template>
	<view class="box">
	//button组件
		<button  open-type="getPhoneNumber" @getphonenumber="getphonenumber">微信用户一键登录</button>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	methods: {
		// 微信登录
		getphonenumber(e) {
			let _this = this;
			// console.log('e', e);
			
			//  1.发请求
			uni.request({
				url: 'http://localhost:3000/api/getNewPhone',//这个地址是你自己的
				method: 'POST',
				data: {
					code: e.detail.code
				},
				success(res) {
					console.log('res', res);
				
				
				// 2.请求成功后
				
					//从后台获取到手机号后，调用登录接口，实现登录，并将数据存储在本地中，跳转到首页 
					_this.action_smslogin({ phone: res.data.phoneNumber }).then(val => {
						uni.setStorageSync('user', val);
						uni.switchTab({
							url: '/pages/index/index'
						});
					});
				}
			});
		},
		...mapActions({
			action_smslogin: 'textlogin/action_smslogin' 
		})
	}
};
</script>

<style>
/* 导入外部的样式文件 */
@import url('@/static/css/login.css');
</style>

(2)后台代码

node后台的login.js(你自己实现点击按钮的js文件里面）

//切记要装 npm i axios   ,要不然后面发不了请求，得不到access_token
const axios = require('axios')
// 接收code
router.post('/getNewPhone', async (req, res) => {
	// 获取code
	let {
		code
	} = req.body
	// 获取access_token
	const grant_type = 'client_credential'
	const appid = 'wx。。。。。。'//用你自己测试号的
	const secret = 'ed。。。。。。。。。。。。'//用你自己测试号的
	const url =
		`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`
	let access_token = await axios({
		method: 'get',
		url,
	})
	access_token = access_token.data.access_token

	// 发送请求
	let result = await axios({
		method: 'post',
		url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${access_token}`,
		data: {
			code
		}
	})
	let {
		phoneNumber,
		countryCode
	} = result.data.phone_info
	res.send({
		phoneNumber,
		countryCode
	})
})

拆解版

前台

根据文档的描述

const axios = require('axios')
router.post('/getNewPhone', async (req, res) => {
	// 获取code
	res.send(
	})

(1)前台添加组件

在前台login.vue页面中
添加button组件，加上open-type和@getphonenumber

<template>

		<button open-type="getPhoneNumber" @getphonenumber="getphonenumber">微信用户一键登录</button>

</template>

<script>
export default {
	methods: {
		// 微信登录
		getphonenumber(e) {
				console.log('e',e.detail)
		}
	}
};
</script>

这时候，运行，控制台报错——你的个人账号没有权限

(2)申请测试号

申请测试号=>在小程序里面使用新申请的测试号登录

个人权限报错就解决了，这时候再运行就可以获取到e,detail的信息

// code：作为手机号码换取的
// encryptedData：密文
// iv：加密向量
控制台返回会有这三个信息

(3)前台发请求

<script>
export default {
	methods: {
		// 微信登录
		getphonenumber(e) {
			console.log('e', e);
			
			//  1.发请求
			uni.request({
				url: 'http://localhost:3000/api/getNewPhone',//这个地址是你自己的
				method: 'POST',
				data: {
					code: e.detail.code
				},
				success(res) {
					console.log('res', res);
				}
			});
		}
	}
};
</script>

(4)后台获取code

切换到后台login.js。

const axios = require('axios')
router.post('/getNewPhone', async (req, res) => {
	// 获取code
	let {code} = {req.body}
	res.send({data:'success'})
	})

运行，就会获得返回的code

(4)后台获取access_token

appid和secret都是使用之前申请的测试号的

const axios = require('axios')
router.post('/getNewPhone', async (req, res) => {
	// 获取code
	let {code} = {req.body}

// 获取access_token
	const grant_type = 'client_credential'
	const appid = 'wx。。。。。。'//用你自己测试号的
	const secret = 'ed。。。。。。。。。。。。'//用你自己测试号的
	const url =
		`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`
	let access_token = await axios({
		method: 'get',
		url,
	})
	access_token = access_token.data.access_token

	res.send({data:'success'})
	})

在data里面会有access_token,把它拿出来

(5)后台获取手机号

有了code和access_token就可以获取手机号了

//切记要装 npm i axios   ,要不然后面发不了请求，得不到access_token
const axios = require('axios')
// 接收code
router.post('/getNewPhone', async (req, res) => {
	// 获取code
	let {
		code
	} = req.body
	// 获取access_token
	const grant_type = 'client_credential'
	const appid = 'wx。。。。。。'//用你自己测试号的
	const secret = 'ed。。。。。。。。。。。。'//用你自己测试号的
	const url =
		`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`
	let access_token = await axios({
		method: 'get',
		url,
	})
	access_token = access_token.data.access_token

	// 发送请求
	let result = await axios({
		method: 'post',
		url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${access_token}`,
		data: {
			code
		}
	})
	let {
		phoneNumber,
		countryCode
	} = result.data.phone_info
	res.send({
		phoneNumber,
		countryCode
	})
})

运行就获取到手机号和城市号了

——————————————————————————————

这时候你要用手机号调用接口登录就很简单啦~~~~~

本人小白一枚，如果错误，请各位大佬帮我多多指教，蟹蟹！！！