h5 仓管下单_微信公众号H5，实现微信支付

最近看到有朋友问公众号内怎么实现微信支付和登陆，正好前些时候有做过，其实和普通H5网站实现是差不多的。今天有空，暂时先写下支付流程。

前提

已经申请成为微信商户

开通JSAPI支付

支付需要对接两个API

服务端，调用统一下单API，获得prepay_id 。官方文档 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

客户端(即H5)，调用微信JS ，唤起微信支付。 官方文档 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

不建议使用JSSDK，示例代码：export default {

isWechat:function(){

var ua = window.navigator.userAgent.toLowerCase();

if(ua.match(/micromessenger/i) == 'micromessenger'){

return true;

}else{

return false;

}

},

jsApiCall(data ,callback_succ_func ,callback_error_func){

//使用原生的，避免初始化appid问题

WeixinJSBridge.invoke('getBrandWCPayRequest', {

appId:data['appId'],

timeStamp: data['timeStamp'],

nonceStr: data['nonceStr'], // 支付签名随机串，不长于 32 位

package: data['package'], // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*)

signType: data['signType'], // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'

paySign: data['paySign'], // 支付签名

},

function(res) {

var msg = res.err_msg ?res.err_msg :res.errMsg;

//WeixinJSBridge.log(msg);

switch (msg) {

case 'get_brand_wcpay_request:ok': //支付成功时

if(callback_succ_func){

callback_succ_func(res);

}

break;

default: //支付失败时

WeixinJSBridge.log('支付失败!'+msg+',请返回重试.');

if(callback_error_func){

callback_error_func({msg:msg});

}

break;

}

})

},

payment:function(data ,callback_succ_func ,callback_error_func){

if(!this.isWechat()){

return ;

}

if (typeof WeixinJSBridge == "undefined") {

if (document.addEventListener) {

document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);

} else if (document.attachEvent) {

document.attachEvent('WeixinJSBridgeReady', this.jsApiCall);

document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);

}

} else {

this.jsApiCall(data ,callback_succ_func ,callback_error_func);

}

}

}

在发起支付的页面，调用payment方法 。data参数需要从服务端获取。