【uniapp开发小程序】点击获取手机号（使用@getphonenumber）

最新推荐文章于 2025-06-12 10:57:06 发布

小跳不会Coding

最新推荐文章于 2025-06-12 10:57:06 发布

阅读量6.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： uni-app 小程序前端

本文链接：https://blog.csdn.net/weixin_48596030/article/details/131479881

该代码示例展示了如何在Vue.js应用中，通过模板结构和方法处理用户手机号的获取。当用户点击按钮，应用调用getPhoneNumber方法获取电话号码，然后通过API发送请求，成功后将手机号存储到本地存储中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、实现效果
在这里插入图片描述
二、代码实现：

<template>
	<view>
		<view class="shopadd" v-if="info.mobile">{{info.mobile}}</view>
		<button class="getNumber" v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">点击获取手机号</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {}, //个人信息
			}
		},
		methods: {
			// 获取手机号
			getPhoneNumber(e) {
				console.log(e)
				var that = this;
				if (e.detail.code) {
					this.$api.appPlateForm('POST', this.$url.getPhoneNumber, {
						code: e.detail.code,
					}, function(res) {
						if (res.code == '200') {
							uni.setStorageSync('getPhone',res.data.phone)
							console.log('打印获取的手机号',uni.getStorageSync('getPhone'))
							that.info.mobile = res.data.phone
						}
					})
				}else{
					
				}
			},
		}
	}
</script>