uniapp多端支付，里面的H5调起支付宝支付，分为微信内置浏览器和普通浏览器

源代码和出现的问题：

<template></template>
<script>
	toPay(orderNumber) {
					let token = uni.getStorageSync('token');
					let query = `?orderNumber=${orderNumber}&token=${token}&payWay=${this.payWay}`;
					if (this.payPrice() == 0) {
						let url = `${this.jk.orderPay}${query}`;
						this.ajax.get(url).then(res => {
							uni.hideLoading();
							this.common.UreLaunch('/pages/other/succ');
						});
					} else {
						if (this.payWay == 1) { //支付宝
							//#ifdef APP-PLUS
							//console.log('plus app')
							let wv = plus.webview.create("", "custom-webview", {
								// plusrequire:"none",
								'uni-app': 'none',
							});
							wv.loadURL(`${urlConfig}${this.jk.orderPay}${query}` +'&isApp=0');
							//#endif
							//#ifndef APP-PLUS 
							let url = `${urlConfig}${this.jk.orderPay}${query}`;
									location.href = url;
							//#endif
						} else if (this.payWay == 2) { //微信
							//#ifdef APP-PLUS
						
							//#endif
							//#ifndef APP-PLUS
							//判断是否在微信内置浏览器中
							const isWeChat = /MicroMessenger/i.test(navigator.userAgent);
							if (isWeChat) {
							} else {
							}
							//#endif
						}
					}
					uni.hideLoading();
				},
</script>

问题描述：

想实现成这样：

问题原因：

中间出现的插曲：（附加明白的知识点）

解决方法：引导页加这个方法链接。

uniapp h5支付宝支付后端返回Form表单，前端如何处理_支付宝支付返回form表单-优快云博客

order.vue订单页面的代码

补充：这里的支付宝支付还给后端传了字段，让后端判断一下，如果是app调起的支付，让后端返回url地址，如果是H5调起的支付，让后端返回from表单。

<template></template>
<script>
	toPay(orderNumber) {
					let token = uni.getStorageSync('token');
					let query = `?orderNumber=${orderNumber}&token=${token}&payWay=${this.payWay}`;
					if (this.payPrice() == 0) {
						let url = `${this.jk.orderPay}${query}`;
						this.ajax.get(url).then(res => {
							uni.hideLoading();
							this.common.UreLaunch('/pages/other/succ');
						});
					} else {
						if (this.payWay == 1) { //支付宝
							//#ifdef APP-PLUS
							//console.log('plus app')
							let wv = plus.webview.create("", "custom-webview", {
								// plusrequire:"none",
								'uni-app': 'none',
							});
							wv.loadURL(`${urlConfig}${this.jk.orderPay}${query}` +'&isApp=0');
							//#endif
							//#ifndef APP-PLUS 
							let url = `${this.jk.orderPay}${query}`+'&isApp=1';
							let sign = Date.now();
							this.ajax.get(url).then(res => {
								let sub = res.data;
								let cleanedHtml = sub.replace(/<script.*?>[\s\S]*?<\/script>/gi, '');
								let data1 = {
									sign: sign,
									body : cleanedHtml
								}
								console.log(data1);
								this.ajax.post(this.jk.AlipayPost, data1).then(res => {
									uni.navigateTo({
										url: '/pages/product/paymentPage?sign=' +sign
									})
								})
							}).catch(err => {
								console.error('请求错误', err)
							})
							//#endif
						} else if (this.payWay == 2) { //微信
							//#ifdef APP-PLUS
						
							//#endif
							//#ifndef APP-PLUS
							//判断是否在微信内置浏览器中
							const isWeChat = /MicroMessenger/i.test(navigator.userAgent);
							if (isWeChat) {
							} else {

							}
							//#endif
						}
					}
					uni.hideLoading();
				},
</script>

跳转引导页面的代码

<template>
	<view>
		<view :class="!show?'back back-common':'back-common'">
			<image src="../../static/jianjianjian.png"
				style="width: 20%; height: 12%; margin-left: 600rpx; margin-top: -100rpx;"></image>
				<view style="font-size: 35rpx;"> 请在菜单中选择在浏览器中打开，以完成支付</view>
			<image v-if="isWeixin && !isIOS" src="../../static/mapliulanqi.png" style="width: 23%; height: 10%; margin-top: 100rpx; margin-bottom: 20rpx; "></image>
			<image v-else-if="isWeixin && isIOS" src="../../static/lalalalalall.png" style="width: 30%; height: 14%; margin-top: 100rpx;"></image>
			<view v-if="isWeixin && !isIOS">在浏览器中打开</view>
			<view v-else-if="isWeixin && isIOS">在Safari中打开</view>
		</view>
		<div class="body">
		</div>
	</view>
</template>

<script>
	import common from '../../common/common.js';
	export default {
		data() {
			return {
				formUrl: '',
				show: false,
				isWeixin: false,
				isIOS: false,
			};
		},
		onLoad() {
			let sign = this.$route.query.sign
			if(sign){
				this.getForm(sign)
			}
			
		},
		mounted() {
			common.hidePageHeadInWechat();
		},
		methods: {
			getForm(sign) {
			        this.ajax.get(this.jk.AlipayGet + '?sign=' + sign).then(res => {
			            this.formUrl = res.data
			            this.IsWeixin(); // 调用 IsWeixin 方法
			        });
			    },
			    IsWeixin() {
			        var ua = window.navigator.userAgent.toLowerCase();
			        this.isWeixin = /micromessenger/i.test(ua);
			        this.isIOS = /iphone|ipad|ipod/i.test(ua);
			
			        if (!this.isWeixin) {
			            if (this.formUrl) {
			                document.querySelector('body').innerHTML = this.formUrl;
			            } else {
			                console.log("没有订单");
			            }
			            setTimeout(() => {
			                this.$nextTick(() => {
			                    if (document.forms['0']) {
			                        document.forms['0'].submit();
			                    }
			                });
			            }, 500);
			        } else {
			            this.show = true;
			        }
			    }


		}
	};
</script>

<style lang="less">
	.back {
		display: none;
	}


	.back-common {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.0.2);
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
		width: 100%;
		margin-top: -400rpx;
	}
</style>

引导页面的效果图：（安卓内置浏览器和苹果内置浏览器不一样的图标，做的有判断）

涉及到的知识点：涉及到很多东西,登录鉴权,调用支付拼接参数,还有支付完成的回调,以及支付参数的编码转换等等