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

为什么要封装支付

铭记一个原则，永远不要为了封装而封装。
在微信拉起支付的过程中，重复点击会多次拉起支付，通常我们会通过枷锁来控制用户点击多次触发。
但是此时如果差网环境下操作光是有枷锁是不够的，往往需要一段等待的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的同学已经看明白了我的封装思路以及使用方法，当然注释中也注明了调用方法，写了这么多也不差这两句废话了下面介绍使用方法

在使用页面中导入方法

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

调用方法

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

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