小程序和h5页面之间的互相跳转传参

最新推荐文章于 2025-06-18 15:31:18 发布

刺心疯

最新推荐文章于 2025-06-18 15:31:18 发布

阅读量7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/qq_42363090/article/details/89633861

微信小程序专栏收录该内容

121 篇文章 ¥69.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何实现从小程序到H5页面的跳转，并详细讲解了跳转过程中参数的传递方法，包括小程序端的代码实现和H5页面接收参数的处理。通过实例代码，帮助开发者理解两者之间的交互流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序跳转到 h5 页面

小程序代码：

<web-view src="{
  
  {url}}" bindmessage="handlePostMessage"></web-view>
 
onLoad: function (options) {
 this.setData({
   url: decodeURIComponent(options.url),
 });
},
 
// 接收 h5 页面传递过来的参数
handlePostMessage: function (e) {
  const data = e.detail;
  console.log(data);
}

h5 页面代码：

//引入wx插件
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
//返回小程序带参
<script type="text/javascript">
			function ready(e) {
				var name = document.getElementsByClassName("name")[0].value
				var passwords = document.getElementsByClassName("passwords")[0].value
				console.log(name)

了解本专栏