欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue開發(fā)Html5微信公眾號的步驟

 更新時間:2019年04月11日 11:42:06   作者:Sam_Lii  
這篇文章主要介紹了Vue開發(fā)Html5微信公眾號的步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

一、調(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前端實現(xiàn)導出頁面為pdf(分頁導出、不分頁導出及分模塊導出)

    vue前端實現(xiàn)導出頁面為pdf(分頁導出、不分頁導出及分模塊導出)

    在實際應用中可能用戶希望將系統(tǒng)中一個頁面展示的所有數(shù)據(jù)報表,用PDF的文件格式下載下來,以便于其他用途,這篇文章主要給大家介紹了關于vue前端實現(xiàn)導出頁面為pdf(分頁導出、不分頁導出及分模塊導出)的相關資料,需要的朋友可以參考下
    2024-06-06
  • 關于Pinia狀態(tài)管理解讀

    關于Pinia狀態(tài)管理解讀

    這篇文章主要介紹了Pinia狀態(tài)管理解讀,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • 使用vue制作FullPage頁面滾動效果

    使用vue制作FullPage頁面滾動效果

    本篇文章主要介紹了使用vue制作FullPage頁面滾動效果,詳細的介紹了FullPage頁面的思路和實現(xiàn),有興趣的可以了解一下
    2017-08-08
  • Vue如何利用flex布局實現(xiàn)TV端城市列表功能

    Vue如何利用flex布局實現(xiàn)TV端城市列表功能

    用vue開發(fā)了三四個組件了,都是H5的,現(xiàn)在來看看PC是如何玩轉(zhuǎn)組件的,下面這篇文章主要給大家介紹了關于Vue如何利用flex布局實現(xiàn)TV端城市列表功能的相關資料,需要的朋友可以參考下
    2023-01-01
  • Vue插件寫、用詳解(附demo)

    Vue插件寫、用詳解(附demo)

    本篇文章主要介紹了Vue插件寫、用詳解(附demo),插件就是指對Vue的功能的增強或補充。有興趣的可以了解一下。
    2017-03-03
  • Vue.js搭建移動端購物車界面

    Vue.js搭建移動端購物車界面

    這篇文章主要為大家詳細介紹了Vue.js搭建移動端購物車界面,重點介紹基本結構和數(shù)據(jù)渲染,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • 使用ElementUI寫一個前端分頁查詢的實例

    使用ElementUI寫一個前端分頁查詢的實例

    本文主要介紹了使用ElementUI寫一個前端分頁查詢的實例,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • 解決ElementUI組件中el-upload上傳圖片不顯示問題

    解決ElementUI組件中el-upload上傳圖片不顯示問題

    這篇文章主要介紹了解決ElementUI組件中el-upload上傳圖片不顯示問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue網(wǎng)頁html轉(zhuǎn)換PDF(最低兼容ie10)的思路詳解

    Vue網(wǎng)頁html轉(zhuǎn)換PDF(最低兼容ie10)的思路詳解

    這篇文章主要介紹了Vue網(wǎng)頁html轉(zhuǎn)換PDF(最低兼容ie10)的思路詳解,實現(xiàn)此功能需要引入兩個插件,需要的朋友可以參考下
    2017-08-08
  • Vue.js學習筆記之 helloworld

    Vue.js學習筆記之 helloworld

    vue是法語中視圖的意思,Vue.js是一個輕巧、高性能、可組件化的MVVM庫,同時擁有非常容易上手的API。有需要的小伙伴可以參考下
    2016-08-08

最新評論