diff --git a/docs/wxLogin-usage.md b/docs/wxLogin-usage.md new file mode 100644 index 0000000..1b54c3b --- /dev/null +++ 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 ( + + ); +}; +``` + +### 方式二:使用工具类 + +```typescript +import { WxLoginUtil } from '@/utils/wxLogin'; + +const MyComponent = () => { + const handleGetPhoneNumber = ({ detail }) => { + // 快速登录 + WxLoginUtil.quickLogin(detail); + + // 或者带自定义回调 + WxLoginUtil.loginWithCallback(detail, (user) => { + console.log('登录成功:', user); + // 自定义处理逻辑 + }); + }; + + return ( + + ); +}; +``` + +### 方式三:直接使用核心函数 + +```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 ( + + ); +}; +``` + +## 配置选项 + +| 参数 | 类型 | 默认值 | 说明 | +|------|------|--------|------| +| `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` - 微信登录页面 + +其他需要登录功能的组件可以参考上述使用方式进行更新。 diff --git a/src/utils/wxLogin.ts b/src/utils/wxLogin.ts new file mode 100644 index 0000000..3c26647 --- /dev/null +++ b/src/utils/wxLogin.ts @@ -0,0 +1,94 @@ +import { wxPhoneLogin } from '@/api/passport/login'; +import Taro from '@tarojs/taro'; + +/** + * 微信登录工具类 + * 提供便捷的微信登录方法 + */ +export class WxLoginUtil { + /** + * 处理微信授权手机号登录 + * @param detail 微信授权返回的详细信息 + * @param options 登录选项 + */ + static async handleGetPhoneNumber( + detail: any, + options?: { + onSuccess?: (user: any) => void; + onError?: (error: string) => void; + showToast?: boolean; + navigateBack?: boolean; + tenantId?: number; + } + ) { + const { code, encryptedData, iv } = detail; + + if (!code) { + const errorMsg = '用户取消授权'; + if (options?.onError) { + options.onError(errorMsg); + } + if (options?.showToast !== false) { + Taro.showToast({ + title: errorMsg, + icon: 'none' + }); + } + return Promise.reject(new Error(errorMsg)); + } + + try { + return await wxPhoneLogin( + { code, encryptedData, iv }, + options + ); + } catch (error: any) { + console.error('微信登录失败:', error); + throw error; + } + } + + /** + * 简化版登录方法 - 只需要传入detail,使用默认配置 + * @param detail 微信授权返回的详细信息 + */ + static async quickLogin(detail: any) { + return this.handleGetPhoneNumber(detail, { + showToast: true, + navigateBack: true + }); + } + + /** + * 自定义成功回调的登录方法 + * @param detail 微信授权返回的详细信息 + * @param onSuccess 成功回调 + */ + static async loginWithCallback( + detail: any, + onSuccess: (user: any) => void + ) { + return this.handleGetPhoneNumber(detail, { + onSuccess, + showToast: true, + navigateBack: false + }); + } +} + +/** + * 创建微信登录处理函数的工厂方法 + * @param options 登录选项 + * @returns 返回一个可以直接用于 onGetPhoneNumber 的处理函数 + */ +export function createWxLoginHandler(options?: { + onSuccess?: (user: any) => void; + onError?: (error: string) => void; + showToast?: boolean; + navigateBack?: boolean; + tenantId?: number; +}) { + return ({ detail }: { detail: any }) => { + return WxLoginUtil.handleGetPhoneNumber(detail, options); + }; +}