Vue开发Html5微信公众号的做法
- 更新时间:2020-07-26 09:41:44
- 编辑:魏宏扬
参考资料
正文内容
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等功能啦!
相关教程
-
如何解决vue单页面在微信下只能分享落地页
这篇文章主要介绍了vue单页面在微信下只能分享落地页的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
发布时间:2020-01-22
-
vue微信分享到朋友圈以及发送好友的代码
这篇文章主要为大家详细介绍了vue微信分享到朋友圈,vue微信发送给好友功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
发布时间:2020-01-12
-
详解用vscode开发vue应用
这篇文章主要介绍了用vscode开发vue应用的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
发布时间:2020-01-27
-
vue-cli开发时ajax跨域的方法
下面小编就为大家分享一篇vue-cli开发时,关于ajax跨域的解决方法(推荐),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
发布时间:2019-11-18
-
详解Vue递归组件+Vuex开发树形组件Tree--递归组件
这篇文章也是我自己开发的从无到有的过程,所以它可以为你提供一些Tree组件开发的思路,本文重点给大家介绍vue递归组件的简单实现,感兴趣的朋友跟随小编一起看看吧
发布时间:2020-02-14
-
Vue.js项目实战
Vue实用、灵便、更快,为搭建详细的当代Web运用出示了需要的全部作用,其渐进式的特性也让开发人员可以轻轻松松入门,发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英
大小:141 MBVue
-
Vue.js快速入门
目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。 全书分为8章,内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等,最后还给出一个实战案例供读者了解Vue.js项目开发过程。 本书适合Vue.js初学者、Web前端开发人员,也适合高等院校和培训学校的师生教学参考。
大小:26581 MB MVue.js入门
-
水晶石技法VUE 10完全学习手册
《水晶石技法 VUE 10完全学习手册》共14章,以实例为主,共提供了50多个制作实例。第1~3章对VUE进行了总体介绍。第4~12章通过大量的实例,分别介绍了VUE的各个功能模块,包括大气、材质、地形、生态系统、函数、动画、渲染,以及VUE和其他软件的结合使用(比如,3ds Max、Poser等)。第13章安排了两个综合实例,让读者在较为全面地了解了VUE的功能之后,综合使用各个知识点来完成更为大型的实例。在本书最后的第14章中,列出了VUE使用过程中的一些常见
大小:114191 MB VUE10学习手册
-
Node.js实战:使用Egg.js+Vue.js+Docker构建渐进式、可持续集成与交付应用
大小:227 MBNode.js电子书
-
Vue.js项目开发实战
大小:186.6 MBVue.js电子书