一、调起微信支付
在微信浏览器里面打开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等功能啦!
本文向大家介绍C#开发微信公众号接口开发,包括了C#开发微信公众号接口开发的使用技巧和注意事项,需要的朋友参考一下 具体实现方式不多说了,请看下文 一、前言 当下微信公众号几乎已经是每个公司必备的,但是大部分微信公众账号用户体验都欠佳,特别是涉及到用户绑定等,需要用户进行复杂的操作才可以和网站绑定,或者很多公司直接不绑定,而是每次都让用户填写账号密码。作为微信接口开发人员我们知道网页授权可以用作微
本文向大家介绍nodejs微信公众号支付开发,包括了nodejs微信公众号支付开发的使用技巧和注意事项,需要的朋友参考一下 odeJs 微信公众号功能开发,移动端 H5页面调用微信的支付功能。这几天根据公司的需要使用 node 和 h5页面调用微信的支付功能完成支付需求。现在把开发过程重新捋一遍,以帮助更多的开发者顺利的完成微信支付功能的开发。(微信暂时还没有提供 node 的支付功能) 一.请求
上一篇我们介绍了在h5 app 开发微信支付, 这篇我们说一说在微信公众号开发支付。 目录 环境准备 1 需要一个有支付能力的公众号 2 wex5 3.3 及以上版本 3 备案好的域名 4 微信web开发者工具 开发步骤 1 取得参数 2 编译Baas 3 基本URL配置 4 JS接口安全域名、授权回调页域名配置 5 开发UI 5.1 修改参数 5.2 修改代码二 6 配置微信支付授权目录 7
本文向大家介绍.NET微信公众号开发之公众号消息处理,包括了.NET微信公众号开发之公众号消息处理的使用技巧和注意事项,需要的朋友参考一下 一.前言 微信公众平台的消息处理还是比较完善的,有最基本的文本消息,到图文消息,到图片消息,语音消息,视频消息,音乐消息其基本原理都是一样的,只不过所post的xml数据有所差别,在处理消息之前,我们要认真阅读,官方给我们的文档:http://mp.wei
方案1:将公众号授权给智齿 接入效果 授权过程 授权微信公众号给智齿需要智齿客服管理员和微信公众号管理员共同参与,具体步骤如下: 第一步:智齿客服管理员进入智齿管理后台「设置-支持渠道-微信」,点击「绑定公众号」进入授权页,可见微信授权二维码 <微信公众号授权扫码页-电脑端> 第二步:由企业微信公众号管理员在微信端扫码、确认勾选授权哪些权限集给智齿并点击确认授权,完成授权后即算部署完成 <
微信公众号 微信公众号扫码授权以后,用户发往公众号的消息会转发给机器人,机器人会自动回复消息给公众号用户,同一个微信公众号同时只能绑定一个机器人,如果绑定了新的机器人,之前绑定的机器人会解除绑定。 注:微信公众号渠道接入后,仅支持微信文字,语音两种方式问答,用户在微信聊天框输入语音后,客服系统自动识别语音成文字进行答复。 只需三步接入微信公众号,自动回答公众号上的用户问题 1. 创建机器人 注册登
本文向大家介绍C#微信公众号开发 微信事件交互,包括了C#微信公众号开发 微信事件交互的使用技巧和注意事项,需要的朋友参考一下 前言 一切准备工作就绪时就先实现一个关注公众号后向客户端推送一条消息。关注后推送消息需要一个get请求、一个post请求,get请求主要是为了向微信服务器验证,post请求主要就是处理微信消息了。 调接口时传递的appid和appsecret请传递自己公众号对应的参数。
本文向大家介绍php微信公众号开发常用函数?相关面试题,主要包含被问及php微信公众号开发常用函数?时的应答技巧和注意事项,需要的朋友参考一下 把xml数据解析成对象的函数是 simplexml_load_string( ) 将字符串转换为数组的函数是_ explode___, 将数组转化为字符串的函数是implode__. 编码 URL 字符串的字符串是__urlencode____.