UniApp实现微信小程序登录与手机号获取全流程

作者：清欢时间：2026-10-31 15:20:19浏览：184

本文详解在UniApp开发微信小程序时，如何配置manifest.json并封装请求API，实现微信授权登录与手机号获取功能。通过封装wxLogin和wechatAppLogin等方法，将用户信息存入后台及前台缓存，确保流程顺畅并方便后续调用。

UniApp微信小程序登录与手机号获取配置

在UniApp框架下开发微信小程序，实现微信登录授权及手机号获取功能。

流程描述：在UniApp开发小程序时，先进行用户信息授权，随后展示手机号授权页面以完成手机号授权。授权完成后返回上一页面，并将相关信息存入后台服务器及前台缓存，以便后续使用。

配置manifest.json与封装请求API

第一步：在UniApp项目的manifest.json文件中进行微信小程序的相关配置。

UniApp微信小程序登录与手机号获取配置

第二步：封装通用的request请求接口api.js（若项目中已包含此封装，可跳过此步骤）。

封装微信授权与手机号获取逻辑

const BASE_URL = 'xxxxxxxxxxxxxxxxxxxxx';
import func from '@/config/func.js'; 
export const myRequest = (url, method, data = {}, header = {}) => {
	func.loading('正在加载中...')
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + url,
			method: method || 'GET',
			header: {
				'content-type': 'application/x-www-form-urlencoded'
			} || header,
			data: data || {},
			success: (res) => {
				uni.hideLoading();
				let code = res.data.code;
				if (code == 1) {
					resolve(res.data.data)
				} else {
					func.alert(res.data.msg)
				}
			},
			fail: (err) => {
				uni.showToast({
					title: '请求接口失败',
					icon: 'none'
				})
				reject(err)
			}
		})
	})
}

第三步：封装微信授权登录及获取手机号的逻辑，并将用户数据提交至后台服务器。

import {
	myRequest
} from '@/config/api.js';
// uni.login()封装
const wxLogin = function(openid) {
	return new Promise((resolve, reject) => {
		uni.login({
			success(res) {
				if (res.code) {
					resolve(res.code)
				} else {
					reject(res.errMsg);
				}
			}
		})
	})
}
/*微信小程序登录*/
const wechatAppLogin = function() {
	/*登录提示*/
	loading("正在授权")
	uni.getUserProfile({
		desc: '获取用户授权',
		success: res => {
			let userInfo = res.userInfo;
			wxLogin().then(code => { // 引用uni.login()封装
				myRequest('getOpenid', 'POST', {
						code: code
					}) //获取openid
					.then(function(v) {
						uni.hideLoading();
						uni.setStorageSync("useInfo", res.userInfo);
						uni.setStorageSync("openid", v.openid);
						wx.navigateTo({
							url: '/pages/login/index'
						})
					}, function(error) {
						reject(error);
					})
			})
		}
	})
}
// 获取手机号授权
const getPhoneNumber = function(event) {
	let that = this;
	let code = event.detail.code; //获取手机code
	var promise = new Promise(function(resolve, reject) {
		uni.checkSession({
			success: (res) => {
				myRequest('getPhone', 'POST', {
						code: code
					}) //获取手机号
					.then(function(v) {
						let phone = v.data;
						let useInfo = uni.getStorageSync('useInfo')
						wx.setStorageSync('mobile', mobile)
						resolve(phone);
						myRequest('login', 'POST', {
								openid: uni.getStorageSync('openid'),
								nickname: useInfo.nickName,
								img: useInfo.avatarUrl,
								phone: phone
							}) //传入后台数据
							.then(function(v) {
								uni.navigateBack({
									delta: 1
								})
							}, function(error) {
								reject(error);
							})
					}, function(error) {
						reject(error);
					})
			},
			fail(err) {
				login()
			}
		})
	})
	return promise;
}
module.exports = {
	wechatAppLogin,
	getPhoneNumber
}

第四步：在页面中调用上述封装，以登录页面login.vue为例进行引用。

登录页面login.vue调用示例

<template>
	<view class="">
		<f-navbar title="登录" navbarType='3'></f-navbar>
		<view class="arvImg marCenter marT100 ">
			<image class="imgz " src="/static/images/arv.png" alt=""></image>
		</view>
		<view class="FontCenter fontSize18 marT40 fontBold">
			健身房
		</view>
		<view class="fontSize16 FontCenter marT80">
			申请获取以下权限
		</view>
		<button class="btnBig marT140" @click="getUserInfo" v-if="useInfo == ''">
			微信账号快捷登录
		</button>
		<button class="btnBig marT140" v-else open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" >
			点击获取手机号
		</button>
	</view>
</template>
<script>
	import func from '@/config/func.js';
	export default {
		data() {
			return {
				useInfo:wx.getStorageSync('useInfo')||''
			}
		},
		methods:{
			// 授权登录
			getUserInfo(){
				func.wechatAppLogin()
			},
			// 手机号授权
			onGetPhoneNumber(e){
				func.getPhoneNumber(e)
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>