vue混合开发打包成app去hbuilderX如何调用微信支付

问题出现的环境背景及自己尝试过哪些方法

我有一个项目是用vue写的,现在要打包成app用的是hbuilderX,目前想到的唯一方法就是用5+app里的调用支付代码,但是官方实例很模糊,看不懂,请问怎么样才可以调起微信支付!!!有实现过的大佬帮帮我### 问题描述

官方示例

var channel=null;  
// 1. 获取支付通道  
function plusReady(){ //uni-app中将此function里的代码放入vue页面的onLoad生命周期中  
    // 获取支付通道  
    plus.payment.getChannels(function(channels){  
        channel=channels[0];  
    },function(e){  
        alert("获取支付通道失败:"+e.message);  
    });  
}  
document.addEventListener('plusready',plusReady,false);//uni-app不需要此代码  

var ALIPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total=';  
var WXPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/wxpay.php?total=';  
// 2. 发起支付请求  
function pay(id){  
    // 从服务器请求支付订单  
    var PAYSERVER='';  
    if(id=='alipay'){  
        PAYSERVER=ALIPAYSERVER;  
    }else if(id=='wxpay'){  
        PAYSERVER=WXPAYSERVER;  
    }else{  
        plus.nativeUI.alert("不支持此支付通道!",null,"捐赠");  
        return;  
    }  
    var xhr=new XMLHttpRequest(); //uni-app中请使用uni的request api联网  
    xhr.onreadystatechange=function(){  
        switch(xhr.readyState){  
            case 4:  
            if(xhr.status==200){  
                plus.payment.request(channel,xhr.responseText,function(result){  
                    plus.nativeUI.alert("支付成功!",function(){  
                        back();  
                    });  
                },function(error){  
                    plus.nativeUI.alert("支付失败:" + error.code);  
                });  
            }else{  
                alert("获取订单信息失败!");  
            }  
            break;  
            default:  
            break;  
        }  
    }  
    xhr.open('GET',PAYSERVER);  
    xhr.send();  
}

你期待的结果是什么?实际看到的错误信息又是什么?

完全没有思路

已解决 悬赏分:50 - 解决时间 2021-11-26 16:23
反对 0举报 0 收藏 0

回答3

最佳
  • @

    已解决
    首先先在mounted的时候获取支付通道

        mounted() {
                // 获取支付通道
                plus.payment.getChannels((channels) => {
                    this.channel = channels[0];
                }, function(e) {
                    alert("获取支付通道失败:" + e.message);
                });
            }

    然后先走后台给你的接口传订单编号过去获取他返回给你的数据,
    再走第二步!!这里注意传给微信的数据一定要转化成字符串不然就不行这是个大坑,
    在接下来的就是你自己的逻辑操作了,在这里记录一下

    orderH5pay({
            orderId: this.orderId
            }).then(res => {
                        let result = res.data.data
                        // 2. 发起支付请求
                        plus.payment.request(this.channel, JSON.stringify({
                            appid: result.appId,
                            noncestr: result.nonceStr,
                            package: result.packageValue,
                            partnerid: result.partnerId,
                            prepayid: result.prepayId,
                            timestamp: result.timeStamp,
                            sign: result.sign,
                        }), (result)=> {
                            plus.nativeUI.alert("支付成功!", ()=> {
                                this.$router.push({path: '/user/order/list/2'})
                                back();
                            });
                        }, (error)=> {
                            plus.nativeUI.alert("支付失败:" + err.code);
                            this.$router.push({path: '/user/order/list/1'})
                        });
                    })
    支持 0 反对 0 举报
    2021-11-26 05:14
  • @

    要不考虑用Ping++ ?

    支持 0 反对 0 举报
    2021-11-26 05:33
  • @

    请问后台怎么实现呢?或者说后台传回来的订单编号具体是哪些数据?

    支持 0 反对 0 举报
    2021-11-26 06:20