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

一、调起微信支付

在微信浏览器里面打开H5网页中执行JS调起支付,WeixinJSBridge内置对象在其他浏览器中无效。

具体参考官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

(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等功能啦!

(0)

相关推荐

  • vue 做移动端微信公众号采坑经验记录

    自己用vue做微信公众号项目有一段时间了,遇到各种奇葩的问题,下面细数那些坑: 第一坑:微信分享导致安卓手机无法调起相册和无法调起微信充值 解决方案: setTimeout(_ => { wx.config(sdkConfig) }, 500) 需要将微信分享延迟500毫秒,这样就解决了安卓手机无法调用相册和微信充值的问题,如果用了微信分享需要加个延迟. 第二坑:部分手机第三方输入法会将页面网上挤的问题 解决方案: // 特定需求页面,比如评论页面,输入框在顶部之类的 const interva

  • vue项目使用微信公众号支付总结及遇到的坑

    微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档: 使用的vuex,在mutations中 wechatPay (state, data) { state.payObject = data console.log('微信支付开始请求') if (wechat) { wx.chooseWXPay({ timestamp: state.payObject.timeStamp, // 支付签名时间戳 nonceStr: state.payObject.nonceStr, // 支付签

  • vue中使用微信公众号js-sdk踩坑记录

    最近又在vue中捣鼓了下微信公众号api的接入,不得不说这里边水是真的深啊,上次分享了微信授权登录和js-sdk签名的部分,其中很多朋友私信我表示了疑惑,今天我就再次尝试理顺一下这里边的坑吧: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 分享页面到朋友圈 上文是从官方文档

  • Vue.js 实现微信公众号菜单编辑器功能(二)

    Vue.js 实现微信公众号菜单编辑器功能(一)上一篇菜单的点击和添加菜单功能已经在模版实现了,接下来实现菜单的编辑功能 实现菜单删除方法 在vue实例中添加删除菜单方法,根据选中的菜单级别和索引来删除. methods: { //删除菜单 delMenu:function(){ //删除主菜单 if(this.selectedMenuLevel()==1&&confirm('删除后菜单下设置的子菜单也将被删除')){ if(this.selectedMenuIndex===0){ thi

  • Vue.js 实现微信公众号菜单编辑器功能(一)

    学习一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下 具体样式代码查看项目github 创建一个vue实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"&g

  • 详解Vue微信公众号开发踩坑全记录

    本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中涉及签名和token校验依赖服务端 JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到IOS和android微信客户端浏览器内核的差异性导致的兼容问题 解决方案

  • 巧用Vue.js+Vuex制作专门收藏微信公众号的app

    本文一步一步教大家如何利用Vue.js + Vuex制作专门收藏微信公众号的app 项目地址: https://github.com/jrainlau/wechat-subscriptor 下载&运行 git clone git@github.com:jrainlau/wechat-subscriptor.git cd wechat-subscriptor && npm install npm run dev   // run in dev mode cd backend-serv

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

    一.调起微信支付 在微信浏览器里面打开H5网页中执行JS调起支付,WeixinJSBridge内置对象在其他浏览器中无效. 具体参考官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 (1)大致流程: (2)调用代码示例: mounted(){ if (typeof WeixinJSBridge == "undefined") { if (document.addEventListe

  • C#微信开发之微信公众号标签管理功能

    微信公众号,仿照企业号的思路,增加了标签管理的功能,对关注的粉丝可以设置标签管理,实现更加方便的分组管理功能.开发者可以使用用户标签管理的相关接口,实现对公众号的标签进行创建.查询.修改.删除等操作,也可以对用户进行打标签.取消标签等操作.本篇随笔主要介绍如何利用C#对公众号这个较新的特性进行封装,实现对标签的管理功能. 1.标签功能介绍 1)标签功能替代分组功能,支持多维度定义用户属性 运营者可登录公众平台后台,点击左侧菜单"用户管理"后管理已关注用户,点击其中一个用户右侧的&quo

  • java微信公众号开发第一步 公众号接入和access_token管理

    本文就来说一说微信开发第一步,公众号接入以及access_token的管理. 一.微信公众号接入 在微信公众号开发手册上,关于公众号接入这一节内容还是写的比较详细的,文档中说接入公众号需要3个步骤,分别是: 1.填写服务器配置 2.验证服务器地址的有效性 3.依据接口文档实现业务逻辑 其实,第3步已经不能算做公众号接入的步骤,而是接入之后,开发人员可以根据微信公众号提供的接口所能做的一些开发. 第1步中服务器配置包含服务器地址(URL).Token和EncodingAESKey. 服务器地址即公

  • 微信公众号可通过现金红包接口发放微信支付现金红包(附开发教程)

    农历新年将至,支付宝红包打了一仗,微信在朋友圈屏蔽了它的分享,但单防守还不行,进攻才是最好的防守.昨日,微信支付现金红包接口正式开放,只需开通微信支付,即可接入现金红包.微信公众号也可以发放现金红包了! 通过现金红包接口,公众号开发者可以策划相关运营活动,向用户发放微信支付现金红包,更好的达到品牌推广及回馈用户的效果. 1.商户调用接口时,通过指定发送对象以及发送金额的方式发放红包,这样的方式,允许商户灵活的应用于各种各样丰富的活动场景 2.领取到红包后,用户的资金直接进入微信零钱,避免繁复的领

随机推荐