微信小程序与H5相互跳转及参数传递详解()

更新时间：2022年8月26日10:25:40 作者：

我在单位做项目的时候，遇到了从微信小程序跳转到H5页面的需求。下面这篇文章主要给大家介绍一下微信小程序和H5之间的相互跳转以及参数传递的相关信息。示例代码介绍的很详细，有需要的朋友可以参考一下。

目录

技术栈：

-H5+-微信小程序(vue3++ts)

前言：

我在单位做项目的时候，遇到了一个需求。我需要从微信小程序跳转到H5页面。两端都是使用应用程序编写的。查了资料后决定用它来嵌入，然后考虑可能有参数（data）需要传递，所以实现后记录一下。 ps：我根据查到的信息，将下面的代码从vue2改成了vue3。如果有必要，您可以将其改回来。

1. 小程序向H5发送数据 1. 小程序发送数据

在以下路径创建文件//.vue，也可以自己命名

2..json进行设置

添加该页面，然后就可以在其他页面设置跳转动作。跳转到该页面会自动进入H5页面。

{ "path": "pages/webview/index", "style": { "navigationBarTitleText": "uni-app" } }

3.H5端进行数据接收

在路径跳转到的页面上接收。据了解，小程序向H5传递的参数只能通过URL传递。

console.log('获取传递的数据', qs.parse(window.location.href.split('?')[1])) })

4、调试方法及数据查看

这是我后来无意中看到的一篇文章，我知道该调试哪里了。在微信小程序中，到达H5页面后，底部会有一个类似瓢虫的标志。下图显示了工具栏和打印的参数。

2、H5转小程序 1、引入所需模块

这是我经常遇到麻烦的地方，也是关键点。首先在.html中介绍微信小程序和相关SDK，稍后放上。两者都要引入，因为uni的SDK是和微信的SDK关联的。

...

上述js文件网上路径如下

2.更改文件内容

这里需要下载uni..1.5.3.js到本地，然后修改里面的内容，因为默认的内置方法命名为uni，会和本地的uni命名冲突（官方案例是放在html中原生页面，所以不影响，放在vue项目里会冲突），所以就改了。格式化后可以修改。地点如下。微信的SDK既可以本地使用，也可以在线使用。

3.H5端发送数据

将一些代码添加到之前收到的页面并使用发送按钮调用它

发送

phoneNumber: '15314601234' } }); }

4.小程序接收数据

在下面添加@=""，add=(data:any)=>{...}，返回小程序即可收到。

五、调试方法及数据查看

在微信小程序跳转回的页面即可看到。

3.参考链接地址

1.更多细节和兼容性请参见官方文档：#web-view

2.更改uni来修改引用：#

3、基本流程参考：

4、需要引用微信SDK的原因：

5、特别提醒：只有经过认证的企业账号才能在手机上正确跳转到真机调试。个人账户目前不支持该功能，会报“web-view不支持打开非企业域名，请重新配置”的提示。请参考文章：，不过开发的时候，在微信小程序的详情设置里开启权限，在开发者工具里就可以跳转了。

总结

关于微信小程序与H5之间的相互跳转和参数传递的这篇文章到此结束。更多关于小程序与H5相互跳转的相关内容，请搜索 之前的文章或者继续浏览下面的相关话题。文章希望大家以后多多支持 ！