【uniapp】H5跳转微信支付和跳转支付宝支付

H5微信跳转

H5微信支付先分环境：
1，比如，复制链接到游览器，在游览器支付的叫做游览器支付环境，此时你可以直接使用跳转微信支付
2, 但是，如果你是h5在微信里面登录完，再支付，属于微信环境，这时候你如果使用跳转微信，会提醒你.“请到微信外进行支付”，这时候你的微信支付，应该采取微信环境下的h5支付

游览器环境下h5支付

步骤一：获取到后台返回的表单数据

背景：需要在H5微信支付的时候去相应的软件唤起支付

步骤二：渲染表单提交

//res.data.data.payDetail就是后台返回的数据
document.querySelector('body').innerHTML = res.data.data.payDetail;
// 调用submit方法
document.forms[0].submit()

最后，就会跳转到相应的平台进行支付了

微信环境下H5支付

• NPM安装方式（不会用NPM就不要用这种方式）
  npm install jweixin-module --save
• 或者你可以自己引入文件

<script>
var that
var wx = require('jweixin-module')
methods: {
pay(){
		let obj = {
		//下单时候的参数
		}
	api.order_pay(obj).then(res => {
	console.log(res, "返回的签名各种的参数")
	wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: res.data.data.payDetail.appId, // 必填，公众号的唯一标识
			timestamp: res.data.data.payDetail.timeStamp, // 必填，生成签名的时间戳
			nonceStr: res.data.data.payDetail.nonceStr, // 必填，生成签名的随机串
			signature: res.data.data.payDetail.paySign, // 必填，签名
			jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
		})
	wx.ready(function() {
		wx.chooseWXPay({
			timestamp: res.data.data.payDetail.timeStamp, // 时间戳
			nonceStr: res.data.data.payDetail.nonceStr, // 随机数
			package: res.data.data.payDetail.package, //
			signType: res.data.data.payDetail.signType,
			paySign: res.data.data.payDetail.paySign, // 签名
				success: function() {},
				cancel: function() {
				setTimeout(() => {
					uni.showToast({
						title:"取消支付",
						icon: 'none'
					})
				}, 200)
					uni.navigateBack({})
			},
			fail: function() {
				setTimeout(() => {
					uni.showToast({
						title:"支付失败",
						icon: 'none'
					})
				}, 200)
					uni.navigateBack({})
				}
			})
		})
	})
},
</script>

H5支付宝跳转

步骤一：获取到后台返回的表单数据

背景：需要在H5支付宝支付的时候去相应的软件唤起支付

步骤二：渲染表单提交

//res.data.data.payDetail就是后台返回的数据
document.querySelector('body').innerHTML = res.data.data.payDetail;
// 调用submit方法
document.forms[0].submit()

最后，也就会跳转到相应的平台进行支付了

游览器环境下，跳转到微信和跳转到支付宝方式一样