微信小程序也能一键直达,除了健康码你还想跳转什么?
2021-08-25 18:33:09 Author: sspai.com(查看原文) 阅读量:126 收藏

Matrix 首页推荐

Matrix 是少数派的写作社区,我们主张分享真实的产品体验,有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。

文章代表作者个人观点,少数派仅对标题和排版略作修改。


一直以来,很多用户都希望微信的小程序能够支持 URL Scheme。正好 V2EX 网友 @ITisCool 分享了几条相关的 URL Scheme,根据 文章 分享的方法,作者也构造了一些实用的小程序 URL Scheme。接下来就来看看,如何构造微信小程序的 URL Scheme。

注:本身依托于文章《URL Scheme 查询指南》,在 iOS 上,URL Scheme 是用于定位应用内某个页面的类似网址的存在,设置妥当后可被用于快速跳转到应用中的某个页面/功能。

部分捷径下载地址:粤康码 穗康码 微信乘车码 通信行程卡 深i您健康码 深圳平安门禁 上海随申码 北京健康宝 渝康码 南昌赣通码 辽事通 八闽健康码 扫张贴码

部分 Launch Center Pro Action 下载:亲戚称呼 拍照识花 腾讯乘车码 通信行程卡 八闽健康码 扫张贴码

信息展示

在日常生活中,小程序有很大一部分使用场景都是用于信息的展示。例如出示乘车码、健康码、行程卡等等,尤其疫情当前,进入商场餐厅都必须出示健康码/行程码才能入内。现在的生活里已经离不开了码,所以本次小教程先以信息展示切入,来看看有哪些实际的应用。

乘车码

虽然不少城市的地铁与公交都已经支持了各种 Pay,但依旧有不少读者习惯使用微信乘车码。以腾讯乘车码为例,打开微信乘车码小程序,点击右上角的「导航」图标,再点击「乘车码」进入乘车码的信息页面。

点击「更多资料」,查看小程序的「账号原始ID」,例如乘车码的 gh_3cf62f4f1d52。记下这串 ID,可以说是乘车码这个小程序的「身份证」。这个步骤相当基础,以下每一个例子都会机遇这个步骤来寻找这串原始 ID。

有了小程序账号的原始 ID 之后,就可以根据固定的 URL Scheme 格式进行构造了。微信打开小程序的 URL Scheme 格式如下:

weixin://app/wxd930ea5d5a258f4f/jumpWxa/?userName=账号原始ID

其中的「wxd930ea5d5a258f4f」是固定的注册代号,无需更改。依葫芦画瓢,如果各位需要打开某个小程序,只需在 userName 参数后面跟上「原始ID」即可。所以可以构造出乘车码的 URL Scheme,如下所示:

weixin://app/wxd930ea5d5a258f4f/jumpWxa/?userName=gh_3cf62f4f1d52

此处演示使用的是我惯用的 Launch Center Pro 跳转,如果读者习惯使用快捷指令,也可以在快捷指令中新建一个动作。新增一个打开 URL 的动作,将 URL Scheme 复制进去,也可以起到一样的效果。快捷指令还可以在桌面微件、背部轻拍等功能中快速启动,这里就交给各位读者老爷们自行发挥啦。

车来了

除了能够直接打开某个小程序,在研究这个 URL Scheme 的过程中,还有一个意外发现:如果使用 URL Scheme 打开小程序,可以跳过开屏广告,直接进入主页面。使用上述的方法,得到车来了的「原始ID」,我们一样可以顺利构造出打开「车来了」小程序的 URL Scheme。

但如果我们想更进一步,直接一步到位触达某条公交线路详情页面,那该怎么做呢?

好在微信也提供了一个 path 参数,可以直接打开指定页面。直达某页面的 URL Scheme 格式如下所示:

weixin://app/wxd930ea5d5a258f4f/jumpWxa/?userName=账号原始ID&path=页面路径

但是问题也随之而来,如何获取页面路径?这就有一定的操作门槛了,如果需要获取页面的路径,需要有一个自己的小程序才能查询到其他小程序的页面路径入口。前往 微信公众平台 扫码登录,注册一个小程序。注册好之后,点击右上角的「工具」>「生成小程序码」。

如果你已经注册过公众号的话,我们会在下一个例子里会介绍公众号获取路径的方法,此处注册小程序的步骤可以跳过。

输入要查找的小程序名称,例如此处的「车来了精准实时公交」。此处的搜索不支持模糊搜索,需要输入完整的小程序名称。在输入完成后,点击右边的「搜索」图标,出现搜索结果之后,才可以点击「下一步」。

点击「获取更多页面路径」按钮,在此处输入自己的微信号,再点击「开启」之后,就可以查询页面路径了。如果开启成功,会在顶部弹出通知,显示「开启入口成功」。

返回车来了小程序,来到需要获取路径的页面,例如此处的 K02 路公交详情页面。

点击右上角的「更多」按钮,再点击「复制页面路径」,就可以得到 K02 路的页面路径,如下所示:

pages/linedetail2/linedetail.html?nextStop={}&line={"lineId":"594166803814","lineName":"K02","direction":0,"lineNo":"r02669"}&city={"cityId":"051","cityName":"莆田","cityVersion":2,"isGpsCity":1,"isHot":0,"isNewCity":0,"isSupport":1,"pinyin":"PuTian","supportSubway":0,"wechatFavoriteGray":0,"localCityId":"051"}&targetStop={"couponFlag":0,"distanceToSp":-1,"lat":25.4712269632472,"lng":119.12347092956134,"order":30,"sId":"0594-1425","sn":"涵江区教育局"}

再通过乘车码中的方法,如法炮制获取打开「车来了」的 URL Scheme,如下所示:

weixin://app/wxd930ea5d5a258f4f/jumpWxa/?userName=gh_35bd264ef886

最后只需要将页面路径拼接到 URL Scheme 后面,即可实现直接打开某个具体页面。页面路径的参数名为 path,复制上述我们获取到的「页面路径」,可构造出如下的 URL Scheme:

weixin://app/wxd930ea5d5a258f4f/jumpWxa/?userName=gh_35bd264ef886&path=pages/linedetail2/linedetail.html?nextStop={}&line={"lineId":"594166803814","lineName":"K02","direction":0,"lineNo":"r02669"}&city={"cityId":"051","cityName":"莆田","cityVersion":2,"isGpsCity":1,"isHot":0,"isNewCity":0,"isSupport":1,"pinyin":"PuTian","supportSubway":0,"wechatFavoriteGray":0,"localCityId":"051"}&targetStop={"couponFlag":0,"distanceToSp":-1,"lat":25.4712269632472,"lng":119.12347092956134,"order":30,"sId":"0594-1425","sn":"涵江区教育局"}

将它做成一个 Launch Center Pro 的 Action,将这段 URL Scheme 复制进去,但是运行该 Action 之后我们又遇到了另一个问题,报错提示:「URL cloud not be opened」

如果对 LCP 有一定了解,可以猜到这是因为没有编码导致的。而问题就出在 path 上,在 path 参数的前后分别加上 {{ }},这是 LCP 它自带的编码语法,这样括号之后即可正常运行,演示效果如下。

如果读者需要使用捷径打开这个 URL Scheme,同样需要使用「URL 编码」模块对 path 参数进行独单编码,然后再将 URL Scheme 和 path 进行拼接,否则会导致无法进入指定的页面。

通信行程卡

在之前的文章 URL Scheme 查询指南 下面,有读者评论说:是否有通信行程卡的 URL Scheme?当时对该软件进行解包之后发现,该软件没有注册任何 URL Scheme,自然也就不能通过它打开。但是现在有了小程序的 URL Scheme,那么接下来让我们一起热心地试着来实现这位读者的需求。

使用上面的方法获得通信行程卡的「原始 ID」,经过 LCP 打开之后效果如下所示。但经过多次实验,发现每次都是需要先同意授权之后,才可以查看行程卡,而且这个授权状态是无法保留的。

为了能够一步直达行程卡页面,就需要获取通行卡页面的路径。在「车来了」例子中,介绍了使用小程序后台获取地址的方法,但是如果恰好只有公众号,也是可以获取到页面路径的。登录公众号后台,在首页点击新的创作,选择「图文消息」。

点击顶部提供的「小程序」插入功能,搜索通信行程卡,然后进行下一步操作。

点击「获取去更多页面路径」,在开启入口处输入自己的微信号,点击开启。成功后会在顶部提示「已开启」。

此时,打开通信行程卡小程序,点击更多选项。会在下方的分享菜单中看到「复制页面路径」按钮,点击即可复制,得到的路径如下所示:

pages/result/result.html?result={"color":"green","phone":"131****3233","time":"2021.08.25 08:41:25","message":"福建省莆田市"}

将打开通信行程卡的 URL Scheme 和路径进行拼接,得到最终的 URL Scheme 如下:

weixin://app/wxd930ea5d5a258f4f/jumpWxa/?userName=gh_0ed5d82fd775&path=pages/result/result.html?result={{{"color":"green","phone":"131****6666","time":"[[textexpander:time]]","message":"福建省莆田市"}}}

经过测试,使用这条 URL Scheme 可以直达行程卡页面,无需授权询问。但是也可以看出此处有一个很严重的问题,开发者竟然将参数直接放在了 URL 地址里,用 URL 里的参数来构造行程卡页面。而且这样做时间会被固定死,没办法实时更新。

此处有两种办法都可以解决这个问题,一是使用捷径的日期模块获取时间,二是使用 LCP 配合 TextExpander 实现。先来看看捷径如何实现,新建一个捷径,使用「URL 编码」模块编码 path 参数值。将 time 的值使用「当前日期」模块替换,点击「当前日期」按钮,日期格式选择「自定」,并将格式选择为 yyyy.MM.dd HH:mm:ss 即可。而后再使用「URL」模块拼接 URL Scheme 和编码后的 path 参数,最后再添加「打开 URL」模块打开拼接后的 URL。

文字啰里八嗦一大堆,看着挺复杂,但实际上操作起来就那么两步,各位不妨参照下图,或是下载我为大家制作的快捷指令示例熟悉一下。通信行程卡捷径下载

如果要使用 LCP 配合 TextExpander 实现,只需要在 TextExpander 中新建一个时间的缩写,再用 LCP 引入缩写标签就可以了。具体方法如下:首先前往 TextExpander,新建一个缩写短语 time,内容为 %Y.%m.%e %date:hh:mm:ss%.如果读者对 LCP 配合 TextExpander 的玩法不太了解,可以阅读 这些动作,用 Launch Center Pro 执行依然合适 的第三小节,了解这个玩法。

返回 LCP,前往「设置」>「TextExpander」,点击「Update TextExpander Snippets」,这样就可以把设置好的缩写短语引用过来。然后还需要修改 URL Scheme,把原来的时间替换成缩写短语 [[textexpander:time]],替换后的 URL Scheme 如下:

weixin://app/wxd930ea5d5a258f4f/jumpWxa/?userName=gh_0ed5d82fd775&path=pages/result/result.html?result={{{"color":"green","phone":"131****6666","time":"[[textexpander:time]]","message":"福建省莆田市"}}}

这样就做到了时间的实时更新,演示效果如下。

拍照识别

讲完了乘车码、车来了、通信行程卡三个例子后,相信读者也能对这类 URL Scheme 有了一个初步的认识,三个小程序它们实现的都是信息的展示,但不少小程序并不只是起到信息展示的作用,也有不少小程序通过调用手机硬件,来部分实现主 App 中的功能,这其中就有不少学生朋友喜爱的小猿搜题等。接下来就以小猿搜题为例,看看另一种形式的小程序 URL Scheme 玩法。

小猿搜题

打开小猿搜题小程序,点击「拍照搜题」,这时候可以看到在拍照页面,同样出现了一个「更多」的图标。获取拍照页面的地址,如下所示:

pages/camera/camera.html

将拍照页面的地址和打开「小猿搜题」的 URL Scheme 拼接,得到如下 URL Scheme,可以一键直达拍照界面。URL Scheme 如下所示:

weixin://app/wxd930ea5d5a258f4f/jumpWxa/?userName=gh_10ba875ac32b&path=pages/camera/camera.html

拍照识花

将「小猿搜题」的方法如法炮制,也可以得到「识花君」的拍照识花页面的 URL Scheme,如下所示:

weixin://app/wxd930ea5d5a258f4f/jumpWxa/?userName=gh_60c5387f05e3&path=pages/recogNew/recogNew.html

美团共享单车

既然可以拍照识别,那么扫描二维码自然不在话下。日常我们扫码的一个高频场景就是路边扫码开启共享单车,炎炎夏日谁不想赶紧开一辆车跑路呢。但在测试美图的单车扫码页面时遇到了一些麻烦:顶部没有了导航图标,无法获取页面路径。

如果某个小程序,它的扫描或者拍照功能是直接使用微信的拍照接口,它就无法做到一键直达。对比刚才的「小猿搜题」和「拍照识花」的例子,它们是构建了自己的拍照页面,才可以获得拍照页面的地址。

放弃了小程序这条路,解包美团应用可发现了美团扫一扫的 URL Scheme,如果是安装使用官方 App 的页面倒是可以一键直达,扫码开车。美团扫一扫的 URL Scheme 如下所示:

imeituan://www.meituan.com/scanQRCode

URL Scheme 应用

有了这些微信 URL Scheme 之后,自然就是如何使用它们,目前常见的一些 URL Scheme 打开方式如下所示:

  • 做成捷径的小组件
  • 做成捷径添加到桌面使用
  • 做成捷径并设置双击背面打开
  • 做成 Launch Center Pro action

具体要使用那种方式,这可以根据使用频率来决定,如果是每天都要用的,可以设置为最简单的双击背面打开。一般频率的使用,捷径或者 LCP 都可以考虑,选择合适自己的就可以了。

除此之外,还可以将它做成一个 Launch Center Pro action,借助 LCP 的肌肉记忆优势,可以更方便地使用小程序。如果是像小猿搜题和拍照识花这样低频使用软件,将它添加到 LCP 之后,还更方便查找,不必每次都去搜索查找小程序。

LCP 的软件图标的获取可以参考 提取 Mac OS X / iOS 应用图标的 6 种技巧,建议使用 icoicon.com 获取正方形的图标,而不是圆角的图标,如果使用圆角图标,旁边会有黑边。

应用场景

对个人而言,微信小程序 URL Scheme 可以减少点击次数,直达功能页面。对于低频率使用的小程序,可以直接在 LCP 中新建动作使用,而不必专门下载对应的应用。借助捷径,也可以变相达成 Android 端类似的「将小程序放在桌面」的目的。

对企业或者商户而言,可以更方便地在 iOS 平台推广自己的产品。以少数派为例,可以直接将 PiStore 商品链接 放在网页上,如果读者想要购买产品的话,可以直接点击链接跳转小程序详情页面,让购买产品的过程更加方便。

发展对比

在以前的文章 URL Scheme 查询指南 中介绍了支付宝小程序的 URL Scheme 地址提取,当时还在想如果微信也能支持该多好。现在微信不仅做到了,而且在我看来它做得还更好。支付宝只能做到打开,而微信更进一步,做到了打开指定页面的功能。

查阅了一些微信小程序的官方文档,其实微信小程序还支持 query 的参数,但是这需要小程序自身的代码适配。个人认为,如果以后常用的小程序都能做好适配,那么离小程序取代应用,或许就指日可待了。

参考资料

> 下载少数派 客户端 、关注 少数派公众号 ,了解更妙的数字生活 🍃

> 想申请成为少数派作者?冲!

© 本文著作权归作者所有,并授权少数派独家使用,未经少数派许可,不得转载使用。

JamesHopbourn

Telegram channel: JamesNotes


文章来源: https://sspai.com/post/68466
如有侵权请联系:admin#unsafe.sh