微信内嵌H5&外部浏览器H5跳转小程序

2023-12-18,微信官方团队对于# URL Scheme 和 URL Link 进行了一次优化< URL Scheme 和 URL Link 优化公告>,对于这次的优化针对于开发者们来说还是十分友好的,能够更加便捷的使用该方法来进行小程序的跳转打开,配置也十分方便

weixin://dl/business/?appid=*APPID*&path=*PATH*&query=*QUERY*&env_version=*ENV_VERSION*

使用外链的方式就能够在外部浏览器或者微信内部浏览器打开小程序
配置方式:

  1. 小程序管理后台 -> 设置 -> 隐私与安全 -> 明文 scheme 拉起此小程序
  2. 在需要进行跳转的事件中进行如下处理
weixin://dl/business/?appid=*APPID*&path=*PATH*&query=*QUERY*&env_version=*ENV_VERSION*

image.png
这里我们只需要配置appid以及path就能够就行跳转了

同时需要注意的是

1、新增明文 URL Scheme,开发者无需调用接口可自行拼接并且生成明文 Scheme;

2、取消 URL Scheme 和 URL Link 打开端一人一链的限制,支持同一条链接被多名用户访问;

3、新增打开端限制:每个小程序每天 URL Scheme 和 URL Link 总打开次数上限为 300 万次。

同时也需要注意低版本微信的兼容问题,不过目前在pc端以及移动端的测试中是没有问题的,pc端会进行弹窗并打开微信进行跳转,移动端会进行权限,用户授权后会进行跳转。

同时,URL Scheme (加密和明文)和 URL Link (加密)仅支持非个人主体小程序使用,这点需要开发者注意,如果是非个人主体小程序,则需要使用其他方式

### 微信小程序内嵌H5页面跳转至第三方小程序或自身小程序页面 #### 实现思路 为了实现在微信小程序内的H5页面点击按钮后能够成功跳转到其他的小程序或是返回自身的特定页面,可以采用间接的方式完成此操作。即先使H5页面中的交互行为触发向当前承载它的微信小程序发送消息,再由该小程序执行实际的跳转逻辑。 #### 技术细节与代码示例 对于想要从H5页面跳转到另一个小程序的情况: 当检测到用户的点击事件时,在H5端调用微信提供的`wx.miniProgram.navigateToMiniProgram()`接口[^1],这允许开发者指定目标小程序的应用ID(appId),路径(path)以及其他必要的参数作为传递数据的一部分。需要注意的是,这里涉及到的安全性和权限控制需遵循微信公众平台的规定。 ```javascript // H5页面中定义按钮点击处理函数 document.getElementById(&#39;jumpButton&#39;).addEventListener(&#39;click&#39;, function() { wx.miniProgram.getEnv(function(res){ if (res.miniprogram) { // 判断是否处于小程序环境中 wx.miniProgram.navigateToMiniProgram({ appId: &#39;targetAppId&#39;, path: &#39;/page/index?query=foo&amp;bar=baz&#39;, extraData: { foo: &#39;bar&#39; }, envVersion: &#39;release&#39; // release, trial or develop }); } }) }); ``` 而对于希望回到同一个微信小程序内部的不同页面,则应使用`wx.miniProgram.reLaunch()`或者`wx.miniProgram.switchTab()`等API来改变显示的内容而不离开现有的应用上下文[^2]。 ```javascript // 当需要切换到同一小程序下的不同页面时 wx.miniProgram.getEnv(function(res){ if (res.miniprogram) { wx.miniProgram.reLaunch({ url: &quot;/pages/targetPage&quot; }); } }) ``` 以上两种方式均依赖于`wx.miniProgram.*`系列的方法来进行跨环境通信,确保了即使是在webview容器里的网页也能有效地同其宿主&mdash;&mdash;也就是微信小程序之间建立联系并实施导航动作。 #### 注意事项 - 使用这些功能前,请确认已经按照官方指南完成了相应的设置工作,比如域名白名单配置等。 - 对于涉及敏感信息的操作务必谨慎对待,遵守相关法律法规及安全指引。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值