第一種：引入微信js-sdk

//在一個地方呼叫this.weixin()方法，比如說按鈕
 
//寫微信支付方法
weixin() {
        var that = this;
        var url='';
        var params = {
          .....//價格，數量等等一類的
        };
        axios.post(url,params).then((res) => {
          var resulted = res.data.data;
          that.wxConfig = resulted;
          that.$wx.config({
            debug: false,
            appId: that.wxConfig.appid,
            timestamp: that.wxConfig.timestamp,
            nonceStr: that.wxConfig.noncestr,
            signature: that.wxConfig.signature,
            // 所有要呼叫的 API 都要加到這個列表中
            //要呼叫的微信介面
            jsApiList: [
              'chooseWXPay',
              'onMenuShareAppMessage',
              'onMenuShareTimeline',
              'onMenuShareQQ',
              'onMenuShareWeibo',
              'onMenuShareQZone'
            ]
          });
          that.$wx.ready(function() {
            that.$wx.chooseWXPay({
              timestamp: that.wxConfig.timeStamp, // 支付簽名時間戳，注意微信jssdk中的所有使用    timestamp欄位均為小寫。但最新版的支付後臺生成簽名使用的timeStamp欄位名需大寫其中的S字元
              nonceStr: that.wxConfig.nonceStr, // 支付簽名隨機串，不長於 32 位
              package: that.wxConfig.package, // 統一支付介面返回的prepay_id引數值，提交格式如：prepay_id=***）
              signType: that.wxConfig.signType, // 簽名方式，預設為'SHA1'，使用新版支付需傳入'MD5'
              paySign: that.wxConfig.paySign, // 支付簽名
              success: function (res) {
                 paySuccessCallback();
              },
              cancel: function (res) {
                  alert('已取消支付');
              },
              fail: function (res) {
                  alert('購買失敗，請重新建立訂單')
              }

            });
          });
 
        })
      },
 

第二種  不用引入微信sdk；直接應用；

toPayPage() {//1.點選“立即支付”按鈕，請求介面獲取orderCode
            var url = API_ORDERS_GENERATE;
            var params = {
                buyNum: this.quantity * 1,
                commodityId: this.commodityId,
                guestBook: this.guestBook,
                commodityPrice:this.commodityPrice,
                totalPrice : (this.commodityPrice * 1) * (this.quantity * 1)
            }
            this.$post(url,params).then(res=>{
                if(res.data.retCode == 200){
                    this.orderId = res.data.data;
                    this.authorityCheckToPay(this.orderId.orderCode)
                }else{
                    //業務錯誤輸出
                    this.Toast({
                        message: res.data.message,
                        position: 'center',
                        duration: 2000
                    })
                }
            }).catch(res=>{
                console.log(res);
            })
        },
 

authorityCheckToPay(orderCode) {//2.使用orderCode喚起支付
            var url = API_PAY_ORDER + orderCode;
            this.$post(url).then(res=>{
                if(res.data.retCode == 200){
                    var params = JSON.parse(res.data.data);
                    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{
                        this.onBridgeReady(params);
                     }
                }else{
                    this.Toast({
                        message: res.data.message,
                        position: 'center',
                        duration: 5000
                    })
                }
            }).catch(res=>{
                console.log(res);
            })
        },
 

onBridgeReady(params){//3.使用微信內部方法完成支付操作
            var _this = this;
            WeixinJSBridge.invoke(
               'getBrandWCPayRequest', params,
                function(res){
                if(res.err_msg == "get_brand_wcpay_request:ok" ){
               // 使用以上方式判斷前端返回,微信團隊鄭重提示：
                     //res.err_msg將在使用者支付成功後返回ok，但並不保證它絕對可靠。
                     _this.$router.push('homeList');
                } else if(res.err_msg == "get_brand_wcpay_request:cancel"){
                    // alert("使用者取消支付!");
                    _this.$router.push('purchaseRecord');
                }else{
                    // alert(JSON.stringify(res));
                    alert("支付失敗!");
                }
            }); 
        }