微信h5支付 与 微信扫码支付
微信扫码支付
引入 QRCode
import QRCode from "qrcodejs2";
传入后台返回的微信二维码
var qrcode = new QRCode(_this.$refs.qrCodeUrl, {
text: _this.codeUrl,
width: 100,
height: 100,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
微信h5支付
第一步：把<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>放index.html
第二步：先通过公众号好网页获取code
var callbackPath = "https:/x.xxx.com/index.html#/yy";
callbackPath = encodeURIComponent(callbackPath);
window.location.href =
"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx公众号appid &redirect_uri=" +
callbackPath +
"&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect";
第三步： 解析返回的code
var url_str = location.href; // 获取整个地址栏的url_str
var num = url_str.indexOf("?");
url_str = url_str.substr(num + 1); // 获取url中的参数
var arr = url_str.split("&"); // 获取url参数数组
var code = "";
// 获取code
for (var i = 0; i < arr.length; i++) {
num = arr[i].indexOf("=");
if (arr[i].substring(0, num) == "code") {
code = arr[i].substr(num + 1);
}
}
第四步：根据code获取openid
if (code != "") {this.getOpenId(code);
}
第五步：根据openid 获取吊起 微信支付的字段然后走微信方法
var _data = {
appId: data.appid,
timeStamp: data.timestamp.toString(), // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: data.nonce_str, // 支付签名随机串，不长于 32 位
package: "prepay_id=" + data.prepay_id, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: data.sign // 支付签名
};
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener(
"WeixinJSBridgeReady",
_this.invokeWxPay,
false
);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", _this.invokeWxPay);
document.attachEvent("onWeixinJSBridgeReady", _this.invokeWxPay);
}
} else {
_this.invokeWxPay();
}
第六步：支付中的结果
WeixinJSBridge.invoke("getBrandWCPayRequest", _this.data, function(res) {
//alert(JSON.stringify(this.data));
if (res.err_msg == "get_brand_wcpay_request:ok") {
_this.$router.push("/orderHall");
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
alert("支付过程中用户取消");
} else if (res.err_msg == "get_brand_wcpay_request:fail") {
alert("支付失败");
}
});
