uni-app微信支付，支付宝支付（一）

最近做商城项目用到了微信、支付宝支付，总结一下文档

一、微信支付

微信支付用的是JSAPI支付，即在微信内置浏览器中直接调起支付，详细步骤如下

（1）接入前的准备工作，目的是获取授权code

分为支付授权与网页域名授权
1.支付授权，配置你项目的域名，顶级域名即可。

2.网页域名授权，是你请求后端接口的域名，注意：域名都不可带参数

（2）前端代码的编写

代码的编写工作分为两个部分
1.获取openid

onLoad() {                  
    this.isWeixin = this.isWechat();
        if(this.isWeixin){
                //获取code
                let code = this.getUrlCode('code');
                uni.showToast({
                        title:code
                })
                //在微信中打开支付链接时，就判断是否有code
                if (code === null || code === '') {
                        this.checkWechatCode();
                }else{
                //如果拿到code，就用这个code去请求后端提供的api来获取到openId
                        uni.request({
                                method: "POST",
                                url: `${url_config}/crm/v1/wx/query/openId/gzh`,
                                data: {
                                        code: code
                                },
                                success: (res) => {
                                        this.openId = res.data.openid;
                                        console.log(res.data.openid)
                                }
                        })
                }

        }
},
methods(){
    //方法：用来判断是否是微信内置的浏览器
    isWechat() {
        return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
    },
    checkWechatCode(){
            let local = encodeURIComponent(`${url_config}/h5/index.html); //获取当前页面地址作为回调地址
            let appid = 你的公众号的APPID

            //通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
            window.location.href =
                    "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
                    appid + 
                    "&redirect_uri=" +
                    local +
                    "&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
    },
    getUrlCode (name) {
            return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
    },
}
复制代码

2.发起支付请求 发起支付请求又包含两部分内容，首先你需要拿到这个openid给到后端，让后端返回给你如下的值，然后拿到值之后再发起支付请求
注意：图片中的这些值都是后端给你返回的!!!!!

发起请求代码

uni.request({
    url: `${url_config}/pay`, //后端api仅为示例，并非真实接口地址。
    data: {
       openId:openId,
       .....
    },
    header: {
                 'content-type': 'application/json'
    },
    method:'POST',
    success: (res) => {
    //res.data为后端返回的网页请求参数
        if(res.statusCode == 200){
                WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', {
                                "appId": res.data.appid, //公众号名称，由商户传入
                                "timeStamp":res.data.timeStamp, //时间戳     
                                "nonceStr":res.data.nonce_str, //随机串     
                                "package": "prepay_id=" + res.data.prepay_id,
                                "signType":"MD5", //微信签名方式：     
                                "paySign":res.data.paySign //微信签名 
                        },
                        function(ress) {
                                if (ress.err_msg == "get_brand_wcpay_request:ok") {
                                        uni.showToast({
                                                icon: 'success',
                                                title: '支付成功'
                                        })

                                        setTimeout(() => {
                                                // uni.navigateBack({
                                                // 	delta:2
                                                // })
                                                uni.navigateTo({
                                                        url: '/pages/success/success'
                                                });
                                        }, 500);
                                } else if (ress.err_msg == "get_brand_wcpay_request:cancel") {
                                        uni.showToast({
                                                icon: "none",
                                                title: "'已取消支付"
                                        })
                                } else {
                                        uni.showToast({
                                                icon: "none",
                                                title: "支付失败"
                                        })
                                        setTimeout(() => {
                                                // uni.navigateBack({
                                                // 	delta:2
                                                // })
                                                uni.navigateTo({
                                                        url: '/pages/error/error'
                                                });
                                        }, 500);
                                }
                        }
                );
        }
},
fail() {

}
}); 
复制代码