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脚本性能优化注意事项
Nov 18 Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
通过layer实现可输入的模态框的例子
Sep 27 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
Openlayers实现地图全屏显示
Sep 28 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
PHP函数积累总结
2019/03/19 PHP
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
Python字典操作简明总结
2015/04/13 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
python去除扩展名的实例讲解
2018/04/23 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
python实现自动解数独小程序
2019/01/21 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
大学生工作推荐信范文
2013/12/02 职场文书
给交警的表扬信
2014/01/12 职场文书
保护环境倡议书
2014/04/14 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
2014年优秀党员材料
2014/12/18 职场文书
学生保证书
2015/01/16 职场文书
python for循环赋值问题
2021/06/03 Python
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python