评论

微信 schema 跳转之非官方文档

微信 schema 跳转方式

微信“应该”是最近开放了 schema 跳转小程序 的能力,大大方便了短信、邮件、外部网页等唤起微信小程序。

schema 链接格式大体是这样:weixin://dl/business/?ticket=l69894d682fa8dbafe724a0ca3950741e,但是这段文本在安卓端无法识别。小规模测试结果如下:

后来想到用一个正常能够识别的网页地址,内容是重定向到指定的 schema 链接。这就是擅长的领域了,query 参数上带上 schema 链接,location.href 一下不就行了。这里就不 show 代码了,能看到文章的你一定行。

但是,发现在部分安卓手机下(如小米)还是没反应,原来简单的 schema 跳转水这么深的,于是百度谷歌了一下,找到了下面两份关键材料:

看源码也不多,总结下来,因不同系统和浏览器对 schema 规范的理解不同,还有一些商业因素,不同环境下面需要用不同的方式进行跳转,甚至有的环境你根本就跳不了

时间紧,任务重。简单处理吧,不同方式都来一遍,谁好使就用谁。所以简单总结了下,能用的几种方式:

  • location 跳转
  • a 链接跳转
  • iframe 跳转

以上三种方式,逐一试用,最后实在不行就不行吧,简单处理,看有没有大神补充的。

相关代码如下:

  • location
location.href = "weixin://dl/business/?ticket=l69894d682fa8dbafe724a0ca3950741e";
  • a 链接跳转
var aLink = document.createElement("a");
aLink.className = 'call_up_a_link';
aLink.href = "weixin://dl/business/?ticket=l69894d682fa8dbafe724a0ca3950741e";
aLink.style.cssText = "display:none;width:0px;height:0px;";
document.body.appendChild(aLink);
aLink.click();
  • iframe
var iframe = document.createElement('iframe');
iframe.className = 'call_up_iframe';
iframe.src = "weixin://dl/business/?ticket=l69894d682fa8dbafe724a0ca3950741e";
iframe.style.cssText = "display:none;width:0px;height:0px;";
document.body.appendChild(iframe);

以上代码均可从参考资料中找到出处,感谢

是直接一进来就执行,还是事件触发,都可以。或者是一开始进来就执行,失败了显示几个可选跳转按钮让用户手动触发跳转。

但是关键问题还有一个,如何判断是可以成功唤起了呢?上述 github 代码里提到了一个根据页面 hidden 状态,但不够精准,如果用户没有选择跳转到微信呢?这是另一个需要深究的问题。

出于时间考虑,先以业务交付优先,如果有朋友知道的也可以一起讨论下。

另行文时间短,以技术交流为主,若有瑕疵,欢迎指出。

附上 vue 版本源码:微信 schema 跳转


参考链接:

最后一次编辑于  2021-01-04  
点赞 19
收藏
评论

16 个评论

  • 桂宁
    桂宁
    2021-02-02

    如果不使用云开发,自己的h5页面需要鉴权,这个该怎么实现,如果h5页面放在公众号项目里,微信外的浏览器打不开

    2021-02-02
    赞同
    回复 1
    • 拾迹
      拾迹
      2021-02-06
      1、第一个问题是说的 https 调用获取 schema 链接的时候,access_token 怎么获取对吧?这个按照文档来呗;
      2、理论上 schema 链接跳转就是满足微信外跳转小程序的,h5 包一层只是有些系统无法识别 schema 链接做了一层中转而已。
      2021-02-06
      回复
  • ValenZee
    ValenZee
    2021-01-25

    你好请问ticket如何获取

    2021-01-25
    赞同
    回复 6
    • 浮若年华丶
      浮若年华丶
      2021-01-26
      我也想知道这个关键性的问题
      2021-01-26
      回复
    • 拾迹
      拾迹
      2021-01-29
      这个是服务端调微信接口生成的
      2021-01-29
      回复
    • 理想
      理想
      2021-03-20
      小程序管理后台:https://mp.weixin.qq.com/
      右上角【工具】-生成 Url Schema
      当然这个得你能登录小程序管理后台
      2021-03-20
      回复
    • 理想
      理想
      2021-03-20
      这里生成的链接还自动短链处理了
      2021-03-20
      回复
    • 秋
      2021-04-29回复理想
      请问如果需要在h5页面传递参数到小程序页面,该怎么用呢?
      2021-04-29
      回复
    查看更多(1)
  • 食匣子
    食匣子
    2021-01-14

    请问,如果我想要跳转第三方的小程序,是否做得到呢?是否需要对方提供什么东西?

    2021-01-14
    赞同
    回复 1
  • 2021-01-12

    你好,我想问一下,为什么官方的demo在小米浏览器上可以直接弹出是否跳转

    https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html

    但是我自己写的就不会触发,要手动点按钮才行。

    这里面是有其他的触发操作么。html源码没看出特别的地方

    2021-01-12
    赞同
    回复 7
    • 拾迹
      拾迹
      2021-01-13
      我的小米手机系统浏览器打开你的链接可以触发跳转,源码里我看了就只用了 location.href,你可以尝试下其他两种方式。
      2021-01-13
      回复
    • 拾迹
      拾迹
      2021-01-13
      2021-01-13
      回复
    • 拾迹
      拾迹
      2021-01-13回复拾迹
      我也发现有的时候同一种方式部分机型可以,部分机型就是不行。我归因为兼容性的问题,所以做了3 种跳转方式。默认跳转不行,就把所有跳转都显示在页面上,让用户自己手动触发其他跳转方式。
      2021-01-13
      2
      回复
    • 叶子
      叶子
      2021-01-20
      一样,官方的demo可以在小米览器上可以直接弹出,但是一模一样的代码,无论是自己部署还是开通静态网站,都无法弹出
      2021-01-20
      回复
    • 叶子
      叶子
      2021-01-20回复叶子
      同一手机
      2021-01-20
      1
      回复
    查看更多(2)
  • 单引
    单引
    2021-01-08

    每个小程序每天1000条的限制,达到了会怎么样呢

    2021-01-08
    赞同
    回复 2
    • 拾迹
      拾迹
      2021-01-10
      我们暂时还没到那么大量,尴尬。
      2021-01-10
      回复
    • 潇旭
      潇旭
      发表于移动端
      2021-12-20回复拾迹
      有这个限制么
      2021-12-20
      回复
  • 理想
    理想
    发表于小程序端
    2021-01-04
    没很清楚搞懂
    2021-01-04
    赞同
    回复 2
    • 理想
      理想
      发表于小程序端
      2021-01-04
      1.是从短信打开小程序?那我理解,是短信能正确识别?点击微信启动,微信又要能正确识别?如果这样,上面的3种方式是小程序里的代码还是短信内容?
      2021-01-04
      回复
    • 拾迹
      拾迹
      2021-01-04回复理想
      嗯嗯,抱歉没有介绍太多的背景信息。官方文档应该介绍的会比我清楚些:
      https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html。简单说来就是微信提供了一种从 schema 链接打开小程序的方式,但是因为不同系统对 schema 支持的不是很友好,所以有了这篇文章。
      2021-01-04
      3
      回复

正在加载...

登录 后发表内容