Vue开发Html5微信公众号的步骤


Posted in Javascript onApril 11, 2019

一、调起微信支付

在微信浏览器里面打开H5网页中执行JS调起支付,WeixinJSBridge内置对象在其他浏览器中无效。
具体参考官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

(1)大致流程:

Vue开发Html5微信公众号的步骤

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

二、实现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);
  }

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

Javascript 相关文章推荐
javascript new一个对象的实质
Jan 07 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
JS图片预加载三种实现方法解析
May 08 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 Javascript
跟混乱的页面弹窗说再见
Apr 11 #Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 #Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 #Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 #Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 #Javascript
详解jQuery设置内容和属性
Apr 11 #jQuery
js作用域和作用域链及预解析
Apr 11 #Javascript
You might like
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
PHP微信红包API接口
2015/12/05 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
不安全的常用的js写法
2009/09/15 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python内置函数dir详解
2015/04/14 Python
python 全文检索引擎详解
2017/04/25 Python
pip命令无法使用的解决方法
2018/06/12 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
社区党务公开实施方案
2014/03/18 职场文书
三好生演讲稿
2014/09/12 职场文书
场地使用证明模板
2014/10/25 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript