uniapp app端使用webview 跳转外部链接后，返回app端。（stripe pay 支付）

小白猿

已于 2024-02-19 13:57:21 修改

阅读量1.2k

点赞数 11

分类专栏： uni-app webview stripe 文章标签： uni-app webview vue 前端

于 2024-01-15 14:33:52 首次发布

本文链接：https://blog.csdn.net/qq_42386231/article/details/135600324

版权

uni-app 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

webview

1 篇文章 0 订阅

订阅专栏

stripe

1 篇文章 0 订阅

订阅专栏

项目需求：app使用webview打开stripe pay支付页面，支付成功或失败的回调地址必须是网络地址，所以需要在回调的网络地址页面跳转回app。

1、在下单页面跳转到webview页面，携带stripe pay 支付链接

// #ifdef APP
uni.redirectTo({
	url: '/pages/payment/webview?stripeURL='+res.data.text
})
// #endif

2、新建webview页面，接收传递过来的stripeURL

<template>
	<view>
		<web-view :src="props.stripeURL"></web-view>
	</view>
</template>

<script setup>
	const props = defineProps({
		stripeURL: ''
	})
</script>

3、新建PayClosed.html，作为中间页跳回app

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!--强制浏览器以竖屏的布局来显示页面，缩放比例为1，最小缩放值为1，最大缩放值为1，用户缩放设置为不允许-->
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />-->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 删除苹果默认的工具栏和菜单栏 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- 设置苹果工具栏颜色 -->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
		<!-- 启用360浏览器的极速模式(webkit) -->
		<meta name="renderer" content="webkit">
		<!-- 避免IE使用兼容模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 微软的老式浏览器 -->
		<meta name="MobileOptimized" content="320">
		<!-- uc强制竖屏 -->
		<!--<meta name="screen-orientation" content="portrait">-->
		<!-- QQ强制竖屏 -->
		<meta name="x5-orientation" content="portrait">
		<!-- UC强制全屏 -->
		<!--<meta name="full-screen" content="yes">-->
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true">
		<!-- UC应用模式 -->
		<meta name="browsermode" content="application">
		<!-- QQ应用模式 -->
		<meta name="x5-page-mode" content="app">
		<!-- windows phone 点击无高光 -->
		<meta name="msapplication-tap-highlight" content="no">
		<title>關閉支付頁面</title>
	</head>
	<body>
		<p class="test"><span id="num"></span>s后自動關閉頁面或</p>
		<p id="test">點擊關閉頁面</p>
	</body>
</html>

<!-- uni 的 SDK，必须引用。 -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js">
</script>
<script>
	var num = 3;
	document.addEventListener('UniAppJSBridgeReady', function() {
		document.getElementById("num").innerHTML = num
		var timer = setInterval(() => {
			if (num <= 0) {
				clearInterval(timer)
				return uni.redirectTo({
					url: '/pages/payment/CheckOut'
				});
			}
			num--
			document.getElementById("num").innerHTML = num
		}, 1000);

		document.getElementById('test').addEventListener('click', function(evt) {
			uni.redirectTo({
				url: '/pages/payment/CheckOut'
			});
		});
	});
</script>

<style>
	#test,
	.test {
		text-align: center;
		color: #dcc69e;
		font-size: 22px;
	}

	.test {
		margin-top: 100px;
	}
</style>