Vue如何開發(fā)Html5微信公眾號

這篇文章主要介紹了Vue如何開發(fā)Html5微信公眾號，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

在微信瀏覽器里面打開H5網(wǎng)頁中執(zhí)行JS調(diào)起支付，WeixinJSBridge內(nèi)置對象在其他瀏覽器中無效。

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

（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, //公眾號名稱，由商戶傳入
          timeStamp: pay_params.timeStamp, //時間戳，自1970年以來的秒數(shù)
          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('支付失敗');
          }
        }
      );
    },
}

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

web簽名使用 jsignature 實現(xiàn)，由于jsignature 基于Jquery實現(xiàn)，需要引入Jquery。

簽名完成后，使用 html2canvas 實現(xiàn)網(wǎng)頁全屏截圖。

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

代碼示例：

 import jSignature from "jSignature"; 
  import html2canvas from 'html2canvas';
  
  mounted() {
    //通過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("請?zhí)顚懩暮灻?");
        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 轉(zhuǎn) Blob 實現(xiàn)提交圖片
      let uploadImg = this.dataURLtoFile(SignSrc);
      
      let param = new FormData(); //創(chuàng)建form對象
      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下，手機打開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跑起來之后，通過文件傳輸助手發(fā)給手機，在手機打開http://your IP:8080/即可

(3) 打開后就可以在手機上測試支付或wx-js-sdk等功能啦！

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue如何開發(fā)Html5微信公眾號”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!