uni-app 中小程序调用微信支付踩坑

最新推荐文章于 2025-05-12 14:47:14 发布

原创最新推荐文章于 2025-05-12 14:47:14 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #小程序 #typescript

uni-app 中小程序调用微信支付踩坑

自我记录

首先使用了官网的微信APP支付这个是不对的会报错
requestPayment:fail parameter error: parameter.timeStamp should be String instead of Undefined;parameter.nonceStr should be String instead of Undefined

这个不是小程序支付
https://uniapp.dcloud.net.cn/api/plugins/payment.html#微信app支付

正确调用微信小程序支付
https://uniapp.dcloud.net.cn/api/plugins/payment.html#微信小程序支付

// 仅作为示例，非真实参数信息。
uni.requestPayment({
    provider: 'wxpay',
	timeStamp: String(Date.now()),
	nonceStr: 'A1B2C3D4E5',
	package: 'prepay_id=wx20180101abcdefg',
	signType: 'MD5',
	paySign: '',
	success: function (res) {
		console.log('success:' + JSON.stringify(res));
	},
	fail: function (err) {
		console.log('fail:' + JSON.stringify(err));
	}
});

这里有个注意的地方我的项目的vue3+ts 按照小程序的这个写法给我报ts警告,没办法只能使用// @ts-ignore 去解决了
坑就在这里,我一开始看到了微信app支付,ts提示也给我提示的这个,我就去用了,怎么调用都报错,后来查了一些文档用现在这个,但是会有ts警告!!!

// 发情求
const onSend = () => {
  // TODO
 uni.showToast({
    title: '调取支付中',
  })
  uni.request({
    url: `${支付地址}`,
    method: 'POST',
    success: async (res: any) => {
      uni.hideLoading()
      const payData = (await res.data.data) as PayData
      // @ts-ignore
      uni.requestPayment({
        provider: 'wxpay', 
        timeStamp: payData.timeStamp, // 时间戳（单位：秒）
        nonceStr: payData.nonceStr, // 随机字符串
        package: payData.package, // 固定值
        signType: payData.signType, // 签名算法，这里用的 MD5/RSA 签名
        paySign: payData.paySign, //签名
        success(res) {
          console.log('🚀 ~ file: index.vue:121 ~ success ~ res:', res)
        },
        fail(e) {
          console.log('🚀 ~ file: index.vue:124 ~ fail ~ e:', e)
        },
      })
    },
    fail: (err) => {
      uni.hideLoading()
      console.log(err)
    },
  })
}