Vue 開(kāi)發(fā)H5 微信公眾號(hào)

kbyyd24 發(fā)布于2019-08-23 16:52 / 638人閱讀

摘要：具體參考官方文檔大致流程調(diào)用代碼示例調(diào)起微信支付創(chuàng)建支付返回的簽名信息公眾號(hào)名稱，由商戶傳入時(shí)間戳，自年以來(lái)的秒數(shù)隨機(jī)串微信簽名方式微信簽名校驗(yàn)支付支付成功支付失敗二實(shí)現(xiàn)簽名截圖網(wǎng)頁(yè)上傳截圖簽名使用實(shí)現(xiàn)，由于基于實(shí)現(xiàn)，需要引入。

一、調(diào)起微信支付

在微信瀏覽器里面打開(kāi)H5網(wǎng)頁(yè)中執(zhí)行JS調(diào)起支付，WeixinJSBridge內(nèi)置對(duì)象在其他瀏覽器中無(wú)效。
具體參考官方文檔：https://pay.weixin.qq.com/wik...

（1）大致流程：

（2）調(diào)用代碼示例：

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年以來(lái)的秒數(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("支付失敗");
                    }
                }
            );
        },
}

二、實(shí)現(xiàn)Web簽名+截圖網(wǎng)頁(yè)+上傳截圖

web簽名使用 jsignature 實(shí)現(xiàn)，由于jsignature 基于Jquery實(shí)現(xiàn)，需要引入Jquery。
簽名完成后，使用 html2canvas 實(shí)現(xiàn)網(wǎng)頁(yè)全屏截圖。
截圖成功后，由于Canvas的 toDataURL方法會(huì)根據(jù)簽名的復(fù)雜程度返回不同長(zhǎng)短的Base64，過(guò)長(zhǎng)的Base64傳到后臺(tái)會(huì)增加服務(wù)器負(fù)擔(dān)，所以需要轉(zhuǎn)成平時(shí)input type=file上傳的圖片格式

代碼示例：

    import jSignature from "jSignature"; 
    import html2canvas from "html2canvas";
    
    mounted() {
        //通過(guò)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è)頁(yè)面）
            
            // let datapair = this.$SignDom.jSignature("getData", "image");
            // let SignSrc = "data:" + datapair[0] + "," + datapair[1];
            
            // html2canvas截取整個(gè)頁(yè)面
            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);
    }

三、如何在npm run dev下，手機(jī)打開(kāi)H5公眾號(hào)測(cè)試

(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跑起來(lái)之后，通過(guò)文件傳輸助手發(fā)給手機(jī)，在手機(jī)打開(kāi)http://your IP:8080/即可

(3) 打開(kāi)后就可以在手機(jī)上測(cè)試支付或wx-js-sdk等功能啦！

GPU云服務(wù)器云服務(wù)器微信公眾號(hào)開(kāi)發(fā) 微信公眾號(hào)開(kāi)發(fā)者模式微信公眾號(hào) 微信公眾號(hào)名字

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://hztianpu.com/yun/103422.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

kbyyd24

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

虛擬鍵盤，移動(dòng)web開(kāi)發(fā)的痛

閱讀 1352·2019-08-30 12:49
探究：絕對(duì)定位沒(méi)有設(shè)置 top, right, bottom, left 的世界是怎樣的？

閱讀 3234·2019-08-28 18:14
javascript -- 回調(diào)函數(shù)之美

閱讀 892·2019-08-26 11:38
基礎(chǔ)數(shù)組數(shù)組合并交叉

閱讀 1758·2019-08-23 18:23
JavaScript中十種一步拷貝數(shù)組的方法

閱讀 2881·2019-08-23 17:04
Vue 開(kāi)發(fā)H5 微信公眾號(hào)

閱讀 639·2019-08-23 16:52
手機(jī)上查看編輯完的CAD圖紙文件怎么一鍵分享給微信好友？

閱讀 4133·2019-08-23 16:43
如何寫好前端業(yè)務(wù)代碼？

閱讀 2852·2019-08-23 16:12

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Vue 開(kāi)發(fā)H5 微信公眾號(hào)

相關(guān)文章

**【開(kāi)源】小程序And公眾號(hào)商城，外加后臺(tái)，功能齊全！**

**【開(kāi)源】小程序And公眾號(hào)商城，外加后臺(tái)，功能齊全！**

**使用vue開(kāi)發(fā)微信公眾號(hào)下SPA站點(diǎn)的填坑之旅**

可視化拖拽 UI 布局之拖拽篇

vue使用微信JS-SDK實(shí)現(xiàn)分享功能

發(fā)表評(píng)論

0條評(píng)論

kbyyd24

男|高級(jí)講師

TA的文章

虛擬鍵盤，移動(dòng)web開(kāi)發(fā)的痛

探究：絕對(duì)定位沒(méi)有設(shè)置 top, right, bottom, left 的世界是怎樣的？

javascript -- 回調(diào)函數(shù)之美

基礎(chǔ)數(shù)組數(shù)組合并交叉

JavaScript中十種一步拷貝數(shù)組的方法