template-10519/docs/wxLogin-usage.md

微信登录函数封装使用说明

概述

我们已经将微信小程序手机号登录功能封装成了可复用的函数，提供了更好的错误处理、配置选项和代码复用性。

封装的函数

1. wxPhoneLogin - 核心登录函数

位置：src/api/passport/login/index.ts

export async function wxPhoneLogin(
  phoneDetail: { code: string; encryptedData: string; iv: string },
  options?: {
    onSuccess?: (user: any) => void;
    onError?: (error: string) => void;
    showToast?: boolean;
    navigateBack?: boolean;
    tenantId?: number;
  }
)

2. WxLoginUtil - 工具类

位置：src/utils/wxLogin.ts

提供了多种便捷的登录方法：

• handleGetPhoneNumber - 完整的登录处理
• quickLogin - 快速登录（使用默认配置）
• loginWithCallback - 带自定义回调的登录

3. createWxLoginHandler - 工厂函数

创建可直接用于 onGetPhoneNumber 的处理函数。

使用方式

方式一：使用工厂函数（推荐）

import { createWxLoginHandler } from '@/utils/wxLogin';

const MyComponent = () => {
  // 创建登录处理函数
  const handleGetPhoneNumber = createWxLoginHandler({
    onSuccess: (user) => {
      console.log('登录成功:', user);
      // 自定义成功处理逻辑
    },
    onError: (error) => {
      console.error('登录失败:', error);
      // 自定义错误处理逻辑
    },
    showToast: true,
    navigateBack: true,
    tenantId: 10519
  });

  return (
    <Button 
      open-type="getPhoneNumber" 
      onGetPhoneNumber={handleGetPhoneNumber}
    >
      微信登录
    </Button>
  );
};

方式二：使用工具类

import { WxLoginUtil } from '@/utils/wxLogin';

const MyComponent = () => {
  const handleGetPhoneNumber = ({ detail }) => {
    // 快速登录
    WxLoginUtil.quickLogin(detail);
    
    // 或者带自定义回调
    WxLoginUtil.loginWithCallback(detail, (user) => {
      console.log('登录成功:', user);
      // 自定义处理逻辑
    });
  };

  return (
    <Button 
      open-type="getPhoneNumber" 
      onGetPhoneNumber={handleGetPhoneNumber}
    >
      微信登录
    </Button>
  );
};

方式三：直接使用核心函数

import { wxPhoneLogin } from '@/api/passport/login';

const MyComponent = () => {
  const handleGetPhoneNumber = async ({ detail }) => {
    const { code, encryptedData, iv } = detail;
    
    try {
      const user = await wxPhoneLogin(
        { code, encryptedData, iv },
        {
          onSuccess: (user) => {
            console.log('登录成功:', user);
          },
          showToast: true,
          navigateBack: true
        }
      );
      
      // 处理登录成功后的逻辑
      console.log('用户信息:', user);
    } catch (error) {
      console.error('登录失败:', error);
    }
  };

  return (
    <Button 
      open-type="getPhoneNumber" 
      onGetPhoneNumber={handleGetPhoneNumber}
    >
      微信登录
    </Button>
  );
};

配置选项

参数	类型	默认值	说明
onSuccess	(user: any) => void	-	登录成功回调
onError	(error: string) => void	-	登录失败回调
showToast	boolean	true	是否显示提示信息
navigateBack	boolean	true	登录成功后是否返回上一页
tenantId	number	config.TenantId	租户ID

优势

1. 统一的错误处理：封装了网络请求失败、微信登录失败等各种错误情况
2. 灵活的配置：可以根据不同场景配置不同的行为
3. 代码复用：避免在多个组件中重复写相同的登录逻辑
4. 类型安全：提供了完整的 TypeScript 类型定义
5. 易于维护：登录逻辑集中管理，便于后续修改和维护

已更新的文件

以下文件已经使用了新的封装函数：

• src/passport/wxLogin.tsx - 微信登录页面

其他需要登录功能的组件可以参考上述使用方式进行更新。