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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
jQuery的强大选择器小结
Dec 27 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
JavaScript实现tab栏切换效果
Mar 16 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
php实现简单的上传进度条
2015/11/17 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
深入讲解Python编程中的字符串
2015/10/14 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
Python中断多重循环的思路总结
2019/10/04 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
大学生求职信例文
2014/06/29 职场文书
岗位说明书怎么写
2014/07/30 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
写给领导的感谢信
2015/01/22 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
用JS写一个发布订阅模式
2021/11/07 Javascript
Python+Tkinter制作专属图形化界面
2022/04/01 Python