mounted(){
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            this.onBridgeReady,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent(
            "WeixinJSBridgeReady",
            this.onBridgeReady
          );
          document.attachEvent(
            "onWeixinJSBridgeReady",
            this.onBridgeReady
          );
        }
      } else {
        this.onBridgeReady();
      }
}
methods:{
  // 調(diào)起微信支付
    onBridgeReady() {
      const pay_params = this.payInfo; //創(chuàng)建支付返回的簽名信息
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: pay_params.appId, //公眾號(hào)名稱，由商戶傳入
          timeStamp: pay_params.timeStamp, //時(shí)間戳，自1970年以來的秒數(shù)
          nonceStr: pay_params.nonceStr, //隨機(jī)串
          package: pay_params.package,
          signType: pay_params.signType, //微信簽名方式：
          paySign: pay_params.paySign //微信簽名
        },
        res => {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 校驗(yàn)支付
            alert('支付成功');
            
            //do something...
            
          }else if(res.err_msg == "get_brand_wcpay_request:cancel"||res.err_msg == "get_brand_wcpay_request:fail"){
            alert('支付失敗');
          }
        }
      );
    },
}

 import jSignature from "jSignature"; 
  import html2canvas from 'html2canvas';
  
  mounted() {
    //通過setTimeout把代碼丟到初始化最后執(zhí)行
    this.Timer = setTimeout(() => {
      // Signature 簽名Dom容器
      this.$SignDom = $("#Signature").jSignature({
        height: "100%",//占容器100%
        width: "100%"
      });
    }, 0);
  },
  methods:{
    //清空簽名
    resetSign() {
      this.$SignDom && this.$SignDom.jSignature("reset");
    },
      // 獲取簽名
    async getSign() {
      if (!this.$SignDom) return;
      
      if (!this.$SignDom.jSignature("getData", "native").length) {
        alert("請(qǐng)?zhí)顚懩暮灻?");
        return;
      }
      // jSignature - 獲取簽名Base64（注意：該Base64指簽名那一塊，不是整個(gè)頁面）
      
      // let datapair = this.$SignDom.jSignature("getData", "image");
      // let SignSrc = "data:" + datapair[0] + "," + datapair[1];
      
      // html2canvas截取整個(gè)頁面
      const HTML_CANVAS = await html2canvas(document.getElementById('app'));
      let SignSrc = HTML_CANVAS.toDataURL();
      
       // Base64 轉(zhuǎn) Blob 實(shí)現(xiàn)提交圖片
      let uploadImg = this.dataURLtoFile(SignSrc);
      
      let param = new FormData(); //創(chuàng)建form對(duì)象
      param.append("file", uploadImg,'signImage.png'); 
      
      // send request...
    },
     // Base64轉(zhuǎn)Blob上傳圖片
    dataURLtoFile(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr],{
        type: mime,
      });
    }

  },
  destroyed() {
    //清理setTimeout
    this.Timer && clearTimeout(this.Timer);
  }

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.167.1.99",
 },