H5链接跳转到微信小程序开发流程记录

写在前面

写这篇文章的原因是，我目前做到这块业务，虽然这块很简单，但是我发现网上并没有一个完整流程进行描述出来，唯一可以参考的文档可能就是官方文档 ，所以借助我自己的一个博客进行详细的描述一下完整的一个过程，小程序第三方链接跳转值的是我们使用短信或者使用任意第三方通过一个链接跳转到小程序，从而进行业务处理的过程，在之前我们进入小程序都是需要进行微信搜索，

功能描述

• 前端配置静态url，跳转到小程序中任意页面
• 前端配置静态url，携带参数，跳转到小程序中任意页面
• 服务端接口返回动态url，带不带参数均可以，跳转到小程序中任意页面

注意：

• PS:该文章只针对第三方链接跳转小程序，不涉及到小程序开发过程中其他业务，具体可以实现的功能如上，需要别的业务的，可以不继续往下阅读了！
• 自 2022 年 4 月 11 日起，URL Scheme有效期最长 30 天，不再支持永久有效的URL Scheme、不再区分短期有效URL Scheme与长期有效URL Scheme。若在微信外打开，用户可以在浏览器页面点击进入小程序。每个独立的URL Scheme被用户访问后，仅此用户可以再次访问并打开对应小程序，其他用户无法再次通过相同URL Scheme打开该小程序。 在本次规则调整生效前已经生成的URL Scheme，如果有效期超过30天或长期会被降级为30天有效，只能被1个用户访问，开始时间从调整日期开始计算。

前提条件

• PS：H5通过链接进行小程序跳转的时候，需要该小程序已经发布，否则是没办法进行直接跳转的！

功能开发流程记录

前端配置静态url，跳转到小程序中任意页面 -> 获取URL Scheme

获取URL Scheme的两种方式

• 小程序后台配置
• 服务端提供接口返回地址

下面流程是微信小程序后台配置静态地址

进入小程序后台

• 微信公众平台
• 选择工具

在这里插入图片描述

• 路径配置

在这里插入图片描述

• 生成成功

在这里插入图片描述

进行本地测试

• 后台配置，添加参数（可以不进行参数配置）

在这里插入图片描述

• 微信开发者工具-> 添加编译模式

在这里插入图片描述

• 在需要的页面onLoad生命周期进行参数获取

onLoad(options) {
	console.log("获取到的订单号==>" + options.orderNo)
},

在这里插入图片描述

服务端获取URL Scheme

服务端获取URL Scheme文档

服务端接口返回动态url，带不带参数均可以，跳转到小程序中任意页面 -> 获取 URL Link

获取URL Link的方式

• 服务端获取 URL Link

两种链接的区别

首先两种都是可以进行直接跳转的，之所以提供服务端获取的方式，目的是为了传递动态参数更好的完成业务逻辑，区别在于URLLink返回的地址是https开头的地址，URLScheme返回的和生成的地址是weixin开头的，微信开头的链接我这里目前发现的区别在于它可以直接进行微信开发者工具进行解析，https的是没办法本地解析测试的，也就是微信开发者工具的编译模式是直接支持scheme这种格式的，但是link的下面的编译模式是可以选择，但是没办法进行直接编译，不排除是我操作的问题！

注意⚠

如果你是小程序的云开发，那么获取跳转链接的方式又多了一种，另一个优势在于链接直接跳转的时候中间有一个过渡页，云开发是可以直接进行自定义的，但是目前非云开发我是没找到开发的方案，有方案的可以下方留言！本人感激不尽！

写到后面

截稿为止关于H5跳转小程序的开发流程已经描述结束，网上很多博主也都有记录这块，但是前面也说了，很多都是直接简单的说了一下是可以做的，但是很多细节的区别和流程是没有做任何记录的，希望这篇文章可以解答关于这类问题！