uni-app开发之四app支付模块详解

拼搏现实的明天。 2023-05-31 06:42 2阅读 0赞

可以说支付部分是app的一个重要内容，一般的app里都会有这个模块，所以下面单拿出一篇文章给大家进行讲解：

首先在uni-app中主要有支付宝支付、微信支付、苹果应用内支付这几种（剩余的支付方式不是主流，我也就不讲啦，嘻嘻>-<），接下来我就分开给大家讲一讲这几种支付方式。

**（一）开发前准备**

首先如果你想使用者三种支付方式必须要去相应的开放平台注册并申请支付功能

**（1）支付宝支付能力申请：**

首先登陆支付宝账号然后创建应用用来获取支付宝应用的appid以便在uni-app的manifest.json中进行配置，接下来开通app支付功能，开通的步骤比较繁琐，会有支付宝的工作人员进行审核，如果是公司项目的话应该会会顺利，我就不在这里啰嗦了，第三步配置密钥用来获取公钥和私钥这是需要后台进行处理的。

**（2）微信支付能力申请：**

首先到 [微信开放平台][Link 1] 申请移动应用并开通支付功能，申请应用后可以获取 AppID 和 AppSecret 值，然后将应用接入 [微信商户平台][Link 2]，选择 App 支付，最后开通支付功能后可获取支付业务服务器配置数据：PARTNER（财付通商户号）、PARTNER\_KEY（财付通密钥）、PAYSIGNKEY（支付签名密钥），最后一步也是后台进行处理的，不用我们操心啦。

**（3）苹果应用内支付：**

因为我们的项目没用过苹果应用支付所以我就先不多说这部分了，等以后我踩完坑了再给大家补上哈。

**（4）manifest.json配置**

打开manifest.json文件找到app SDK配置，然后找到支付的部分进行相关配置就好了，都是图形界面配置比较容易，我就一带而过了。

**（二）开发支付模块**

首先通过uni.getProvider方法获取到用户手机里的服务商，service选择payment，共有4种方式alipay（支付宝支付）、wxpay（微信支付）、baidu（百度收银台支付）、appleiap（苹果应用内支付）。代码如下：

uni.getProvider({
        service: 'payment',
        success: function (res) {
        //在这里进行业务逻辑处理
        }
    });

**然后通过后台获取订单信息：**

uni.request({
    url: addUrl() + '/api/recharge/pay',
    method: 'POST',
    header: {
    referer: ''
    },
    
    data: {
    //请求接口的参数
    },
    
    success: (res) => {
    //获得订单信息
    }
    })

**第三步调起微信/支付宝支付**

//支付宝支付
    
    uni.requestPayment({
    
    provider: 'alipay',
    
    orderInfo: orderInfo, //订单数据
    
    success: function(res) {
    
    //处理业务逻辑
    
    },
    
    fail: function(err) {
    
    console.log('fail:' + JSON.stringify(err));
    
    uni.showToast({
    
    icon: 'none',
    
    title: '支付失败'
    
    });
    
    }
    
    });
    
    //微信支付
    
    uni.requestPayment({
    
    provider: 'wxpay',
    
    orderInfo: orderInfo, //订单数据
    
    success: function(res) {
    
    //处理业务逻辑
    
    },
    
    fail: function(err) {
    
    console.log('fail:' + JSON.stringify(err));
    
    uni.showToast({
    
    icon: 'none',
    
    title: '支付失败'
    
    });
    
    }
    
    });

[Link 1]: https://open.weixin.qq.com/
[Link 2]: https://pay.weixin.qq.com/index.php/core/home/login?return_url=/