微信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支付

第一步：把放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("支付失败");

}

});