vue 在微信公众号里使用支付宝支付（h5支付宝支付）

需求：在微信公众号里面支持支付宝支付。
思路：微信是不能直接调用支付宝的，所以我们需要使用一个中间页提示用户在浏览器中打开，然后进行支付宝网页或APP中支付。

步骤：

微信中点击支付宝支付时，跳转中间引导页（引导用户在浏览器中打开去唤起支付宝）。
浏览器中打开支付宝，唤起支付后进行支付。
支付成功后根据后台配置的路径页面跳转，根据支付宝返回的url里面的 out_trade_no去查询支付状态（根据自己具体业务需求，比如我这里跳转的是支付成功页，判断url是否有out_trade_no提示用户是否支付完成，然后根据out_trade_no去查单）。

后台返回接收到form表单数据

流程图：

确认订单页	跳转引导页	在游览器打开	选择默认游览器
打开游览器	选择沙箱支付	立即支付	支付成功
支付成功回调	手动切回微信

代码：

点击支付宝支付后，下单成功然后进行支付时：

let ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger"){//微信游览器//跳转中间引导页。参数：ordersId：去中间页使用ordersId请求支付，token：跳转游览器打开时（未登录状态）保存token请求支付接口，jumpBack标识支付后需要返回微信uni.redirectTo({url: '/pages/order/toAlipay?ordersId=' +ordersId + "&token=" + uni.getStorageSync("token") + "&jumpBack=WeChat"});
}else{//普通游览器直接支付const div = document.createElement('div')div.innerHTML = res.data //此处form就是后台返回接收到的数据document.body.appendChild(div)document.forms[0].submit()
}

引导页(/pages/order/toAlipay.vue)

<template><view class="shareit" v-if="is_WeChat"><image class="arrow" src="@/static/my/arrowhead.png"></image><view class="follow">支付宝支付请使用游览器进行支付,<br />请在菜单中选择游览器打开</view></view>
</template><script>
import { ref, reactive, onMounted } from 'vue'; // 引入需要的
import { getCurrentInstance } from 'vue'
import { payAPI, getOrderCheckListAPI } from '@/api/order'export default {setup(props,context){const  { proxy } = getCurrentInstance();const is_WeChat = ref(false)onMounted(() => {console.log(props.ordersId)if(props.ordersId&&props.token){let ua = navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger"){//微信游览器is_WeChat.value = true;//显示引导动作}else{is_WeChat.value = false;//不显示引导动作proxy.$queue.showLoading('支付中...');uni.setStorageSync("token", props.token)uni.setStorageSync("jumpBack", props.jumpBack);//需要跳回微信goToPay(props.ordersId);//去支付}}else{uni.showModal({title: '',content: '参数错误，无ordersId或token！',showCancel: false,success: function (res) {if (res.confirm) {console.log('用户点击确定');uni.removeStorageSync("token")uni.removeStorageSync("jumpBack")} else if (res.cancel) {console.log('用户点击取消');}}});}})const goToPay = (ordersId) => {//支付let para = {ordersId :ordersId}payAPI(para).then((res) => {//订单支付uni.hideLoading();const div = document.createElement('div')div.innerHTML = res.data //此处form就是后台返回接收到的数据document.body.appendChild(div)document.forms[0].submit()}).catch((err) => {uni.hideLoading();goToOrderDetails(ordersId);//支付失败直接跳转订单详情console.log(err);});}const orderPolling=(ordersId)=>{//订单轮询proxy.$queue.showLoading('支付信息查询中..');var timerNum = 0;var timer = setInterval(function(){//最多遍历10次查单if(timerNum === 10){    uni.hideLoading();proxy.$queue.showToast("稍后进入订单详情页核实订单状态，不要重复发起支付");   clearInterval(timer);   goToOrderDetails(ordersId);//跳转订单详情   }else{timerNum += 1;getOrderCheckList(ordersId,timer);//支付成功后进行轮询查单}},1000);}const getOrderCheckList=(ordersId,timer)=>{//支付成功后进行轮询查单let params = {ordersId:ordersId}getOrderCheckListAPI(params).then((res) => {if(res.data){if(res.data.payStatus==1){clearInterval(timer);//清除定时器uni.hideLoading();proxy.$queue.showToast("支付成功");goToOrderPay(ordersId);//跳转订单成功页}}}).catch((err) => {console.log(err);});}const goToOrderDetails =(ordersId)=>{//跳转订单详情uni.redirectTo({url: '/pages/order/orderDetails?ordersId=' +ordersId});}const goToOrderPay =(ordersId)=>{//跳转订单成功页uni.redirectTo({url: '/pages/order/pay?ordersId=' +ordersId});}return {is_WeChat,goToPay,orderPolling,getOrderCheckList,goToOrderDetails,goToOrderPay}},onLoad(e){let ua = navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger"){//微信游览器uni.setStorageSync("AliPayOrdersId", e.ordersId);//缓存ordersId，方便后面支付成功后订单轮询查单}},onShow(){//#ifdef H5let ua = navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger"){//微信游览器let that = thisif(uni.getStorageSync("AliPayOrdersId")){//支付成功后跳回微信时that.is_WeChat = false;let ordersId = uni.getStorageSync("AliPayOrdersId");uni.removeStorageSync("AliPayOrdersId");that.orderPolling(ordersId);//订单轮询}}//#endif}
}
</script><style  lang="scss">
.shareit {-webkit-user-select: none;position: fixed;width: 100%;height: 100vh;background: rgba(0, 0, 0, 0.6);text-align: center;top: 0;left: 0;z-index: 999;
}
.shareit img {max-width: 100%;
}
.arrow {width: 200rpx;height: 300rpx;position: absolute;right: 5%;top: 1%;
}
.follow {margin-right: 120rpx;margin-left: 60rpx;width: 90%;// height: 100rpx;line-height: 60rpx;// text-align: left;text-decoration: none;font-size: 36rpx;color: white;float: left;margin-top: 360rpx;
}
</style>

支付成功页(/pages/order/pay.vue)

<template><view class="container"><view v-if="!jumpBack"><view class="title">支付成功</view><view class="title2">您可随时在「订单」中查看订单详情</view><view><button class="btn gradient-btn" @click="goToOrderDetails">查看订单详情</button></view></view><view v-if="jumpBack"><view class="title">支付成功</view><view class="title2">请您手动退回微信！</view></view></view>
</template><script>import {  ref,reactive, onMounted } from 'vue'; // 引入需要的import { getCurrentInstance } from 'vue'import { getOrderCheckListAPI } from '@/api/order'export default {setup(props){const  { proxy } = getCurrentInstance();const jumpBack = ref(false)onMounted(() => {// console.log("获取到的参数", props);console.log(props)})const goToOrderDetails = () => {if(props.out_trade_no){//h5支付宝回调uni.redirectTo({url: '/pages/order/orderDetails?ordersNo=' + props.out_trade_no});}else{uni.redirectTo({url: '/pages/order/orderDetails?ordersId=' + props.ordersId});}}const getOrderCheckListAli=(ordersNo,timer)=>{//支付成功后进行轮询查单let params = {ordersNo:ordersNo}getOrderCheckListAPI(params).then((res) => {if(res.data){if(res.data.payStatus==1){clearInterval(timer);//清除定时器uni.hideLoading();proxy.$queue.showToast("支付成功");}}}).catch((err) => {console.log(err);});}return {jumpBack,goToOrderDetails,getOrderCheckListAli}},onLoad(e){},onShow(){//#ifdef H5let that = thisif(this.$queue.getUrlCode().out_trade_no&&uni.getStorageSync("jumpBack")=="WeChat"){//微信里使用支付宝支付that.jumpBack = trueuni.showModal({title: '提示',content: '支付成功，请您手动退回微信！',showCancel: false,success: function (res) {if (res.confirm) {console.log('用户点击确定');uni.removeStorageSync("token");uni.removeStorageSync("jumpBack");} else if (res.cancel) {console.log('用户点击取消');}}});}else if(this.$queue.getUrlCode().out_trade_no){//h5普通游览器支付宝支付回调let ordersNo = this.$queue.getUrlCode().out_trade_nouni.showModal({title: '',content: '请确认支付宝支付是否已完成',confirmText:"已完成支付",cancelText:"支付有问题，重新下单",confirmColor:"#2FA15E",success: function (res) {if (res.confirm) {that.$queue.showLoading('支付信息查询中..');var timerNum = 0;var timer = setInterval(function(){if(timerNum === 10){ uni.hideLoading();that.$queue.showToast("支付信息查询失败，请稍后刷新重试");   clearInterval(timer);   }else{timerNum += 1;that.getOrderCheckListAli(ordersNo,timer);//支付成功后进行轮询查单}},1000);} else if (res.cancel) {// console.log('用户点击取消');}}});}//#endif},}
</script><style lang="scss">.container{height: 800rpx;display: flex;width: 100%;align-items: center;justify-content: center;}.title{font-size: 48rpx;font-weight: 600;color: $my-text-color;line-height: 64rpx;text-align: center;}.title2{font-size: 28rpx;font-weight: 400;color: $my-text-color;line-height: 36rpx;margin: 24rpx 0 48rpx 0;}.btn{width: 252rpx;height: 72rpx;background: $my-btn-bg-color;border-radius: 36rpx;color: $my-text-color4;font-weight: 500;font-size: 28rpx;}
</style>

注意：IOS在微信公众号里使用浏览器打开时，如果有该软件的APP并且配置了Universal links（通用链接），IOS会直接识别Universal links跳转到APP中，除非手机上没有这个软件的APP

vue 在微信公众号里使用支付宝支付（h5支付宝支付）相关推荐

SAP系统和微信集成的系列教程之八：100行代码在微信公众号里集成地图搜索功能
本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上. 系列目录 (1) 微信开发环境的搭建 (2) 如何通过微信公众号消费API (3) 微信用户关注公众号之后,自 ...
设置网页打开默认全屏_微信公众号里的视频不能进行全屏播放的解决方法
我们手机版的微信视频,发现视频播放只能竖屏播放,点击右下角对放大按钮也是如此,网页版也是小窗口播放,而视频这样显示特别影响我们的观看感受, 下面说下微信公众号里的视频不能进行全屏播放的解决方法. 1. ...
微信公众号里放XLS链接教程
微信公众号里放XLS链接的教程我们都知道创建一个微信公众号,在公众号中发布一些文章是非常简单的,但公众号添加附件下载的功能却被限制,如今可以使用小程序"微附件"进行在公众号中添加 ...
vue开发微信公众号可视化配置菜单
vue开发微信公众号可视化配置菜单其实一开始我也是懵逼的,我搞不懂微信公众号后台其实已经很好用了,为什么还需要开发一个模仿微信公众号后台的系统呢?而且微信公众号可以绑定多个运营者,都可以和管理员一样 ...
微信公众号如何获取手机号，H5调用小程序，小程序调用H5
都知道微信公众号获取不到手机号,但是小程序可以. 今天大早晨老大死磕非要我公众号授权获取到手机号.没办法我还是有其他方法解决. 第一步:服务号添加一个小程序,网上有很多小程序授权的代码.确定小程序可以 ...
.net开发 abp框架+vue的微信公众号的微信授权
1.在进行微信开发之前你首先你得需要一个微信公众号(具体的申请步骤省略) 2.进行微信开发的开发配置(我这里是配置一个测试账号后面的微信支付还是要走微信公众号配置是一样的) URL为微信开发 ...
vue开发微信公众号之文件下载
开发微信公众号实现文件下载的时候问题就出现了,一般网站做法就用不了,因为微信内置浏览器不支持下载文件,这就需要你用外部浏览器了(一般都是用手机自带的浏览器). 这边你需要新建一个中转页面,提醒用户要通 ...
Vue实现微信公众号授权登录
新建个文件wechatAuth.js 这个文件可以不用更改 const queryString = require('qs') // 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转 ...
公众号开发(2) —— 盛派.net SDK + vue搭建微信公众号网页开发框架
需求:通过微信公众号菜单跳转到手机端网页,跳转后通过微信授权登录获取微信公众号用户的OpenId(用户关注公众号后,用户在公众号的唯一凭证),通过OpenId和后台数据库用户信息绑定起来并实现一些业务 ...

vue 在微信公众号里使用支付宝支付（h5支付宝支付）

vue 在微信公众号里使用支付宝支付（h5支付宝支付）

步骤：

流程图：

代码：

点击支付宝支付后，下单成功然后进行支付时：

引导页(/pages/order/toAlipay.vue)

支付成功页(/pages/order/pay.vue)

注意：IOS在微信公众号里使用浏览器打开时，如果有该软件的APP并且配置了Universal links（通用链接），IOS会直接识别Universal links跳转到APP中，除非手机上没有这个软件的APP

vue 在微信公众号里使用支付宝支付（h5支付宝支付）相关推荐

最新文章

热门文章