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 相关文章推荐
node.js中的socket.io入门实例
Apr 26 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
Vue中props的使用详解
Jun 15 Javascript
详解vue-cli3使用
Aug 14 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 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自动重命名文件实现方法
2014/11/04 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
js图片上传的封装代码
2017/08/01 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
详解Python中的文件操作
2016/08/28 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
如何基于python实现不邻接植花
2020/05/01 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
大型会议策划方案
2014/05/17 职场文书
2014年话务员工作总结
2014/11/19 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书