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

## 概述

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

## 封装的函数

### 1. `wxPhoneLogin` - 核心登录函数

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

```typescript
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` 的处理函数。

## 使用方式

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

```typescript
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>
  );
};
```

### 方式二：使用工具类

```typescript
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>
  );
};
```

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

```typescript
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` - 微信登录页面

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