Vue中h5调起微信支付

我这里使用的是vant插件

<template>

  <div>

    <van-button class="payBtn" slot="button" size="normal" type="primary" :disabled="isDisabledSubmitBtn" @click="handelPay">确认支付</van-button>

  </div>

</template>

<script>

  import {

    paymentSubmit

  } from "../../api/industry"; //根据路径引入后端接口（注意检查路径是否正确）

  export default {

    name: 'payment',

    data() {

      return {

        isDisabledSubmitBtn:true, //按钮是否禁用

        money:null //金额

      }

    },

    created() {

    },

    methods: {

      handelPay() {

        let params={

          money:this.money

        } //根据后端所需传参数

        this.isDisabledSubmitBtn=true //防止用户点击多次

        paymentSubmit(params).then(res => {

            this.weChatParameter=res

            this.weixinPay()

        });

      },

      //解决微信内置对象报错

      weixinPay(params){

        var that= this;

        if (typeof WeixinJSBridge == "undefined"){

          if( document.addEventListener ){

            document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady(params), false);

          }else if (document.attachEvent){

            document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady(params));

            document.attachEvent('onWeixinJSBridgeReady',that.onBridgeReady(params));

          }

        }else{

          that.onBridgeReady();

        }

      },

        //微信内置浏览器类，weChatParameter对象中的参数是3.步骤代码中从后端获取的数据

        onBridgeReady(){

          var  that = this;

          var timestamp=Math.round(that.weChatParameter.timeStamp).toString();

          WeixinJSBridge.invoke(

            'getBrandWCPayRequest',{

              debug:false,

              "appId":that.weChatParameter.appId,     //公众号名称，由商户传入

              "timeStamp":timestamp, //时间戳，自1970年以来的秒数

              "nonceStr":that.weChatParameter.nonceStr, //随机串

              "package":that.weChatParameter.package,

              "signType":that.weChatParameter.signType, //微信签名方式：

              "paySign":that.weChatParameter.paySign, //微信签名

              jsApiList: [

                'chooseWXPay'

              ]

            },

            function(res){

              // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。

              if(res.err_msg == "get_brand_wcpay_request:ok" ){ //支付成功后的操作

                 that.$toast({

                  message: ‘支付成功’,

                  duration: 2000

                });

                that.isDisabledSubmitBtn=true

              }else if(res.err_msg=='get_brand_wcpay_request:cancel'){ //取消支付的操作

                 that.$toast({

                  message: ‘取消支付’,

                  duration: 2000

                });

                that.isDisabledSubmitBtn=false //按钮恢复高亮

              }else{ //支付失败的操作

                 that.$toast({

                  message: ‘支付失败’,

                  duration: 2000

                });

                that.isDisabledSubmitBtn=false //按钮恢复高亮

              }

            }

          );

        }

    }

  }

</script>

<style scoped>

.payBtn {

  border: none;

  width: 70%;

  border-radius: 5px;

  font-size: 16px;

  height: 44px;

　line-height: .44rem;

  background-color:#11415F;

}

</style>

在api中定义industry.js文件

//支付接口
export const paymentSubmit = (params={}) => {
  return request({
    url:‘后端支付接口’,
    method: 'post',
    params: params
  })
}