小程序跳转：h5避免中间页直接打开微信小程序

目录

• 需求来源
• 实现步骤
• 注意事项
• 更多前端知识

需求来源

最近有个需求：移动端网站某个页面，需要实现点击某个按钮能直接打开微信小程序，避免打开中间页打开小程序的方式，这种方式对用户更友好，避免用户流失。

这时候就得动动自己的小脑筋了，由于该开放能力是微信小程序开放不久，所以网上的相关资料较少。小程序的官方文档肯定是有的，在小程序的开发能力=》获取小程序链接中找到了相关文档。获取 URL Scheme、获取 URL Link、获取 Short Link等等，都是获取打开小程序链接的方案。经过阅读文档，获取 URL Scheme是满足需求的。所以在这里重点整理了下利用获取 URL Scheme方式来打开小程序的方案，亲测有效。

实现步骤

1. 获取 URL Scheme

接口调用方式点击下方的服务端接口进行查看：

通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。 通过 URL Scheme 打开小程序的场景值为 1065。
生成的 URL Scheme 如下所示：

weixin://dl/business/?t= *TICKET*

2. 通过URL Scheme打开小程序

iOS系统支持识别 URL Scheme，可在短信等应用场景中直接通过Scheme跳转小程序。

Android系统不支持直接识别 URL Scheme，用户无法通过 Scheme 正常打开小程序，开发者需要使用 H5 页面使用js打开小程序，跳转代码示例如下：

location.href = 'weixin://dl/business/?t= *TICKET*'

或者a标签跳转：

打开小程序

注意： 该跳转方法可以在用户打开 H5 时立即调用，也可以在用户触发事件后调用。

注意事项

1. 该方式在非微信浏览器使用是完全没问题的，但是在微信浏览器，就会跳出一个中间页再提示打开小程序。为了避免这种情况，还是需要判断如果是在微信浏览器中，就使用跳转小程序的开放标签直接去打开小程序，具体使用方式可以参考官方文档静态网站 H5 跳小程序或者我的另一篇博客小程序跳转：云开发之h5跳小程序，这两篇文章都可以找到判断微信浏览器使用开发标签打开的方式。
2. 该功能基本覆盖当前用户正在使用的微信版本，开发者无需进行低版本兼容。
3. 只能生成已发布的小程序的 URL Scheme。
4. 该方式只针对非个人主体小程序开放。
5. 该方案参考了官方文档获取 URL Scheme，在此基础上做了一定的筛选，更多详细内容请参考官方文档。

---

更多前端知识

如果案有任何疑问可以留言，更多相关技术也可以加QQ群交流：568984539

更多前端、uniapp、nodejs等相关知识可关注我个人博客：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343

觉得有帮助的动动你的小手点个赞吧~