封版手机一键登录

2025-07-31 09:56:35 +08:00
parent 024e04041c
commit 57cd79ea38
2 changed files with 257 additions and 0 deletions
--- a/docs/wxLogin-usage.md
+++ b/docs/wxLogin-usage.md
@@ -0,0 +1,163 @@
+# 微信登录函数封装使用说明
+
+## 概述
+
+我们已经将微信小程序手机号登录功能封装成了可复用的函数，提供了更好的错误处理、配置选项和代码复用性。
+
+## 封装的函数
+
+### 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` - 微信登录页面
+
+其他需要登录功能的组件可以参考上述使用方式进行更新。