首页 > 编程语言 >微信小程序与内嵌h5页面之间的参数传递

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

时间:2023-02-24 10:35:00浏览次数:39  
标签:index url 微信 h5 参数传递 routerParams pages 页面

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:''
}
},
onl oad(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跳转到小程序。

标签:index,url,微信,h5,参数传递,routerParams,pages,页面
From: https://www.cnblogs.com/zhoading/p/17150403.html

相关文章