微信小程序获取手机号，，加后端SpringBoot接口

原创

已于 2022-08-30 11:21:46 修改 · 1.4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #前端 #java

于 2022-06-11 21:52:58 首次发布

本文详细介绍了如何在微信小程序中使用uniapp的button组件获取用户手机号，并通过前端发送code到后端SpringBoot服务器进行验证。涉及前端的事件监听和axios请求，以及后端的HttpClient工具类和accessToken管理。

微信小程序获取手机号，前端+后端接口

前端uniapp

官方文档

需要将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，通过 @getphonenumber事件回调获取到动态令牌code，然后把code发送给服务器。

<template>
	<view>
		<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">手机号</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			onGetPhoneNumber(e) {
				//用户的code
				let code = e.detail.code;

				wx.request({
					url: "http://localhost:8080/user/getPhone?code=" + code,
					success: function(res) {
						console.log("手机号：", res.data)
					},
					fail: function(err) {
						console.log(err)
					}

				})
			}

		}
	}
</script>

后端springboot

引入依赖

        <!--Http-->
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.5.2</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.20</version>
        </dependency>

        <!--JSON解析-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson&l