vue 微信支付的坑_Vue实现微信支付功能遇到的坑
微信支付功能相比较支付宝支付,有点点繁琐,整理记录下来,以便日后所需
项目用VUE+EL搭建而成,支付用EL的radio来做的
微信支付
推荐安装最新版微信使用
支付宝
推荐有支付宝账户的用户使用
坑来了。。。。
之前一直是前端请求后台接口,后台调取微信支付接口,但点击微信支付后一直提示跨域、重定向问题
就是这个坑,问了好多人,都在说是不是没有配置安全域名或接口白名单什么的,但后端真真的已经配置了,后来我们换了一种方法,由前端来提供code 授权成功之后,返回给后端
在mounted()获取code:
this.code = ''
var local = window.location.href // 获取页面url
var appid = ''
this.code = getUrlCode().code // 截取code
if (this.code == null || this.code === ''){
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
};
function getUrlCode(){
var url = location.search
// this.winUrl = url
// alert(this.winUrl)
var theRequest = new Object()
if (url.indexOf("?") != -1){
var str = url.substr(1)
var strs = str.split("&")
for(var i = 0; i < strs.length; i ++){
theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1])
}
}
return theRequest
};
然后再点击按钮中写判断了
methods:{
Compay(){
let radio_data = this.radio
if(radio_data == 'weixin'){
if (this.code) { // 如果没有code,则去请求
this.$axios({
method: "post",
url: "后台接口",
params: {code: this.code} //将code传给后台,如果有其他参数需要传递,请一并传递
}).then((res)=>{
//调取微信支付
var that = this;
function onBridgeReady(){
WeixinJSBridge.invoke("getBrandWCPayRequest",{
appId: res.data.appId, //公众号名称,由商户传入
timeStamp: res.data.timeStamp, //时间戳,自1970年以来的秒数
nonceStr: res.data.nonceStr, //随机串
package: res.data.package,
signType: res.data.signType, //微信签名方式:
paySign: res.data.paySign //微信签名sign
},
function(res){
if (res.err_msg == "get_brand_wcpay_request:ok"){
alert('恭喜您,支付成功!')
}else if(res.err_msg == "get_brand_wcpay_request:cancel"){
alert('支付失败!');
}else if (res.err_msg == "get_brand_wcpay_request:fail"){
alert('调起微信支付失败');
}
}
);
}
onBridgeReady();
//微信支付
})
}
}else if(radio_data == 'zhifubao'){
this.$axios.post('后台接口',data).then((res)=> {
this.html = res.data
var form= res.data;
const div = document.createElement('div') //创建div
div.innerHTML = form//此处form就是后台返回接收到的数据
document.body.appendChild(div)
var queryParam = ''; Array.prototype.slice.call(document.querySelectorAll("input[type=hidden]")).forEach(function (ele) {
queryParam += '&' + ele.name + "=" + encodeURIComponent(ele.value);
});
var gotoUrl = document.querySelector("#alipaysubmit").getAttribute('action') + queryParam;
_AP.pay(gotoUrl); //在微信中用浏览器跳转到支付宝支付
})
}
}
}
总结
以上所述是小编给大家介绍的Vue实现微信支付功能遇到的坑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
vue 微信支付的坑_Vue实现微信支付功能遇到的坑相关推荐
- vue移动端过渡动画_Vue仿微信app页面跳转动画效果
10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...
- vue 微信公众号支付接口_vue做微信公众号分享,支付
在前段时间做了一个微信公众号,因为我又是新手,没什么经验,拿起vue就开始,导致一坑再坑,简直阔怕!!! 对于此次项目,我主要用到的是vue的整框架和必要的插件,但是我没用vuex,用vuex的话会方 ...
- 微信vue路由跳转兼容_Vue微信公众号开发踩坑记录
需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中 ...
- 微信小程序中嵌套html_微信小程序:web-view嵌套H5实现微信支付功能解决方案及填坑...
ab7117c7d4947210c39e126a01d23ede.jpg 最近一个多月加班比较严重,偶尔休息一天也是在补睡眠+陪家人,比较长时间没有来进行总结记录了.今天不加班,开始为这段时间做的东西 ...
- vue支付宝html,vue 解决在微信内置浏览器中调用支付宝支付的情况
我的思路大概是这样的 1. 验证是否是在微信内置浏览器中调用支付宝 2.给支付页面的url加上调用接口所需的参数(因为在微信里是不能直接调用支付宝的需要调用外部浏览器) 3.在外部浏览器中完成支付跳转 ...
- RTFM:腾讯微信公众号H5页面使用微信支付爬坑记
一. 微信公众号支付的流程 公众号的页面会在微信环境下打开,所以默认已经有登录态.openID.AppID.AppSecret 都能拿到,申请开通商家支付之后会有 PayKey 和 mch_id (商 ...
- 腾讯游戏登录和接入米大师游戏币托管模式支付(入坑指南,微信支付)
登录我没遇到头疼的问题,主要是在支付上: 充值时序: 扣款时序: 坑1:请求地址https://ysdktest.qq.com/mpay/get_balance_m 签名时是需要在url前面拼接上&q ...
- php接入微信支付,扫码支付和H5支付(非微信浏览器),基于thinkPHP框架 WeChatDeveloper支付类包 踩坑指南
此文章入选<PHP领域内容榜>第4名 文章介绍 本文主要介绍通过thinkPHP5和第三方支付类包(WeChatDeveloper)实现快速接入微信扫码支付和微信H5手机网站支付(非微信浏 ...
- Vue 爬坑之旅 -- 微信网页授权
现在的 H5 开发,微信授权和微信分享基本是必备功能,昨天将微信分享的相关功能和踩坑过程做了一个总结,今天就来说下微信授权的功能具体到 vue 项目中该要怎么做. Vue 爬坑之旅 – history ...
最新文章
- 2021全国高校计算机能力挑战赛(初赛)Java试题三
- RouterOS建立PPPOE服务器
- bae 3.0 mysql_bae3.0 mysql 有时报错?报错-问答-阿里云开发者社区-阿里云
- 解决pip安装时,下载速度慢的问题
- Android Studio的git功能的使用
- 今天收拾了个电脑抽屉,发现原来我是个有钱人
- mysql show full processlist;_mysql show full processlist 详解
- django-vue-admin脚手架快速开发CRUD教程
- android staticlayout使用讲解,可实现文本绘制换行处理
- JavaScript高级程序设计学习(二)之基本概念
- Total Commander如何设置自定义快捷键在当前目录打开ConEmu
- Tomcat Connector的三种运行模式【bio、nio、apr】
- Windows XP 开机优化
- Laravel框架教程 入门篇(一)
- python热身教程_[转载]技术教程-MayaPython教程二之Python
- Ubuntu18.04安装教程
- nods中mysql时间相差8小时
- 董明珠这一年:格力造芯与银隆困局
- ArcGIS 解决影像裁剪后锯齿问题
- 2020Web应用防火墙 (WAF)榜单TOP30
热门文章
- Android模拟手机拨号器
- 开源的 Switch 模拟器——GitHub 热点速览 v.21.12
- python适合做嵌入式开发吗_python可以做嵌入式吗
- 来自知乎的Android学习总结
- 拼夕夕买家订单数据提取
- python Process finished with exit code -1073741571 (0xC00000FD)
- 梦幻手游服务器维护期间不能改名,《梦幻西游手游》不能说话解决方法 打字显示系统维护中是如何回事...
- 项目管理(项目经理)与规划
- android 通话背景音,360 Vizza设置通话背景音的方法
- 当CollapsingToolbarLayout与ToolBar如何设置Title居中