为什么要封装支付

• 铭记一个原则，永远不要为了封装而封装。
• 在微信拉起支付的过程中，重复点击会多次拉起支付，通常我们会通过枷锁来控制用户点击多次触发。
• 但是此时如果差网环境下操作光是有枷锁是不够的，往往需要一段等待的loading来陪伴用户渡过这个无聊的等待过程。
• 如果我们多处都在使用支付，每个都写同样的枷锁loading，这个时候会把支付方法统一封装起来。
• 上面前言废话太多，直接上代码（供各位伟大的新生代农民工参考借鉴思路）

  import Taro from '@tarojs/taro'
  declare namespace Pay {
      interface WeChatPayOptin {
          timeStamp: string,
          nonceStr: string,
          package: string,
          signType: 'MD5' | 'HMAC-SHA256',
          paySign: string
      }
      interface LoadingOption {
          animation: boolean,
          title?: string
      }
  }
  
  /**
  * 
  * @param option
  * 支付参数:
  * + timeStamp -时间戳，从 1970 年 1 月 1 日 00:00:00 至今的秒数，即当前的时间
  * + nonceStr - 随机字符串，长度为32个字符以下
  * + package - 统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***
  * + signType - 签名算法
  * + paySign -签名，具体签名方案参见[小程序支付接口文档](https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=3)
  * @param lodading 
  * 使用 Taro.showLoading 非必选, 建议使用, 防止支付过程中进行其他操作, 如自定义拉起支付之前防止用户操作则忽略
  * + animation - 必填 是否开启
  * + title - 标题 可选 默认: '正在支付...'
  * @returns 
  * @example
  * ```tsx
  * weChatPay({
  *  timeStamp: '',
  *  nonceStr: '',
  *  package: '',
  *  signType: '',
  *  paySign: '',
  * },{ animation: true }).then((res:any) => {
  *    支付成功处理
  * }).catch((err:any) => {
  *    支付失败处理
  * })
  * ```
  */
  const weChatPay = (option: Pay.WeChatPayOptin, loading?: Pay.LoadingOption): Promise<any> => {
      if(loading?.animation) {
          Taro.showLoading({ 
              title: loading?.title || '正在支付...', 
              mask: true
          })
      }
      return new Promise<void>((resolve, reject) => {
          Taro.requestPayment({
              ...option,
              complete: () => {
                  if(loading?.animation) Taro.hideLoading()
              },
              success: (res: any) => {
                  resolve(res)
              },
              fail: (err: any) => {
                  reject(err)
              }
          })
      })
  }
  
  export {
      weChatPay
  }
  

• 相信很多熟息ts的同学已经看明白了我的封装思路以及使用方法，当然注释中也注明了调用方法，写了这么多也不差这两句废话了下面介绍使用方法
  1. 在使用页面中导入方法

  import { weChatPay } from '@/utils/pay'
  

  2. 调用方法

  weChatPay({
      timeStamp: '',
      nonceStr: '',
      package: '',
      signType: '',
      paySign: '',
  },{ animation: true }).then((res:any) => {
      //支付成功处理
  }).catch((err:any) => {
      //支付失败处理
  })
  

• 对了这是笔者之前发文Taro3.0版本小程序模板里面的内容，算是业务讲解吧，同时预留了扩展其他支付方法的封装导出。