Vue 開發H5 微信公衆號

1、調起微信支付

• 在微信瀏覽器裏面打開H5網頁中執行JS調起支付，WeixinJSBridge內置對象在其餘瀏覽器中無效。
• 具體參考官方文檔：pay.weixin.qq.com/wiki/doc/ap…

（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('支付失敗');
                    }
                }
            );
        },
}
複製代碼

2、實現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);
    }
複製代碼

3、如何在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等功能啦！