Vue開發Html5微信公眾號的步驟

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('支付失敗');
 }
 }
 );
 },
}

 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);
 }

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