H5呼起微信支付（个人实践总结）

H5呼起微信支付存在两种场景

第一种：其他浏览器呼起微信支付。

第二种：微信内部呼起微信支付。

项目说明：

我这边的项目两种方式都要适用。

产品需求是当支付失败或者未支付情况是停留在支付订单页面，可再次发起申请订单请求，故我把呼起支付页面和成功页面合在一起写。

前期准备：

公众号设置

内部呼起微信搭桥，需要配置一个网页授权域名，用于前端内部呼起微信生成对应的code给到后端。

公众号设置-功能设置-网页授权域名

 需要注意的是，填入域名即可，不用在域名前加http://,不然会提示域名或路径格式不正确，请参考注意事项。别问我怎么知道的，因为我删掉了我写的前面http://就配置通过了。

后端涉及到支付，要配置支付授权

微信支付-开发设置-支付授权目录

前端代码：

判断浏览器是否为微信

初始化时判断浏览器内核，并针对不同情况做不同的事情。

init(){
    this.wechatFlag = this.isWeChat();//本人项目提交时需要判断区分，所以就定义了全局
    if(this.wechatFlag){
        //当前在微信内部 do someThing
        // 比方判断是否有授权code
          let code = this.getQueryObject().code;
          if (code == null || code == '') {
            this.redirectPage();//重定向获取code
          } else {
            this.code = code;
          }
    }else{
        //外部浏览器 do someThing
        //项目里，我设置的支付订单页和成功页在同一个页面
        //所以外部浏览器付费与否都回到这个页面
        //所以我这要获取成功后的订单参数