铁雪资源网 Design By www.gsvan.com
微信支付功能相比较支付宝支付，有点点繁琐，整理记录下来，以便日后所需
项目用VUE+EL搭建而成，支付用EL的radio来做的
<el-radio v-model="radio" label="weixin" > <i class="iconfont icon-weixin"></i> <div class="list"> <h5>微信支付</h5> <span>推荐安装最新版微信使用</span> </div> </el-radio> <el-radio v-model="radio" label="zhifubao"> <i class="iconfont icon-zhifubao"></i> <div class="list"> <h5>支付宝</h5> <span>推荐有支付宝账户的用户使用</span> </div> </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"") != -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,微信支付
铁雪资源网 Design By www.gsvan.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无Vue实现微信支付功能遇到的坑的评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。