多途径唤起小程序方案研究
了解如何在微信外跳转到微信小程序。
技术背景
在运营过程中，希望通过多种渠道引流到小程序，比如：
- APP中，点击能够直接打开小程序对应页面
- 短信或邮件中，点击链接可以直接打开小程序对应页面
- H5页面中，点击能直接打开小程序对应页面
本文将从这三点展开研究。
APP唤起小程序
考虑到部分场景下 APP 需要通过小程序来承载服务，微信JS-SDK 提供了移动应用（APP）拉起小程序功能。移动应用（APP）接入此功能后，用户可以在 APP 中跳转至微信某一小程序的指定页面，完成服务后再跳回至原 APP (关于小程序唤起APP功能，这又是另外一个功能点了，我们下篇文章再展开讲)。
既然微信JS-SDK 提供了此能力，那么只需要APP接入微信的JS-SDK，并且符合官方的跳转规则要求，即可以实现APP打开小程序的功能。这里就不多追溯了，本文主要探讨短信、邮件和H5的场景。
短信、邮件唤起小程序
早在2021年之前，大家可能会说这个不可能实现，只有两种替代方案：
1.直接短信提示用户，让用户打开微信搜索小程序名称进入
2.跳转到H5网页，在网页里面用图片或者文字做引导，让用户搜索或者扫码进入小程序。
我所在的公司曾经就用的第二种方案。由于各种偏差，预想投放出去的物料上的二维码能直接打开小程序，结果是一个H5空壳链接，于是就在H5页面中利用文字图片引导用户扫码或搜索打开小程序。可想而知，这样引流的效果会大打折扣，谁不想能一步到位呢。
现如今，微信推出了小程序的URL Scheme，获取小程序的Scheme码，可适用于从短信、邮件、微信外网页等场景打开小程序。但是事情永远都不会那么简单，不同的系统兼容性也会出现问题。
IOS系统支持识别URL Scheme，可以在短信等应用场景中直接用过Scheme码打开小程序。
Android系统不支持直接识别URL Scheme，用户无法通过Scheme正常打开小程序，开发者需要使用H5页面中转，再跳转到Scheme实现打开小程序，方案就是利用网页的重定向打开小程序。可以在用户打开H5页面或者触发事件后调用location.href = 'weixin://dl/business/?t= *TICKET*'。
所以考虑到兼容性问题，我们必须用一个H5页面做承接页来做中转站。
H5唤起小程序
通过对短信唤起小程序的研究，我们知道H5只需要作为一个中转站，调用一个重定向方法执行Scheme码就可以跳转到小程序。
小程序URL Scheme
根据微信官方文档描述，Scheme码必须通过服务端的接口获取或者通过小程序管理后台生成，生成的URL Scheme如下所示：
weixin://dl/business/?t= *TICKET* |
利用此Scheme码通过H5做承接页跳转，就可以在Android和IOS平台下，通过短信、邮件、微信外网页等场景打开小程序。
事情往往没有那么简单，可能你也注意到了，URL Scheme只适用于微信外网页，那么如果H5页面在微信内被打开了会发生什么呢。经测试，微信内打开如下图所示：
微信内部无法解析URL Scheme,那微信内部需要通过H5打开小程序要怎么做呢？微信官方也给出了方法：微信内的网页如需打开小程序请使用微信开放标签-小程序跳转按钮。
通过上面的研究我们可以总结出：要实现微信内和微信外多场景跳转到小程序，我们需小程序 URL Scheme 和微信开放标签。
获取 URL Scheme
如果想要通过H5网页跳转到小程序的任意页面，肯定是需要通过向服务端传参，然后服务端生成小程序对应页面Scheme码返回给前端，才能适应此场景。如果想要固定跳转首页的话，直接通过小程序管理后台的「工具」生成即可。此场景过于简单，本文不做探讨，下面将介绍服务端如何生成URL Scheme。
服务端获取URL Scheme需要调用微信的官方API：
POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN |
请求参数说明：
| 属性 | 说明 |
|---|---|
| access_token | 接口调用凭证 |
| jump_wxa | 跳转到的目标小程序信息 |
| is_expire | 生成的scheme码类型，到期失效：true，永久有效：false。 |
| expire_time | 到期失效的scheme码的失效时间 |
从参数中我们可以看出两个关键信息：
1.Scheme将根据是否到期参数与失效时间参数，分为短期有效Scheme与长期有效Scheme。有效时间超过31天的Scheme或永久有效的Scheme被视为长期有效Scheme，单个小程序总共可生成长期有效Scheme上限为10万个。有效时间不超过31天的Scheme为短期有效Scheme，单个小程序生成短期有效Scheme不设上限。所以我们需要在服务端生成有效期为30天的Scheme就可以无限次生成了。并利用Redis缓存数据，30天过期后再从新生成新的30天有效期的Scheme。
2.获取Scheme码是需要权限的。参数access_token是获取小程序全局唯一后台接口调用凭据。调用绝大多数后台接口时都需使用 access_token，开发者需要进行妥善保存。（在后续的微信开放标签中，我们还需要使用它）
获取 token
服务端通过微信官方API来获取access_token：
GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET |
重要请求参数说明：
| 属性 | 说明 |
|---|---|
| appid | 小程序唯一凭证，即 AppID，在微信公众平台-小程序设置里获取。 |
| secret | 小程序唯一凭证密钥，即 AppSecret，获取方式同 appid |
官方接口将会返回access_token，access_token 的有效期为 2 个小时。服务端需要使用中控服务统一获取和刷新access_token，其他业务逻辑服务器所使用的 access_token 均来自于该中控服务器，不应该各自去刷新，否则容易造成冲突，导致 access_token 覆盖而影响业务。
微信开放标签
微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签，网页开发者可安全便捷地使用微信或系统的能力，为微信用户提供更优质的网页体验。需要使用微信开放标签，必须在前端工程中引入微信的JS-SDK，而且必须要有一个认证了服务号的公众号，需要在公众号后台中绑定JS接口安全域名，在绑定的安全域名下的网页，才能正常调用JS-SDK。使用开放标签的能力，可以跳转到任意合法合规的小程序。
微信标签使用步骤：
- 绑定域名：进入到微信公众平台，在公众号的功能设置中添加“JS接口安全域名”
- 在项目中引用
JS-SDK文件：https://res.wx.qq.com/open/js/jweixin-1.6.0.js - 通过wx.config注入权限验证配置并申请所需开放标签，示例代码如下：
wx.config({ |
- 通过
wx.ready(() => function(){})和wx.error(() => function(res){})来处理验证成功和失败的情景
很多人容易卡在第三步，因为第三步是最麻烦也是需要特别注意的地方，稍微出点差错就会导致权限认证失败，导致微信开放标签无法显示或点击无效。
根据我的研究，我汇总了以下需要特别注意的地方：
- 认真仔细的阅读JS-SDK使用权限
- 检查代码里的
appid和公众号后台的id是否一致 - 检查JS接口安全域名是否配置正确，只需要配置顶级域名，非80端口需要加端口号
- 签名要用到的
access_token和jsapi_ticket必须要缓存起来的 - 确认
config中的nonceStr和签名中的noncestr的大小写，要注意辨别 - 签名中的
url在JavaScript中是通过location.href.split('#')[0]获取的 - 通过微信官方提供的签名校验工具验证生成的签名是否正确
打开小程序流程
在考虑IOS和Android的兼容性还有URL Scheme在微信内和微信外被打开之后有不同表现的情况下，我总结出通过邮件、短信、H5等方式打开小程序的流程大致如下图：
从上图可以看出，用户可以选择取消打开小程序，所以我们需要妥善处理用户拒绝打开小程序后的场景。
结语
如果你觉得上面的各种关联设置很麻烦，微信也给你提供了省事的方式，那就是使用小程序的云开发。非个人主体并且已认证的小程序，使用云开发静态网站托管的网页，可以免鉴权跳转任意合法合规的小程序。
当然，本文没有使用云开发的方式。本文采用了静态网站和服务端相结合的方式，我也写出了一个简略的体验DEMO，你可以通过点击【DEMO】来感受一下我的研究成果吧。