uniapp APP端微信支付避坑流程

468 阅读2分钟

​ 上周五到这周一直研究app端微信支付,踩了好多坑,太痛了!  app端支付宝支付还好,微信支付真的踩了一堆坑。

1、首先支付功能需要到manifest.json文件中,在安卓/ios模块配置中,开启Payment(支付),根据自己的需求开启,如果是微信支付appid必须和微信开放平台一样。 ​ 2、uniapp微信支付参数传入(uniapp官网截图) ​ 3、安卓端和IOS中appId区别

// 获取当前app在哪个端          
         const platform = uni.getSystemInfoSync().platform;
        // 安卓端是appid,IOS端是appId,一定区分好,uniapp文档并没有说明。
          const appId = platform === 'ios' ? 'appId' : 'appid';
          const orderInfo = {
            [appId]: res.result.appid,
            // appid: res.result.appid,
            noncestr: String(res.result.nonceStr),
            package: res.result.packageVal,
            partnerid: res.result.partnerId,
            prepayid: res.result.prepayId,
            timestamp: res.result.timestamp,
            sign: String(res.result.sign),
          };
          if (res.code == 200) {
            uni.requestPayment({
              provider: 'wxpay',
              orderInfo: orderInfo,
              success(res) {
                console.log('微信支付成功:', res);
              },
              fail(e) {
                console.log('微信支付失败:', e);
              },
            });
          }

4、线下测试报错。 安卓端报错包名和微信开发平台不一致或IOS报错appid商户参数不正确。

首先需要重复检查你的包名和appid是否和微信开放平台一样,如果一样,那可能是下面的问题了。 如果要测试安卓或ios手机的微信支付功能,点击运行->app云打包需要打一个自定义基座,才能测试。标准基座是测试不了微信支付的。 ​  打包成功之后,你的项目中unpackage->debug文件夹下面就会多了一个安卓的apk文件。

自定义基座打包完成之后,点击运行app基座。

这时你就可以勾选自定义基座,测试微信支付了。一般如果你是真机调试,这里可以直接连接上你的设备。

到这里,我这边就成功了,安卓和IOS我这边都支付成功了。感觉微信支付并不难,就是太多坑了,很多问题uniapp官网都没有提过,我也是查了很多文档才搞定的。

微信和支付宝总体代码。

//支付宝、微信支付
      async pay() {
         // 支付宝支付
        if (this.paymentList[this.paymentIndex].title == '支付宝') {
          // 获取支付参数
          const { data: res } = await serviceAdvanced()
          if (res.code == 200) {
            uni.requestPayment({
              provider: 'alipay',
              orderInfo: res.result, // 字符串
              success(res) {},
              fail(e) {
                this.$refs.uToast.show({
                  title: '支付出错,请重试',
                  type: 'warning',
                });
              },
            });
          }
        } else {
            // 微信支付
           // 获取微信需要的参数对象
          const { data: res } = await createOrder();
          console.log('后端返回信息:', res.result);
          const platform = uni.getSystemInfoSync().platform;
          const appId = platform === 'ios' ? 'appId' : 'appid';
    
          const orderInfo = {
            [appId]: res.result.appid,
            // appid: res.result.appid, // appId和appid还不能同时传,否则还会报错
            noncestr: String(res.result.nonceStr),
            package: res.result.packageVal,
            partnerid: res.result.partnerId,
            prepayid: res.result.prepayId,
            timestamp: res.result.timestamp,
            sign: String(res.result.sign),
          };
          if (res.code == 200) {
            uni.requestPayment({
              provider: 'wxpay',
              orderInfo: orderInfo,
              success(res) {
                console.log('微信支付成功:', res);
              },
              fail(e) {
                console.log('微信支付失败:', e);
              },
            });
          }
        }
      },