uni-app支付功能

野性酷女 2022-12-11 07:50 116阅读 0赞

### uni-app支付功能 ###

扫码查看原文  
![扫码查看原文][qrcode_scene_10000004_size_102_biz_Mzg3NTAzMzAxNA_mid_2247483869_idx_1_sn_e5c9575e4b409bb3ce510ca14622ce74_send_time_pic_center]

前言  
近期一直在使用APP开发多端应用，IOS的APP、安卓的APP和H5网页，其中开发的APP使用到了微信和支付宝的支付，在此给大家分享出来，一起使用  
前置条件：  
开发环境：windows  
开发框架：uni-app , H5+，nativeJS  
编辑器：HbuilderX 2.8.13  
兼容版本：安卓，IOS已作测试  
此代码可以直接复制到uni-app项目中使用  
正文开始：

1.  首先需要做一些相关配置  
    1.1 打开HbuilderX，配置manifest.json，选择App模块配置，勾选Payment支付；根据业务需要再勾选支付宝和微信支付；  
    1.2 微信支付需要配置appid、ios通用平台链接；支付宝在HbuilderX内无需任何配置；不过需要在支付宝付宝开放平台，创建应用时做一些配置。  
    ![在这里插入图片描述][1f85a6f3caa98dbbda98effbeeb06647.png_pic_center]
2.  以下是具体代码页面部分  
    2.1 radio的值等于1，是微信支付，等于2是支付宝支付；通过@change事件获取到radio的值

<view class="pay_list_box">
      <radio-group @change="radioChange">
        <label class="pay_list">
          <view class="l_box">
            <view class="top">
              <image class="t_img" src="/static/images/pay_icon2.png" mode=""></image>
              <view>微信</view>
            </view>
          </view>
          <view class="r_radio">
            <radio value="1" color="#44bb53" style="transform:scale(0.8)"/>
          </view>
        </label>
        <label class="pay_list">
          <view class="l_box">
            <view class="top">
              <image class="t_img1" src="/static/images/pay_icon1.png" mode=""></image>
              <view>支付宝</view>
            </view>
          </view>
          <view class="r_radio">
            <radio value="2" color="#44bb53" style="transform:scale(0.8)"/>
          </view>
        </label>
      </radio-group>
    </view>
    <view class="zf_btn" @click="pay">提交</view>

1.  以下是样式部分

<style scoped lang="scss"> .zaixian{ 
        padding-bottom: 100rpx;
        border-top: 1px solid #ebebeb; .content{ 
          .money{ 
            padding-top: 50rpx;
            text-align: center;
            height: 200rpx;
            color: #F05D31;
            line-height: 200rpx;
            font-size: 100rpx;
          }
          .time{ 
            text-align: center;
            color: #a5a5a5;
            font-size: 28rpx;
          }
        }
        .code{ 
          padding: 0 20rpx;
          display: flex; .shoukuanma{ 
            text-align: center;
            width: 50%;
            height: 200rpx; .type{ 
              font-size: 30rpx;
              color: #3b3b3b;
            }
            .ty_img{ 
              width: 200rpx;
              height: 200rpx;
            }
          }
        }
        
        .pay_list_box{ 
          margin-top: 100rpx; .yinhangka{ 
            font-size: 30rpx;
            color: #3b3b3b;
            padding: 0 20rpx;
            display: flex;
            height: 100rpx;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #ebebeb; .y_left{ 
              display: flex; .name{ 
                padding-right: 20rpx;
              }
            }
          }
          .pay_list{ 
            border-bottom: 1px solid #ebebeb;
            padding: 0 20rpx;
            height: 100rpx;
            align-items: center;
            display: flex;
            justify-content: space-between; .l_box{ 
              height: 100rpx; .top{ 
                height: 100rpx;
                display: flex;
                height: 100rpx;
                align-items: center;
                font-size: 30rpx;
                color: #3b3b3b; .t_img{ 
                  padding-right: 20rpx;
                  width: 46rpx;
                  height: 38rpx;
                }
                .t_img1{ 
                  padding-right: 32rpx;
                  width: 34rpx;
                  height: 33rpx;
                }
                .t_img2{ 
                  padding-right: 28rpx;
                  width: 38rpx;
                  height: 33rpx;
                }
              }
            }
          }
        }
        .pingzheng{ 
          margin-top: 30rpx; .content{ 
            display: flex;
            align-items: center;
            padding: 0 20rpx;
            height: 200rpx; .shangchuan{ 
              color: #454545;
              font-size: 30rpx;
            }
            .sc_img{ 
              padding-left: 20rpx;
              width: 200rpx;
              height: 200rpx;
              border-radius: 5px;
            }
          }
          .pz_pic{ 
            margin-top: 30rpx;
            padding: 0 20rpx; .pz_img{ 
              width: 100%;
              height: 300rpx;
            }
          }
        }
        .zf_btn{ 
          margin: 100rpx auto 0;
          background-color: #44bb57;
          width: 650rpx;
          height: 90rpx;
          font-size: 36rpx;
          color: #FFFFFF;
          line-height: 90rpx;
          text-align: center;
          border-radius: 45rpx;
        }
      }
    </style>

1.  以下是具体的代码逻辑部分  
    4.1 通过后端获取到订单信息；再通过订单信息获取到服务商信息和支付配置信息  
    4.2 最后通过 uni.requestPayment 支付；  
    5.通过servicesInfo方法获取订单信息，取到订单的基本信息  
    5.1 向 pay 方法传递订单基本信息，获取到服务商信息和支付配置信息  
    5.2 通过 appPay 方法调用uni.requestPayment函数发起支付；  
    5.3 uni.requestPayment发起支付时，传递两个重要参数provider、orderInfo  
    5.3.1 provider：支付类型，支付宝（alipay）或者微信 (wxpay)  
    5.3.2 orderInfo: 通过 pay 方法请求接口获取到 order\_info
2.  支付成功后，通过 updateOrder 方法改变订单状态

<script>
      export default{ 
        data(){ 
          return{ 
            imgs:[],
            pay_type:0,
            id:0,
            info:[]
          }
        },
        onLoad(response) { 
          this.id = response.id
          this.servicesInfo()
        },
        methods:{ 
          radioChange(e){ 
            // 获取用选择的支付方式
            this.pay_type = e.detail.value
          },
          //一、获取订单信息
          servicesInfo:function(){ 
            var that = this;
            // 请求订单信息接口
            that.$http.post("User/servicesInfo",{ 'id':that.id})
            .then(function (response) { 
              that.info = response.data;
              console.log(response);
            });
          },
          
          //二、获取服务信息和支付配置信息
          pay:function(){ 
            var that = this;
            if(that.pay_type == 0){ 
              uni.showToast({ 
                title:"请选择支付方式",
                icon:"none"
              })
              return;
            }
            var url;
           // 1 微信支付；2 支付宝支付
            if(that.pay_type == 1){ 
              url = 'Order/wxpay';
            }else if(that.pay_type == 2){ 
              url = 'Order/alipay';
            }
            // 请求服务信息和支付配置信息
            that.$http.post(url,{ 'id':that.id,type:that.pay_type,'price':that.info.pay_price,'order_sn':that.info.order_sn}).then(function(response){ 
              console.log(response);
              // 调用支付
              that.appPay(response.data,that.pay_type);
            });
          },
          // 三、支付
          appPay:function(data, type){ 
            var that =this;
            let pay_type = type == 1 ? 'wxpay' : 'alipay'
            // 发起支付
            uni.requestPayment({ 
              provider: pay_type,
              orderInfo: data.order_info, //微信、支付宝订单数据
              success: (res) => { 
                // 支付成功，改变订单状态
                that.updateOrder(data.out_trade_no,type)
              },
              fail: (err) => { 
                uni.showToast({ 
                  title:'支付失败',
                  'icon':'none'
                })
              }
            })
          },
          //四、修改务订单状态
          updateOrder:function(order_no,type){ 
            var that = this;
            that.$http.post('Order/updateOrder',{ order_no:order_no})
            .then(function(response) { 
              uni.showToast({ 
                title:"支付成功",
                icon:'none',
                duration:2000
              })
              
            })
          },
        }
      }
    </script>

[qrcode_scene_10000004_size_102_biz_Mzg3NTAzMzAxNA_mid_2247483869_idx_1_sn_e5c9575e4b409bb3ce510ca14622ce74_send_time_pic_center]: /images/20221123/7904614ca69d48a29510a693202fc236.png
[1f85a6f3caa98dbbda98effbeeb06647.png_pic_center]: /images/20221123/7b4360465b694828b4654c19a4a53e23.png

发表评论取消回复

表情：

评论列表（有 0 条评论，116人围观）

还没有评论，来说两句吧...

相关阅读

相关支付宝支付功能测试

支付宝支付功能测试 1.准备开发环境 1.1配置沙箱环境沙箱环境是支付宝开放平台为开发者提供的与生产环境完全隔离的联调测试环境，开发者在沙箱环境中完成的接口

傷城~/ 2023年09月27日 14:41/ 0 赞/ 24 阅读

相关 uniapp中有关调用微信支付功能和其他注意事项

先看代码，复制使用即可，当然，可能并不是通用的，建议您一边阅读，一遍整理思路，总的来说，思路很重要，其次才是代码。（在此之前，您首先要确定的是您的小程序主体是商户才可

灰太狼/ 2022年12月07日 12:15/ 0 赞/ 177 阅读

相关 uniapp功能集合

实现滑动到指定位置 handlego(){ var me = this; var query = wx.createSel

矫情吗；*/ 2022年12月06日 01:17/ 0 赞/ 169 阅读

相关支付宝APP支付（JAVA生成支付信息，uniapp拉起支付宝支付）

目录支付APP支付参数配置方法配置 -------------------- 支付APP支付根据接口加签方式自行选择使用密钥或者证书（注：支付

淡淡的烟草味﹌/ 2022年11月21日 14:56/ 0 赞/ 387 阅读

相关 uniapp使用支付宝支付

[uni.requestPayment()][uni.requestPayment] // ifdef H5 this.apply = res.data.pa

港控/mmm°/ 2022年09月08日 14:59/ 0 赞/ 345 阅读

相关 uniapp如何实现多端支付？支付宝微信支付

今天说一下uniapp实现多端支付，涉及微信公众号，小程序，APP，支付宝APP，支付宝h5支付，多端支付有疑问可以留言 //点击支付的按钮 goP

系统管理员/ 2022年09月04日 03:55/ 0 赞/ 532 阅读

相关 iOS支付功能

文章转载自：[https://www.jianshu.com/p/8eb14edca8fb][https_www.jianshu.com_p_8eb14edca8fb] 1

谁践踏了优雅/ 2021年10月23日 08:25/ 0 赞/ 442 阅读

相关 uniapp小程序支付app 支付【前端部分】

<template> <view> <button @click="paymini">小程序支付</button> <button @

喜欢ヅ旅行/ 2021年09月17日 11:38/ 0 赞/ 438 阅读

相关支付功能测试

支付[功能测试][Link 1]的执行 1、公司交给专门负责支付接口等相关的人员进行支付测试 2、如果是支付宝支付可以用到支付沙漏，模拟支付测试。但是好像只能核对成功支付的

太过爱你忘了你带给我的痛/ 2021年09月17日 09:52/ 0 赞/ 435 阅读

相关 uniapp复制功能

copy(value) { //提示模板 uni.setClipboardData({ data: this.list.id,//复

约定不等于承诺〃/ 2021年07月24日 15:33/ 0 赞/ 531 阅读