vue 微信公众号的H5支付

在微信浏览器里面打开H5网页中执行JS调起支付，

详细信息请参照微信JSAPI支付文档说明：

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

注意：WeixinJSBridge内置对象在其他浏览器中无效。

自己写的代码如下：

提示信息，可以换成mitui的提示框

 methods: {goPay() {Indicator.open();console.log(2322222222222222222);console.log(this.orderId);console.log(this.getCookie("WeiId"));console.log(this.id);if ((this.orderId != "undefined") && (this.orderId != "null") && (this.orderId != "")) {var ua = navigator.userAgent.toLowerCase();var isWeixin = ua.indexOf('micromessenger') != -1;if (isWeixin) {console.log("在微信浏览器");//用于支付成功和失败页的参数，5个，localStorage.dingdan_id = this.id;  //订单编号localStorage.orderId = this.orderId; //订单idif (document.cookie.indexOf("WeiId=") != -1) {this.openid = this.getCookie("WeiId");console.log(this.openid);if(!this.openid){this.$router.push({path:'/riverDetail'})}this.axios.post("/tiket/wx/jpi/unifiedOrder?orderNum="+localStorage.dingdan_id + "&openid=" + this.openid + "&tradeType=JSAPI").then(res => {Indicator.close();console.log(res);if (res.data.result == 1) {//调起微信公众号支付WeixinJSBridge.invoke('getBrandWCPayRequest', res.data.value,function (res) {if (res.err_msg == "get_brand_wcpay_request:ok") {// alert("支付成功");function chaxun(){Indicator.open();var xhr = new XMLHttpRequest();//alert("id"+localStorage.id);xhr.open('POST', "/ticet/wx/getesult?orderNum="+localStorage.dingdan_id, true);xhr.onload = function () {Indicator.close();//alert("后台测试是否支付成功");console.log("请求成功");var zhifu = JSON.parse(xhr.responseText);//alert(JSON.stringify(zhifu));if (zhifu.result == 1) {//alert("后台测试支付成功-----");window.location.href = "http://trel.enn.cn/encta-tiet/#/river_payMent_success";} else {//alert("后台测试支付失败-----");window.location.href = "http://trel.enn.cn/encta-tiet/#/river_payMent_error?id="+localStorage.orderId+"&lnum="+localStorage.dingdan_id;}}xhr.send(null);}window.setTimeout(chaxun,2000);}if (res.err_msg == "get_brand_wcpay_request:cancel") {//alert("支付过程中用户取消");window.location.href = "http://trel.enn.cn/encta-tiet/#/river_payMent_error?id="+localStorage.orderId+"&lnum="+localStorage.dingdan_id;}});} else if (res.data.result == 2) {alert("后台无此订单信息");} else if (res.data.result == 3) {alert("订单不处于待支付状态");} else if (res.data.result == 4) {alert("后台报错");}}).catch(() => { });} else {Indicator.close();location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxcdbacc55093a60d0&redirect_uri=http%3A%2F%2Fral.enn.cn%2Feata-ti2FriverDetail&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";}} else {Indicator.close();console.log("不在微信浏览器");alert("请在微信浏览器中支付！")}}},getCookie(c_name) {var that = this;if (document.cookie.length > 0) {//检查这个cookie是否存在，不存在就为 -1var c_start = document.cookie.indexOf(c_name + "=")if (c_start != -1) {//获取cookie值的开始位置c_start = c_start + c_name.length + 1;//通过";"号是否存在来判断结束位置var c_end = document.cookie.indexOf(";", c_start);if (c_end == -1) {c_end = document.cookie.length;}//通过substring()得到了值return unescape(document.cookie.substring(c_start, c_end))}}return null}}

vue 微信公众号的H5支付相关推荐

微信公众号接入H5支付
一.概述 1.H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付.主要用于触屏版的手机浏览器请求微信支付的场景.可以方便的 ...
vue 微信公众号开发
vue 微信公众号开发开题上个月初入职了一家新公司.来了新公司很忙.本来计划是在上个月底写一篇博客的,写一下关于新公司的事情. 几度思考之后还是没写.也许做程序员接手别人的项目,都会说别人的项目多 ...
微信公众号：支付宝支付
微信公众号:支付宝支付微信公众号:支付宝支付由于支付宝月微信是两个对立的企业,支付宝想介入微信的充值,微信发现就将其规避,在支付宝与微信博弈的过程中,双方一直是处于你争我赶的地步. 微信公众号接入 ...
(Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班
(Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班从零到壹全栈部落产品:个人独立博客,21点见 Vue + Node + MongoDB支持服务端渲染的博客系统(5天) 开发环境技术 ...
关于微信公众号调起支付
vue微信公众号项目中调起微信支付并发起支付的流程首先在public文件夹下的index.html引入微信JS-SDK <script src="http://res.wx.qq.c ...
vue微信公众号授权开发流程
vue微信公众号授权开发流程项目采用的是vue2.0开发的,还未更新到vue3.0.项目描述:只有通过微信授权登录,不需要绑定手机号. 1.注册公众号,这个不多说了 2.配置公众号在[公众号设置] ...
微信公众号网页 H5 video 标签自动播放
目录微信公众号网页 H5 video 标签自动播放问题描述解决方案微信公众号网页 H5 video 标签自动播放环境:微信公众号网页需求:H5 video 标签自动播放视频 video 标 ...
【UNI-APP】开发微信公众号（H5）JSSDK调式
UNI-APP 开发微信公众号(H5)JSSDK调试安装 - NPM安装方式复制代码npm install jweixin-module --save - 下载使用方式下载地址:https:// ...
UNI-APP 开发微信公众号（H5）JSSDK的使用、微信扫一扫
UNI-APP 开发微信公众号(H5)JSSDK的使用.微信扫一扫自己做了一个h5端调起微信扫一扫的功能,上网一找,没有说得很详细的,依样画葫芦,结果出了很多问题.下面给大家讲一下做的方法,用这个方 ...

vue 微信公众号的H5支付

vue 微信公众号的H5支付相关推荐

最新文章

热门文章