关于前端微信支付功能如何实现

1.先提供微信的API说明文档

pay.weixin.qq.com/wiki/doc/ap...

前端的核心代码如下: 有的文档里提供了choosepayway这个方式，WeixinJSBridge就是对这个方法的一层包装。

javascript 复制代码

function onBridgeReady(){
   WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":"wx2421b1c4370ec43b",     //公众号ID，由商户传入     
         "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
         "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
         "package":"prepay_id=u802345jgfjsdfgsdg888",     
         "signType":"MD5",         //微信签名方式：     
         "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
      },
      function(res){
      if(res.err_msg == "get_brand_wcpay_request:ok" ){
      // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
      } 
   }); 
}
if (typeof WeixinJSBridge == "undefined"){
   if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
   }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
   }
}else{
   onBridgeReady();
}

说明

1.上述方法是在微信浏览器内直接调用WeixinJSBridge，因为微信浏览器内置了wx的一些配置，所以可以直接使用该对象。如果是在别的浏览器，需要区分是否为wx环境。
2.如果是在普通的h5环境，那么前端不需要做事，让后端去下单，商户后台系统先调用微信支付的H5下单接口，微信后台系统返回链接参数h5_url，用户使用微信外部的浏览器访问该h5_url地址调起微信支付中间页。 window.location.href = h5Url

开发步骤

首先使用调用wx的支付api需要授权获取用户信息，微信网页开发 / 网页授权 (qq.com)，一共4个步骤，其实前端只需要关注第一步就行了，获取code，如果后端勤快，甚至连第一步都不需要看，前端只要访问后端的接口，拿到上面代码的核心几个参数就能顺利支付了。
下面说下第一步

1.获取code (2.通过code换取网页授权access_token 3. 4 后端处理)

参数说明

在你需要调用支付的页面，拼接到微信提供的完整URL后面即可，需要注意你的url是经过base64处理过的，

参数中 scope=snsapi_base 两种方式，这种是只拿一个code，另一个 snsapi_userinfo 会让用户感知一下，获取一些更多的信息，目前一个code就足够了。当你重定向到这个页面之后，微信也会返回到你的redirecturl，并且在url里拼上一个code回来，此时你只需要将code传给你的后端就行。

ini 复制代码

```
// 获取路径中的code，没有code 就去微信那里拿
const code = getQueryParam('code')

if (!code) {
    const url = encodeURIComponent(href)
    window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`)
} else {
    window.location.href = href
}

需要注意的是，多次重定向可能会导致，个别组件的返回上一页问题，所以授权的页面时机要定义好。

该参数是后端去调用wx的统一下单接口获取 pay.weixin.qq.com/wiki/doc/ap...