my-uniapp-tools 1.0.1 → 1.0.2

package/examples/payment-example.js

@@ -0,0 +1,179 @@
+/**
+ * 支付功能使用示例
+ */
+
+import { usePayment } from '../src/utils/index.ts';
+
+/**
+ * 微信支付示例 (App端)
+ */
+export const wechatPayExample = async () => {
+  try {
+    const result = await usePayment('wxpay', {
+      // App端微信支付必需参数
+      appid: 'your_app_id',
+      partnerid: 'your_partner_id',
+      prepayid: 'your_prepay_id',
+      package: 'Sign=WXPay',
+      noncestr: 'random_string_' + Date.now(),
+      timestamp: Math.floor(Date.now() / 1000).toString(),
+      sign: 'your_calculated_sign'
+    });
+
+    if (result.success) {
+      console.log('微信支付成功！');
+      console.log('订单号:', result.orderInfo.orderId);
+      console.log('支付时间:', new Date(result.timestamp));
+
+      // 支付成功后的业务逻辑
+      handlePaymentSuccess(result);
+    } else {
+      console.error('微信支付失败:', result.error);
+
+      // 支付失败后的业务逻辑
+      handlePaymentFail(result);
+    }
+  } catch (error) {
+    console.error('支付过程中发生错误:', error);
+  }
+};
+
+/**
+ * 支付宝支付示例 (小程序 - String类型)
+ */
+export const alipayMiniProgramExample = async () => {
+  try {
+    // 支付宝小程序支付，orderInfo 为 String 类型的交易号
+    const result = await usePayment('alipay', 'your_trade_no_from_server');
+
+    if (result.success) {
+      console.log('支付宝小程序支付成功！');
+      handlePaymentSuccess(result);
+    } else {
+      console.error('支付宝小程序支付失败:', result.error);
+      handlePaymentFail(result);
+    }
+  } catch (error) {
+    console.error('支付过程中发生错误:', error);
+  }
+};
+
+/**
+ * 支付宝支付示例 (App端 - String类型)
+ */
+export const alipayAppExample = async () => {
+  try {
+    // App端支付宝支付，orderInfo 为 String 类型的订单字符串
+    const result = await usePayment('alipay', 'your_complete_order_string_from_server');
+
+    if (result.success) {
+      console.log('支付宝App支付成功！');
+      handlePaymentSuccess(result);
+    } else {
+      console.error('支付宝App支付失败:', result.error);
+      handlePaymentFail(result);
+    }
+  } catch (error) {
+    console.error('支付过程中发生错误:', error);
+  }
+};
+
+
+
+/**
+ * 支付成功处理函数
+ */
+const handlePaymentSuccess = (result) => {
+  console.log('处理支付成功逻辑...');
+
+  // 1. 更新本地状态
+  // 2. 发送支付成功通知到服务器
+  // 3. 更新用户界面
+  // 4. 跳转到成功页面
+
+  // 示例：显示成功提示
+  uni.showToast({
+    title: '支付成功',
+    icon: 'success',
+    duration: 2000
+  });
+
+  // 示例：跳转到成功页面
+  setTimeout(() => {
+    uni.navigateTo({
+      url: '/pages/payment/success?orderId=' + result.orderInfo.orderId
+    });
+  }, 2000);
+};
+
+/**
+ * 支付失败处理函数
+ */
+const handlePaymentFail = (result) => {
+  console.log('处理支付失败逻辑...');
+
+  // 1. 记录失败日志
+  // 2. 显示错误提示
+  // 3. 提供重试选项
+
+  let errorMessage = '支付失败，请重试';
+
+  // 根据错误类型显示不同提示
+  if (result.error && result.error.errMsg) {
+    if (result.error.errMsg.includes('cancel')) {
+      errorMessage = '支付已取消';
+    } else if (result.error.errMsg.includes('fail')) {
+      errorMessage = '支付失败，请检查网络或稍后重试';
+    }
+  }
+
+  uni.showModal({
+    title: '支付提示',
+    content: errorMessage,
+    showCancel: true,
+    cancelText: '取消',
+    confirmText: '重试',
+    success: (res) => {
+      if (res.confirm) {
+        // 用户选择重试，重新发起支付
+        console.log('用户选择重试支付');
+        // 这里可以重新调用对应的支付函数
+      }
+    }
+  });
+};
+
+/**
+ * 批量支付示例（多个商品）
+ */
+export const batchPaymentExample = async () => {
+  const orders = [
+    { orderId: 'order_001', amount: 1000, description: '商品1' },
+    { orderId: 'order_002', amount: 2000, description: '商品2' },
+    { orderId: 'order_003', amount: 3000, description: '商品3' }
+  ];
+
+  // 计算总金额
+  const totalAmount = orders.reduce((sum, order) => sum + order.amount, 0);
+
+  try {
+    const result = await usePayment('wxpay', {
+      orderId: 'batch_order_' + Date.now(),
+      amount: totalAmount,
+      description: `批量购买${orders.length}个商品`,
+      orderList: orders // 附加订单列表信息
+    });
+
+    if (result.success) {
+      console.log('批量支付成功！');
+      console.log('总金额:', totalAmount / 100, '元');
+      console.log('商品数量:', orders.length);
+      handlePaymentSuccess(result);
+    } else {
+      console.error('批量支付失败:', result.error);
+      handlePaymentFail(result);
+    }
+  } catch (error) {
+    console.error('批量支付过程中发生错误:', error);
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "my-uniapp-tools",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "main": "src/index.js",
     "type": "module",
     "scripts": {

package/src/index.js

@@ -12,3 +12,9 @@ export * from './system'
 
 // 本地存储相关
 export * from './localStorage'
+
+// 支付相关
+export * from './utils/payment'
+
+// 其他工具函数
+export * from './utils'

package/src/system/index.ts

@@ -141,24 +141,55 @@ export const getStatusBarHeight = () => {
   }
 }
 
+/**
+ * 获取菜单按钮边界信息
+ * @returns 菜单按钮边界信息对象或null
+ * @description 获取小程序右上角菜单按钮的边界信息，仅在小程序平台有效
+ */
+export const getMenuButtonBoundingClientRect = () => {
+  try {
+    const platform = getPlatform();
+    
+    // 只有在小程序平台才执行getMenuButtonBoundingClientRect
+    if (platform === 'weixin' || platform === 'alipay') {
+      return uni.getMenuButtonBoundingClientRect();
+    }
+    
+    // 非小程序平台返回null
+    return null;
+  } catch (error) {
+    console.error('获取菜单按钮边界信息失败:', error);
+    return null;
+  }
+}
+
 /**
  * 获取导航栏高度
  * @returns 导航栏高度（单位：px）
- * @description 获取小程序导航栏的总高度，包含状态栏高度和菜单按钮高度
+ * @description 获取导航栏的总高度，根据不同平台采用不同的计算方式
  */
 export const getNavHeight = () => {
   try {
     // 获取状态栏高度
     const statusBarHeight = getStatusBarHeight();
-
-    // 获取菜单按钮的边界信息
-    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
-
-    // 计算导航栏总高度：状态栏高度 + 菜单按钮高度
-    const navHeight = menuButtonInfo.height + statusBarHeight;
-    console.log("🚀 ~ 导航栏高度:", navHeight);
-
-    return navHeight;
+    const platform = getPlatform();
+    
+    // 小程序平台：状态栏高度 + 菜单按钮高度
+    if (platform === 'weixin' || platform === 'alipay') {
+      const menuButtonInfo = getMenuButtonBoundingClientRect();
+      if (menuButtonInfo) {
+        const navHeight = menuButtonInfo.height + statusBarHeight;
+        console.log("🚀 ~ 小程序导航栏高度:", navHeight);
+        return navHeight;
+      }
+    }
+    
+    // App和H5平台：使用默认导航栏高度
+    const defaultNavHeight = 44; // 默认导航栏高度
+    const totalHeight = statusBarHeight + defaultNavHeight;
+    console.log(`🚀 ~ ${platform}平台导航栏高度:`, totalHeight);
+    
+    return totalHeight;
   } catch (error) {
     console.error('获取导航栏高度失败:', error);
     // 返回默认高度（状态栏高度 + 44px 默认导航栏高度）

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './payment/index'

package/src/utils/payment/index.ts

@@ -0,0 +1,153 @@
+/**
+ * 支付相关工具函数
+ */
+
+/**
+ * 支付提供商类型
+ */
+export type PaymentProvider = 'wxpay' | 'alipay';
+
+/**
+ * 支付订单信息类型
+ * @description 根据不同支付方式，orderInfo 的类型和结构会有所不同：
+ * - 支付宝小程序：String 类型，表示支付宝交易号(tradeNO)
+ * - App端支付宝：String 类型，完整的订单字符串
+ * - App端微信：Object 类型，包含微信支付必需参数
+ */
+export type PaymentOrderInfo = string | {
+  /** 微信支付参数 (App端) */
+  appid?: string;
+  partnerid?: string;
+  prepayid?: string;
+  package?: string;
+  noncestr?: string;
+  timestamp?: string;
+  sign?: string;
+
+  /** 其他通用参数 */
+  [key: string]: any;
+};
+
+/**
+ * 支付结果接口
+ */
+export interface PaymentResult {
+  /** 支付是否成功 */
+  success: boolean;
+  /** 支付提供商 */
+  provider: PaymentProvider;
+  /** 订单信息 */
+  orderInfo: PaymentOrderInfo;
+  /** 支付时间戳 */
+  timestamp: number;
+  /** 错误信息（支付失败时） */
+  error?: any;
+}
+
+/**
+ * 统一支付接口
+ * @param provider 支付提供商，默认为 'wxpay'
+ * @param orderInfo 订单信息对象
+ * @returns Promise<PaymentResult> 支付结果
+ * @description 封装 uni.requestPayment，提供统一的支付接口，支持多种支付方式
+ * @example
+ * ```typescript
+ * // 微信支付 (App端)
+ * const wxResult = await usePayment('wxpay', {
+ *   appid: 'your_app_id',
+ *   partnerid: 'your_partner_id',
+ *   prepayid: 'your_prepay_id',
+ *   package: 'Sign=WXPay',
+ *   noncestr: 'random_string',
+ *   timestamp: '1234567890',
+ *   sign: 'your_sign'
+ * });
+ *
+ * // 支付宝支付 (小程序 - String类型)
+ * const alipayResult = await usePayment('alipay', 'your_trade_no_string');
+ *
+ * // 支付宝支付 (App端 - String类型)
+ * const alipayAppResult = await usePayment('alipay', 'your_order_string');
+ *
+ * // 检查支付结果
+ * if (wxResult.success) {
+ *   console.log('支付成功');
+ * } else {
+ *   console.error('支付失败:', wxResult.error);
+ * }
+ * ```
+ */
+export const usePayment = (
+  provider: PaymentProvider = 'wxpay',
+  orderInfo: PaymentOrderInfo = {}
+): Promise<PaymentResult> => {
+  return new Promise<PaymentResult>((resolve, reject) => {
+    // 参数验证
+    if (!provider) {
+      const error = new Error('支付提供商不能为空');
+      reject(error);
+      return;
+    }
+
+    // 根据不同平台验证 orderInfo 类型
+    if (orderInfo === null || orderInfo === undefined) {
+      const error = new Error('订单信息不能为空');
+      reject(error);
+      return;
+    }
+
+    // 支付宝小程序和App端支付宝需要 String 类型
+    if ((provider === 'alipay') && typeof orderInfo !== 'string' && typeof orderInfo !== 'object') {
+      const error = new Error('支付宝支付的订单信息格式不正确');
+      reject(error);
+      return;
+    }
+
+    // 其他平台需要 Object 类型
+    if (provider !== 'alipay' && typeof orderInfo !== 'object') {
+      const error = new Error('订单信息必须是一个对象');
+      reject(error);
+      return;
+    }
+
+    // 记录支付开始时间
+    const timestamp = Date.now();
+
+    // 调用 uni.requestPayment 进行支付
+    uni.requestPayment({
+      provider,
+      orderInfo,
+      success: () => {
+        // 支付成功，返回成功结果
+        const result: PaymentResult = {
+          success: true,
+          provider,
+          orderInfo,
+          timestamp,
+        };
+        resolve(result);
+      },
+      fail: (err) => {
+        // 支付失败，返回失败结果
+        const result: PaymentResult = {
+          success: false,
+          provider,
+          orderInfo,
+          timestamp,
+          error: err,
+        };
+
+        // 根据错误类型进行不同处理
+        if (err.errMsg && err.errMsg.includes('cancel')) {
+          console.log('用户取消支付');
+        } else {
+          console.error('支付失败:', err);
+        }
+
+        // 这里选择 resolve 而不是 reject，让调用者通过 result.success 判断支付结果
+        // 这样可以避免未捕获的 Promise 异常
+        resolve(result);
+      },
+    });
+  });
+};