微信小程序与内嵌h5页面之间的参数传递

https://blog.csdn.net/weixin_46032911/article/details/128506919

小程序是采用vue+taroui技术栈

1.内嵌h5页面向小程序传参：
1
h5页面 所在文件：h5.vue

//页面跳转函数--前提是在h5页面引入--"weixin-js-sdk"，可通过npm下载
handleRightTc() {
//携带的参数为params
wx.miniProgram.navigateTo({ url: "/pages/fireList/index?params=1" });
},

小程序页面：wx.vue，这里我用的是taro获取当前页面栈，大家可以用wx

mounted:{
this.routerParams = Taro.getCurrentInstance().router.params;
}

这里的this.routerParams==={params:1}

2.小程序向内嵌h5传参，这里与上面不同，多了一层过渡
1
小程序页面：wx.vue，首先向内嵌h5的webview所在页面跳转并携带所传参数。

//跳转函数
//-----/pages/processLink/index此页面为webview页面
openCheck(item) {
wx.navigateTo({ url: `/pages/processLink/index?idStr=${item.idStr}`});
},

webview页面—/pages/processLink/index。index.vue，由该页面接受小程序传的参数，并将url拼接完整跳到h5页面（/pages/processPage/index）

<template>
<view class="index">
<web-view :src="url"></web-view>
</view>
</template>

<script>
import './index.less'
export default {
components: {
},
data () {
return {
url:''
}
},
onLoad(data) {
//data为为携带过来的参数对象
this.url = '地址/pages/processPage/index?idStr='+data.idStr
},
}
</script>

h5页面（/pages/processPage/index）

mounted() {
this.routerParams = Taro.getCurrentInstance().router.params;
console.log('this.routerParams',this.routerParams)
},

这里的this.routerParams==={idStr:‘’}

总结：
1、h5跳小程序可直接在url后拼接参数进行跳转。
2、小程序跳内嵌h5首先跳到h5所在的webview，再由webview跳转到小程序。