了解如何在微信外跳转到微信小程序。

技术背景

在运营过程中,希望通过多种渠道引流到小程序,比如:

  1. APP中,点击能够直接打开小程序对应页面
  2. 短信或邮件中,点击链接可以直接打开小程序对应页面
  3. 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做承接页跳转,就可以在AndroidIOS平台下,通过短信、邮件、微信外网页等场景打开小程序。

事情往往没有那么简单,可能你也注意到了,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_tokenaccess_token 的有效期为 2 个小时。服务端需要使用中控服务统一获取和刷新access_token,其他业务逻辑服务器所使用的 access_token 均来自于该中控服务器,不应该各自去刷新,否则容易造成冲突,导致 access_token 覆盖而影响业务。

微信开放标签

微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签,网页开发者可安全便捷地使用微信或系统的能力,为微信用户提供更优质的网页体验。需要使用微信开放标签,必须在前端工程中引入微信的JS-SDK,而且必须要有一个认证了服务号的公众号,需要在公众号后台中绑定JS接口安全域名,在绑定的安全域名下的网页,才能正常调用JS-SDK。使用开放标签的能力,可以跳转到任意合法合规的小程序。

微信标签使用步骤:

  1. 绑定域名:进入到微信公众平台,在公众号的功能设置中添加“JS接口安全域名”
  2. 在项目中引用JS-SDK文件:https://res.wx.qq.com/open/js/jweixin-1.6.0.js
  3. 通过wx.config注入权限验证配置并申请所需开放标签,示例代码如下:
wx.config({
debug: true, // 开启调试模式
appId: '', // 必填,服务号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: ['checkJsApi'], // 必填,需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表
});

  1. 通过wx.ready(() => function(){})wx.error(() => function(res){})来处理验证成功和失败的情景

很多人容易卡在第三步,因为第三步是最麻烦也是需要特别注意的地方,稍微出点差错就会导致权限认证失败,导致微信开放标签无法显示或点击无效。

根据我的研究,我汇总了以下需要特别注意的地方:

  • 认真仔细的阅读JS-SDK使用权限
  • 检查代码里的appid和公众号后台的id是否一致
  • 检查JS接口安全域名是否配置正确,只需要配置顶级域名,非80端口需要加端口号
  • 签名要用到的access_tokenjsapi_ticket必须要缓存起来的
  • 确认config中的 nonceStr和签名中的noncestr的大小写,要注意辨别
  • 签名中的urlJavaScript中是通过location.href.split('#')[0]获取的
  • 通过微信官方提供的签名校验工具验证生成的签名是否正确

打开小程序流程

在考虑IOSAndroid的兼容性还有URL Scheme在微信内和微信外被打开之后有不同表现的情况下,我总结出通过邮件、短信、H5等方式打开小程序的流程大致如下图:

打开小程序流程

从上图可以看出,用户可以选择取消打开小程序,所以我们需要妥善处理用户拒绝打开小程序后的场景。

结语

如果你觉得上面的各种关联设置很麻烦,微信也给你提供了省事的方式,那就是使用小程序的云开发非个人主体并且已认证的小程序,使用云开发静态网站托管的网页,可以免鉴权跳转任意合法合规的小程序。

当然,本文没有使用云开发的方式。本文采用了静态网站和服务端相结合的方式,我也写出了一个简略的体验DEMO,你可以通过点击【DEMO】来感受一下我的研究成果吧。


微信官方文档·小程序 - URL Scheme

微信官方文档·小程序 - urlscheme.generate

微信官方文档·小程序·云开发 - 静态网站H5跳小程序

微信官方文档·公众号 - 开放标签说明文档

微信官方文档·开放平台 - APP拉起小程序功能

JS-SDK说明文档 - 权限签名算法