一、調起微信支付

在微信瀏覽器里面打開H5網頁中執行JS調起支付，WeixinJSBridge內置對象在其他瀏覽器中無效。

具體參考官方文檔：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

（1）大致流程：

（2）調用代碼示例：

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:{  // 調起微信支付    onBridgeReady() {      const pay_params = this.payInfo; //創建支付返回的簽名信息      WeixinJSBridge.invoke(        "getBrandWCPayRequest",        {          appId: pay_params.appId, //公眾號名稱，由商戶傳入          timeStamp: pay_params.timeStamp, //時間戳，自1970年以來的秒數          nonceStr: pay_params.nonceStr, //隨機串          package: pay_params.package,          signType: pay_params.signType, //微信簽名方式：          paySign: pay_params.paySign //微信簽名        },        res => {          if (res.err_msg == "get_brand_wcpay_request:ok") {            // 校驗支付            alert('支付成功');                        //do something...                      }else if(res.err_msg == "get_brand_wcpay_request:cancel"||res.err_msg == "get_brand_wcpay_request:fail"){            alert('支付失敗');          }        }      );    },}

二、實現Web簽名+截圖網頁+上傳截圖

web簽名使用 jsignature 實現，由于jsignature 基于Jquery實現，需要引入Jquery。

簽名完成后，使用 html2canvas 實現網頁全屏截圖。

截圖成功后，由于Canvas的 toDataURL方法會根據簽名的復雜程度返回不同長短的Base64，過長的Base64傳到后臺會增加服務器負擔，所以需要轉成平時input type=file上傳的圖片格式

代碼示例：

 import jSignature from "jSignature";   import html2canvas from 'html2canvas';    mounted() {    //通過setTimeout把代碼丟到初始化最后執行    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("請填寫您的簽名!");        return;      }      // jSignature - 獲取簽名Base64（注意：該Base64指簽名那一塊，不是整個頁面）            // let datapair = this.$SignDom.jSignature("getData", "image");      // let SignSrc = "data:" + datapair[0] + "," + datapair[1];            // html2canvas截取整個頁面      const HTML_CANVAS = await html2canvas(document.getElementById('app'));      let SignSrc = HTML_CANVAS.toDataURL();             // Base64 轉 Blob 實現提交圖片      let uploadImg = this.dataURLtoFile(SignSrc);            let param = new FormData(); //創建form對象      param.append("file", uploadImg,'signImage.png');             // send request...    },     // Base64轉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);  }