评论

为什么要封装支付以及微信小程序支付的封装

带loading的微信支付,简化统一微信支付封装

为什么要封装支付

  • 铭记一个原则,永远不要为了封装而封装。
  • 在微信拉起支付的过程中,重复点击会多次拉起支付,通常我们会通过枷锁来控制用户点击多次触发。
  • 但是此时如果差网环境下操作光是有枷锁是不够的,往往需要一段等待的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'
    
    1. 调用方法
    weChatPay({
        timeStamp: '',
        nonceStr: '',
        package: '',
        signType: '',
        paySign: '',
    },{ animation: true }).then((res:any) => {
        //支付成功处理
    }).catch((err:any) => {
        //支付失败处理
    })
    
  • 对了这是笔者之前发文Taro3.0版本小程序模板里面的内容,算是业务讲解吧,同时预留了扩展其他支付方法的封装导出。
最后一次编辑于  2021-08-24  
点赞 1
收藏
评论
登录 后发表内容