为了实现uni-app中的手机号一键登录,特别是针对微信小程序环境,我们将分步骤进行,并提供详细的代码示例及解释,确保即便是初次接触小程序开发的用户也能理解和实施。此过程涉及前端(uni-app)与后端的交互,我们将尽量简化说明,使流程清晰易懂。
前提条件
- 已注册并获取微信小程序的AppID。
- 开发环境已安装HBuilderX。
- 后端准备接收并处理登录请求的接口。
第一步:微信登录授权
代码示例
// pages/login/login.js
import { login, request } from '@dcloudio/uni-app'
export default {
async onLogin() {
try {
// 调用微信登录接口获取code
const loginRes = await login()
const code = loginRes.code
// 使用code从后端换取openId等信息
const backendRes = await request({
url: 'https://your-backend-url/login', // 替换为你的后端接口地址
method: 'POST',
data: {
code
}
})
if (backendRes.statusCode === 200 && backendRes.data.success) {
// 登录成功,这里假设后端返回了token
const token = backendRes.data.token
uni.setStorageSync('token', token)
uni.switchTab({
url: '/pages/index/index'
})
} else {
uni.showToast({
title: '登录失败,请重试',
icon: 'none'
})
}
} catch (err) {
console.error('登录异常', err)
uni.showToast({
title: '网络错误,请检查网络',
icon: 'none'
})
}
}
}
第二步:请求用户授权获取手机号
在微信小程序中,获取用户手机号需要用户主动授权,并通过wx.requestPhoneNumber
接口来实现。但要注意,此步骤通常在用户已有初步登录状态后(如上一步获取openid后),根据业务需求选择性调用。
代码示例
async requestPhoneAuth() {
try {
// 弹窗请求用户授权获取手机号
const phoneRes = await uni.showModal({
title: '授权获取手机号',
content: '需要您的授权才能继续',
confirmText: '授权',
cancelText: '取消'
})
if (phoneRes.confirm) {
// 用户确认授权,调用requestPhoneNumber
const phoneNumberRes = await uni.getPhoneNumber({
success: (res) => {
const encryptedData = res.encryptedData
const iv = res.iv
// 将encryptedData和iv发送至后端解密
const backendPhoneRes = await request({
url: 'https://your-backend-url/decryptPhone',
method: 'POST',
data: {
encryptedData,
iv
}
})
if (backendPhoneRes.statusCode === 200 && backendPhoneRes.data.success) {
const phoneNumber = backendPhoneRes.data.phoneNumber
// 保存或更新用户手机号
uni.showToast({
title: `手机号获取成功: ${phoneNumber}`,
icon: 'none'
})
} else {
uni.showToast({
title: '获取手机号失败,请重试',
icon: 'none'
})
}
},
fail: () => {
uni.showToast({
title: '获取手机号授权失败',
icon: 'none'
})
}
})
}
} catch (err) {
console.error('获取手机号异常', err)
}
}
后端处理流程简述
- 后端接收前端传来的code,使用AppID和AppSecret调用微信接口
auth.code2Session
换取session_key和openid。 - 成功获取openid后,可以创建或查找对应的用户记录,生成token并返回给前端。
- 手机号解密接口:后端接收到encryptedData和iv后,使用之前换取到的session_key解密手机号,并返回解密后的手机号给前端。
注意事项
- 确保后端有相应的逻辑处理这些请求,包括与微信服务器的交互逻辑和手机号的解密逻辑。
- 用户隐私保护:获取用户信息和手机号时,务必明确告知用户目的,遵循相关法律法规。
- 以上代码为简化示例,实际应用中可能需要添加错误处理、权限控制等逻辑。
按照上述步骤,你可以在uni-app中实现基本的微信登录流程,并进一步扩展以实现手机号一键登录功能。