一、調起微信支付
在微信瀏覽器里面打開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); }三、如何在npm run dev下，手機打開H5公眾號測試
(1) 修改package.json,在dev 后面加上--host your IP
示例：
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.167.1.99", },(2) dev跑起來之后，通過文件傳輸助手發給手機，在手機打開http://your IP:8080/即可
(3) 打開后就可以在手機上測試支付或wx-js-sdk等功能啦！
新聞熱點
疑難解答
