uniapp开发安卓app调起H5支付宝支付(Android)

苦逼的猿宝

已于 2023-10-25 14:41:39 修改

阅读量1.9k

点赞数 4

分类专栏： uni-app 文章标签：前端 uni-app javascript 学习 android java

于 2023-10-25 14:40:58 首次发布

本文链接：https://blog.csdn.net/GAGGAAAAA/article/details/134033562

版权

uni-app 专栏收录该内容

17 篇文章 3 订阅

订阅专栏

前言

最近遇到一个客户要求在app内完成H5页面支付宝支付,绞尽脑汁,最终搞出来了.

步骤

第一步

你在第一个页面需要一个支付按钮,或者去支付的操作,(简单来说就是一个方法,跳转支付页面)

注意:这个地方有个坑,可能是能力有限,就是你跳转支付,付完钱,如果你不点完成的话,返回app,此刻后端是拿不到你支付完成或者没有支付完成的这个动作.于是,我就看了一下地铁充值地铁卡的操作

解决办法:就是你点击支付的时候,出现这个弹窗,当用户点击"我知道了",再去跳转支付(暂时只能这样啦)

第二步

如上图,触发这个方法,跳转到,app内的支付宝内嵌页面

第三步

ps:第一个就是内嵌,去uniapp的官网可以查看;

第二个是刚刚第一步跳转过来的参数;

第三个是要跳转到H5页面,的网址和参数(这个H5页面网址需要自己写代码,然后放在服务器上面,拿到这个网址,代码后面有)

第四个是一个比较重要的一步(这个是监听支付宝支付是否完成)

第五个css随便写吧

第四步(这个是H5的代码)

<template>
	<view class="content">
		<!-- 后端生成的表单,使用v-html可以接收 -->
		<view class="alipaysubmit" v-html="formContent"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formContent: '',
			}
		},
		onLoad({
			token,
			useTo,
			userId,
			price,
			id
		}) {
			if (!token) return;
			this.Getpayment(token,userId,useTo,price,id)
		},
		methods: {
			Getpayment(token,userId,useTo,price,id) {
				uni.request({
					// 请求地址
					url: 'http://www.qq.com',
					// 请求方式
					method:'GET',
					// 请求参数
					data:{
						id:id || '',
						price:price,
						useTo:useTo,
						userId:userId
					},
					// 是否携带token
					header: {
						"Authorization":token
					},
					success:(e)=> {
						// 支付成功后拿到表单
						this.formContent = e.data
						// 成功之后的回调
						this.$nextTick(() => {
							// 这个地方要注意,根据表单,所携带的方法去调用提交方法就会显示出,支付界面
							document.forms[0].submit()
						})
					},
					fail(e) {
						//失败之后的回调
						uni.showToast({
							icon:'none',
							msg:e
						})
					}
				})
			},
		}
	}
</script>

<style>
	.alipaysubmit {
		display: none;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

这个H5的代码,不用多说了吧,新建一个项目,把这个代码复制进去,pages.json里面注册这个页面,直接打包就行了,把上面的网址,换成你自己服务器的网址(也可以使用我git的代码,完成打包,替换域名,请求域名即可)

注意:这个里面代码的注释,都有介绍.