为什么要封装支付以及微信小程序支付的封装
发布于 3 年前 作者 elu 3795 次浏览 来自 分享

为什么要封装支付

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

      

      • 

    • 


      • 

    • @param lodading
      • 

    • 使用 Taro.showLoading 非必选, 建议使用, 防止支付过程中进行其他操作, 如自定义拉起支付之前防止用户操作则忽略
      • 

    • 

        

      • animation - 必填 是否开启
        • 

      

      • 

    • 

        

      • title - 标题 可选 默认: ‘正在支付…’
        • 

      

      • 

    • @returns 
      • 

    • @example
      • 

    • 

      • 

    • 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'
    1. 调用方法
    weChatPay({
    timeStamp: '',
    nonceStr: '',
    package: '',
    signType: '',
    paySign: '',
},{ animation: true }).then((res:any) => {
    //支付成功处理
}).catch((err:any) => {
    //支付失败处理
})
  • 对了这是笔者之前发文Taro3.0版本小程序模板里面的内容，算是业务讲解吧，同时预留了扩展其他支付方法的封装导出。
回到顶部