使用webview内嵌的H5项目怎么调起H5支付，包含在app环境下中调起微信支付

最近有一个需求是需要我们把我们的项目打包成H5项目，在甲方的小程序内和APP内试使用

调起微信支付踩了很多坑，在微信内置浏览器以及小程序的webView页面内使用H5支付会展示：请在外部浏览器打开，使用微信公众号也就是（jsapi）支付时，使用wx.chooseWXPay依然会调不起微信支付，才知道没有申请公众号，因此在有甲方能够配合的情况下，最简单的方法就是：
在小程序内放一个空白的支付页面，在小程序内的webview打开我们的小程序到支付流程时跳转小程序的空白支付页拉起支付，支付成功或失败时继续跳转回我们的待支付页面。
只需要在空白页面调用小程序的官方api的requestPayment方法就行，参数从我们的h5的页面调用下单接口返回的参数，跳转小程序空白支付页时带上就行。
在app中调起支付还是使用的是H5支付，需要在H5项目中判断是微信内置还是外部浏览器。

在H5项目的下单页面的点击支付方法中

// #ifdef H5
	let linkUrl = data.mwebUrl;    //下单接口返回的mwebUrl，后台处理了链接，将时间戳等一些参数拼接后返回
	//encodeURIComponent转译，避免某些字符传参被限制
	let redirectUrl = '&redirect_url=' +encodeURIComponent(打包后h5页面的下单页面的链接)
	// 首先判断是否是微信内置浏览器，然后再去判断机型android iOS
	var uExplorer = window.navigator.userAgent.toLowerCase()
	//微信内置环境
	if (/micromessenger/.test(uExplorer)) {
		wx.miniProgram.getEnv((res)=>{   
			if (res.miniprogram) {
				//在微信内，在小程序内。
				data.orderId = this.orderId;    //把H5页面的订单ID带着便于支付完成后返回当前H5订单页面查看支付详情
				 // 在小程序内打开此h5页面会返回小程序的参数
				let wxParam = JSON.stringify(data) 
				//跳转小程序的空白支付页面
				wx.miniProgram.navigateTo({url: "/pages/payment/payParams?param="+wxParam});
				return
			}else{
				//在微信内置浏览器，不在小程序里
				console.log("不支持当前调起的支付方式")
				return
			}
		})
	} else {
		const system = uni.getSystemInfoSync()
		//在ios的外部浏览器或者在ios的App中调起h5支付后重定向返回当前下单的h5页面
		if (system.platform == 'ios') {
			window.location.href = linkUrl+redirectUrl
		} else {
			//在android的外部浏览器或者在android的App中调起h5支付
			window.open(linkUrl+redirectUrl)
		}
	}
// #endif

放在小程序里的空白支付页面，直接调用小程序支付

<template>
	<view>
		<web-view :src="pageUrl" v-if="pageUrl">
		</web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageUrl:''
			}
		},
		onLoad(options){
			if(options.param){
				this.param = JSON.parse(options.param)
				this.pay(this.param)
			}
		},
		methods: {
			pay(data){
				var that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: data.timestamp,
					nonceStr: data.noncestr,
					package:  data.package,
					signType: 'MD5',
					paySign: data.sign,
					success(res) {
						uni.showToast({
							title: '微信支付成功',
						})
						// 测试
						that.pageUrl = H5下单页面的链接+订单号;
					},
					fail(res) {
						uni.showToast({
							title: '微信支付失败',
							icon: 'none'
						})
						that.pageUrl = H5下单页面的链接+订单号;
					},
					complete(res) {
						
					}
				})
			}
		}
	}
</script>

这样实现的微信支付给用户的操作感受比较良好，即使在小程序内空白页调起支付也不会有不流畅的感觉，因为拉起支付后屏幕会出现一层黑色的图层，支付完成或失败后都返回的是之前的H5下单页面，想要重新支付那么就重新点击H5页面的支付按钮会重复以上流程。
用H5调起微信支付就这么完成了，可在APP（Android&iOS）中嵌套H5进行拉取H5支付，也可在小程序内跳转H5页面进行微信支付。