uni-app微信支付,支付宝支付(一)

3,635 阅读1分钟

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

一、微信支付

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

(1)接入前的准备工作,目的是获取授权code

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

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

image.png

(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给到后端,让后端返回给你如下的值,然后拿到值之后再发起支付请求
注意:图片中的这些值都是后端给你返回的!!!!!

1629122617(1).png 发起请求代码

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() {

}
});