uni-app10行代码实现手机号一键登录全流程代码（包含前后端代码）

为了实现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)
  }
}

后端处理流程简述

1. 后端接收前端传来的code，使用AppID和AppSecret调用微信接口auth.code2Session换取session_key和openid。
2. 成功获取openid后，可以创建或查找对应的用户记录，生成token并返回给前端。
3. 手机号解密接口：后端接收到encryptedData和iv后，使用之前换取到的session_key解密手机号，并返回解密后的手机号给前端。

注意事项

• 确保后端有相应的逻辑处理这些请求，包括与微信服务器的交互逻辑和手机号的解密逻辑。
• 用户隐私保护：获取用户信息和手机号时，务必明确告知用户目的，遵循相关法律法规。
• 以上代码为简化示例，实际应用中可能需要添加错误处理、权限控制等逻辑。

按照上述步骤，你可以在uni-app中实现基本的微信登录流程，并进一步扩展以实现手机号一键登录功能。