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

一、调起微信支付

在微信浏览器里面打开h5网页中执行js调起支付，weixinjsbridge内置对象在其他浏览器中无效。

具体参考官方文档：

（1）大致流程：

（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等功能啦！