移动端支付

支付

小程序 uni.requestPayment(object)

uni.requestPayment运行在各端时，会自动转换为各端的原生支付调用API。

注：支付不仅仅需要客户端的开发，还需要服务端开发。虽然客户端API统一了，但各平台的支付申请开通、配置回填仍然需要看各个平台本身的支付文档。比如微信有小程序支付、H5支付等不同的申请入口和使用流程，对应到uni-app，在公众号要申请微信的H5支付，而小程序端则申请微信的小程序支付。

object参数（微信小程序）

参数名	类型	必填	说明
provider	String	是	服务提供商获取
orderInfo	String/Object	是	订单数据
timeStamp	String	是	时间戳从1970年1月1日至今的秒数，即当前的时间
nonceStr	String	是	随机字符串，长度不大于32字符
package	String	是	统一下单接口返回的prepay_id参数值，提交格式：prepay_id=xx
paySign	String	是	签名，具体签名方案参见 微信小程序支付文档
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

例如： components/payment/index.vue

// #ifdef MP || APP-PLUS
let jsConfig = res.data.result.jsConfig;
uni.requestPayment({
    timeStamp: jsConfig.timestamp,
    nonceStr: jsConfig.nonceStr,
    package: jsConfig.package,
    signType: jsConfig.signType,
    paySign: jsConfig.paySign,
    success: function(res) {
        uni.hideLoading();
        return that.$util.Tips({
                title: res.msg,
                icon: 'success'
            }, () => {
                that.$emit('onChangeFun', {
                    action: 'pay_complete'
                });
            });
    },
    fail: function(e) {
        uni.hideLoading();
        return that.$util.Tips({
                title: '取消支付'
            }, () => {
                that.$emit('onChangeFun', {
                action: 'pay_fail'
            });
        });
    },
    complete: function(e) {
        uni.hideLoading();
        if (e.errMsg == 'requestPayment:cancel')
        return that.$util.Tips({
                title: '取消支付'
            }, () => {
                that.$emit('onChangeFun', {
                action: 'pay_fail'
            });
        });
    },
});
// #endif

微信公众号 js-sdk

微信公众号内网页运行时，可通过js-sdk实现微信支付。 例如： libs/wechat.js

// #ifdef H5
import WechatJSSDK from '@/plugin/jweixin-module/index.js';

import { getWechatConfig } from '@/api/public';

class AuthWechat {
    constructor() {
        //微信实例化对象
        this.instance = WechatJSSDK;
        //是否实例化
        this.status = false;

        this.initConfig = {};
    }

    /**
     * 初始化wechat(分享配置)
     */
    wechat() {
        return new Promise((resolve, reject) => {
            getWechatConfig()
                .then(res => {
                    this.instance.config(res.data);
                    this.initConfig = res.data;
                    this.status = true;
                    this.instance.ready(() => {
                        resolve(this.instance);
                    });
                })
                .catch(err => {
                    console.log(err);
                    this.status = false;
                    reject(err);
                });
        });
    }

    /**
     * 微信支付
     * @param {Object} config
     */
    pay(config) {
        return new Promise((resolve, reject) => {
            this.wechat()
                .then(wx => {
                    this.toPromise(wx.chooseWXPay, config)
                        .then(res => {
                            resolve(res);
                        })
                        .catch(res => {
                            reject(res);
                        });
                })
                .catch(res => {
                    reject(res);
                });
        });
    }

    toPromise(fn, config = {}) {
        return new Promise((resolve, reject) => {
            fn({
                ...config,
                success(res) {
                    resolve(res);
                },
                fail(err) {
                    reject(err);
                },
                complete(err) {
                    reject(err);
                },
                cancel(err) {
                    reject(err);
                }
            });
        });
    }
}

export default new AuthWechat();
// #endif

main.js

import Auth from './libs/wechat';
Vue.prototype.$wechat = Auth;

components/payment/index.vue

that.$wechat.pay(data.result.jsConfig)
    .finally(() => {
        return that.$util.Tips({
                title: "支付成功",
                icon: 'success'
            }, () => {
                that.$emit('onChangeFun', {
                    action: 'pay_complete'
                });
            });
        })
    .catch(function() {
        return that.$util.Tips({
                title: '支付失败'
            });
        });

支付宝支付

components/payment/index.vue

uni.hideLoading();
//#ifdef H5
if (this.$wechat.isWeixin()) {
    uni.redirectTo({
        url: `/pages/users/alipay_invoke/index?id=${res.data.result.order_id}&pay_key=${res.data.result.pay_key}`
    });
} else {
    uni.hideLoading();
    this.formContent = res.data.result.jsConfig;
    this.$nextTick(() => {
        document.getElementById('alipaysubmit').submit();
    });
}
//#endif
// #ifdef MP
uni.navigateTo({
    url: `/pages/users/alipay_invoke/index?id=${res.data.result.order_id}&link=${res.data.result.jsConfig.qrCode}`
});
// #endif