微信公众号H5，实现微信支付

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

前提

1. 已经申请成为微信商户
2. 开通JSAPI支付

支付需要对接两个API

1. 服务端，调用统一下单API，获得prepay_id 。官方文档 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1
2. 客户端（即H5），调用微信JS ，唤起微信支付。 官方文档 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
3. 不建议使用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参数需要从服务端获取。