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()

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

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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐