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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
prototype 中文参数乱码解决方案
Nov 09 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
axios学习教程全攻略
Mar 26 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
关于Vue中axios的封装实例详解
Oct 20 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
购物车实现的几种方式优缺点对比
2018/05/02 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
浅析Python的命名空间与作用域
2020/11/25 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
vivo智能手机官方商城:vivo
2016/09/22 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
后勤园长自我鉴定
2013/10/17 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
怎么写工作检讨书
2014/11/16 职场文书
项目安全员岗位职责
2015/02/15 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python