添加微信支付demo

manifest.json

-{
-    "name" : "hello-uniapp x",
-    "appid" : "__UNI__3584C99",
-    "description" : "",
-    "versionName" : "1.0.23",
-    "versionCode" : 10023,
-    "uni-app-x" : {},
-    /* 快应用特有相关 */
-    "quickapp" : {},
-    /* 小程序特有相关 */
-    "mp-weixin" : {
-        "appid" : "",
-        "setting" : {
-            "urlCheck" : false
-        },
-        "usingComponents" : true
-    },
-    "mp-alipay" : {
-        "usingComponents" : true
-    },
-    "mp-baidu" : {
-        "usingComponents" : true
-    },
-    "mp-toutiao" : {
-        "usingComponents" : true
-    },
-    "uniStatistics" : {
-        "enable" : false
-    },
-    "app" : {},
-    "vueVersion" : "3",
-    "h5" : {
-        "router" : {
-            "base" : "/web/"
+{
+  "name": "hello-uniapp x",
+  "appid": "__UNI__3584C99",
+  "description": "",
+  "versionName": "1.0.23",
+  "versionCode": 10023,
+  "uni-app-x": {},
+  /* 快应用特有相关 */
+  "quickapp": {},
+  /* 小程序特有相关 */
+  "mp-weixin": {
+    "appid": "",
+    "setting": {
+      "urlCheck": false
+    },
+    "usingComponents": true
+  },
+  "mp-alipay": {
+    "usingComponents": true
+  },
+  "mp-baidu": {
+    "usingComponents": true
+  },
+  "mp-toutiao": {
+    "usingComponents": true
+  },
+  "uniStatistics": {
+    "enable": false
+  },
+  "app": {
+    "distribute": {
+      /* android打包配置 */
+      "modules": {
+        "uni-payment":{
+          "alipay":{},
+          "wxpay":{}
         }
-    }
+      }
+    }
+  },
+  "vueVersion": "3",
+  "h5": {
+    "router": {
+      "base": "/web/"
+    }
+  }
 }

pages/API/request-payment/request-payment.uvue

 <template>
-  <page-head title="支付宝支付"></page-head>
-  <button :type="btnType" style="margin: 10px;" @click="pay()">{{btnText}}</button>
+  <page-head title="发起支付"></page-head>
+
+  <template v-if="providerList.length > 0">
+    <button style="margin-top: 20px;" type="primary" v-for="(item,index) in providerList" :key="index"
+      @click="requestPayment(item)">{{item.name}}支付</button>
+  </template>
 </template>
 
 <script>
+  export type PayItem = { id : string, name : string }
   export default {
     data() {
       return {
@@ -12,11 +17,50 @@
         orderInfo: "",
         errorCode: 0,
         errorMsg: "",
-        complete: false
+        complete: false,
+        providerList: [] as PayItem[]
       }
     },
+    onLoad: function () {
+      uni.getProvider({
+        service: "payment",
+        success: (e) => {
+          console.log("payment success:" + JSON.stringify(e));
+          let array = e.provider as string[]
+          array.forEach((value : string) => {
+            switch (value) {
+              case 'alipay':
+                this.providerList.push({
+                  name: '支付宝',
+                  id: "alipay",
+                } as PayItem);
+                break;
+              case 'wxpay':
+                this.providerList.push({
+                  name: '微信',
+                  id: "wxpay",
+                } as PayItem);
+                break;
+              default:
+                break;
+            }
+          })
+        },
+        fail: (e) => {
+          console.log("获取支付通道失败：", e);
+        }
+      });
+    },
     methods: {
-      pay() {
+      requestPayment(e : PayItem) {
+        const provider = e.id
+        if (provider == "alipay") {
+          this.payAli()
+        } else if (provider == "wxpay") {
+          this.payWX()
+        }
+      },
+      payAli() {
         uni.showLoading({
           title: "请求中..."
         })
@@ -25,11 +69,13 @@
           method: 'GET',
           timeout: 6000,
           success: (res) => {
+            this.orderInfo = JSON.stringify(res.data);
+            console.log("====" + this.orderInfo)
             uni.hideLoading()
             uni.requestPayment({
               provider: "alipay",
               orderInfo: res.data as string,
-              fail: (res : RequestPaymentFail) => {
+              fail: (res) => {
                 console.log(JSON.stringify(res))
                 this.errorCode = res.errCode
                 uni.showToast({
@@ -37,32 +83,77 @@
                   title: 'errorCode:' + this.errorCode
                 });
               },
-              success: (res : RequestPaymentSuccess) => {
+              success: (res) => {
+                console.log(JSON.stringify(res))
+                uni.showToast({
+                  icon: 'success',
+                  title: '支付成功'
+                });
+              }
+            })
+          },
+          fail: (e) => {
+            console.log(e)
+            uni.hideLoading()
+          },
+        });
+      },
+      payWX() {
+        uni.showLoading({
+          title: "请求中..."
+        })
+
+        uni.request({
+          url: 'https://demo.dcloud.net.cn/payment/wxpayv3.HBuilder/?total=0.01',
+          method: 'GET',
+          timeout: 6000,
+          header: {
+            "Content-Type": "application/json"
+          } as UTSJSONObject,
+          success: (res) => {
+            console.log(res.data)
+            uni.hideLoading()
+            uni.requestPayment({
+              provider: "wxpay",
+              orderInfo: JSON.stringify(res.data),
+              fail: (res) => {
+                console.log(JSON.stringify(res))
+                this.errorCode = res.errCode
+                uni.showToast({
+                  duration: 5000,
+                  icon: 'error',
+                  title: 'errorCode:' + this.errorCode,
+                });
+              },
+              success: (res) => {
                 console.log(JSON.stringify(res))
                 uni.showToast({
+                  duration: 5000,
                   icon: 'success',
                   title: '支付成功'
                 });
               }
-            } as RequestPaymentOptions)
+            })
           },
-          fail: () => {
+          fail: (res) => {
             uni.hideLoading()
+            console.log(res)
           },
         });
       },
+
       //自动化测试使用
       jest_pay() {
         uni.requestPayment({
           provider: "alipay",
           orderInfo: this.orderInfo,
           fail: (res : RequestPaymentFail) => {
-            this.errorCode = res.errCode
+            this.errorCode = res.errCode
             this.complete = true
           },
           success: (res : RequestPaymentSuccess) => {
-            console.log(JSON.stringify(res))
-             this.complete = true
+            console.log(JSON.stringify(res))
+            this.complete = true
           }
         } as RequestPaymentOptions)
       }