164 lines
4.0 KiB
Markdown
164 lines
4.0 KiB
Markdown
# 微信登录函数封装使用说明
|
|
|
|
## 概述
|
|
|
|
我们已经将微信小程序手机号登录功能封装成了可复用的函数，提供了更好的错误处理、配置选项和代码复用性。
|
|
|
|
## 封装的函数
|
|
|
|
### 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` - 微信登录页面
|
|
|
|
其他需要登录功能的组件可以参考上述使用方式进行更新。
|