【微信公衆号 H5 vue】vue H5 調用微信上傳圖檔 微信支付

export const isWeiXin = () => {

    let ua = window.navigator.userAgent.toLowerCase();

    if(ua.match(/MicroMessenger/i) == 'micromessenger'){

        return true;

    }else{

        return false;

    }

}

//項目加載 注冊微信環境 mounted

const data = await wechatConfig(); // 接口傳回微信資訊 例如：ID 時間戳 

    wx.config({

          debug: false,

          appId: data.data.appId,

          timestamp: data.data.timestamp,

          nonceStr: data.data.nonceStr,

          signature: data.data.signature,

          jsApiList: [

            'chooseImage',

            'uploadImage'

          ]

    });

//調用上傳接口

 toUpload() {

      const that = this;

      wx.chooseImage({

          count: 1, // 預設9

          sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有

          sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，預設二者都有

          success(res) {

            // alert(JSON.stringify(res))

              const localIds = res.localIds; // 傳回標明照片的本地ID清單，localId可以作為img标簽的src屬性顯示圖檔

              that.localId = localIds[0];

              if (that.localId) {

                  wx.uploadImage({

                      localId: that.localId, // 需要上傳的圖檔的本地ID，由chooseImage接口獲得

                      isShowProgressTips: 1, // 預設為1，顯示進度提示

                      async success(res) {

                        // alert(JSON.stringify(res))

                          const serverId = res.serverId; // 傳回圖檔的伺服器端ID

                          await that.uploadWechat(serverId);

                      }

                  });

              }

          },

          fail(){

              that.toast('選擇圖檔初始化失敗 請重新整理重試');

          }

      });

    },

//使用微信支付

注冊微信支付 mounted方法調用

async wechatPayConfig(){

        const data = await wechatConfig();//接口傳回微信資訊 ID簽名等

        wx.config({

          debug: false,

          appId: data.data.appId,

          timestamp: data.data.timestamp,

          nonceStr: data.data.nonceStr,

          signature: data.data.signature,

          jsApiList: ['chooseWXPay']

        })

      },

//調用

const data = await atoncePayment(params);// 調用 統一下單接口 擷取訂單ID 及 簽名 ID 等。。。

          if(data.retType !=1) return this.toast(data.retMsg);

          data.data.prepay = JSON.parse(data.data.prepay);

//調用微信支付API

          wx.chooseWXPay({

            appId: data.data.prepay.appid,

            timestamp: data.data.prepay.timestamp, // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付背景生成簽名使用的timeStamp字段名需大寫其中的S字元

            nonceStr: data.data.prepay.noncestr, // 支付簽名随機串，不長于 32 位

            package: `prepay_id=${data.data.prepay.prepayid}`, // 統一支付接口傳回的prepay_id參數值，送出格式如：prepay_id=***）

            signType: 'MD5', // 簽名方式，預設為'SHA1'，使用新版支付需傳入'MD5'

            paySign: data.data.prepay.sign, // 支付簽名

            async success(res) {

                // 支付成功後的回調函數,跳轉到訂單頁面

                if (res.errMsg == 'chooseWXPay:ok') {

                    that.$router.push('/becomeLeaderSuccess');

                }

            },

            fail(error) {

                // 支付失敗的回調函數

                that.toast('支付失敗');

            }

          });