小程序h5相互跳转传参

最近做了一个不知道怎么形容的功能...在小程序里面使用webview嵌入h5页面，一个商城，小程序里面需要把登录信息openid传给h5登录，在h5选购东西，购买生成订单，h5将order_id传给小程序，在小程序调方法付款，付完款在小程序里面把支付状态传给h5...踩坑无数，话不多说，敬我踩过的坑们！（小程序是vue3的，h5是vue2的）

一、小程序嵌入webview（h5）传参

小程序通过在链接后面挂参数传值给h5

<web-view :src="linkPath"></web-view>

let linkPath = ref('')
onTabItemTap(() => {  // 切换tabbar触发，根据个人需求写在哪个方法里面
	if (!getToken()) {
		wx.showLoading({
			title: '登录中'
		})
		wx.login({
			success(res) {
				if (res.code) {
					wx.request({
						url: `${config.base_url}/user/miniProLogin`,
						method: 'POST',
						data: {
							code: res.code
						},
						async success(resLogin) {
							uni.setStorageSync('openId', resLogin.data.data.openid)
							uni.setStorageSync('username', resLogin.data.data.username)
							wx.hideLoading()
							if (resLogin.data.code != 1) return toast('登录失败')
							setToken(resLogin.data.data.token)
							toast('登录成功', 'success')
							await go()
						}
					})
				}
			},
			fail(err) {
				wx.hideLoading()
				toast('微信登录失败')
			}
		})
	} else {
		go()
    }
})
// 跳转webview(已登录状态)
const go = () => {
		let randStr = new Date().getTime() + '' + Math.round(Math.random() * 10000); // 时间戳，避免缓存
		let path = "https://****************/h5/" // 合法域名
		let openid = uni.getStorageSync('openId')
		let username = uni.getStorageSync('username')
		let webviewUrl =
			`${path}?openid=${encodeURIComponent(openid)}&username=${encodeURIComponent(username)}&randStr=${encodeURIComponent(randStr)}`
		linkPath.value = webviewUrl
}

二、h5接收小程序传过来的参数

在app.vue的生命周期里面接收

export default {
	mixins: [auth],
	data() {
		return {
			query: {}
		}
	},
	onLaunch: function(options) {
		this.query = options.query   // 接收小程序传过来的参数
    }
}

在h5里面创建订单之后生成的order_id传给小程序

这里特别说明一下wx.miniProgram这个方法不是自带的，需要引入微信sdk，npm下载，直接引入都可以

wx.miniProgram.navigateTo({
					url: `/subpkg/home/WeChatPay?order_id=${this.payInfo.order_id}&pay_money=${this.payInfo.pay_money}&out_trade_no=${this.payInfo.out_trade_no}`
				})

三、小程序接收h5传过来的参数，通过order_id调后端接口获取wx.requestPayment所需要的参数

// 接收h5传过来的参数
onLoad(e => {
	order_id.value = e.order_id
	pay_money.value = e.pay_money
	code.value = e.out_trade_no

})