背景

最近在做一个社区互动相关的项目，以客户端为主，网页端为辅。其中有一个重要的业务需求，app内部分享到其它地方。

很常见的一个方案，主要的流程包括：app分享到第三方应用，第三方内部可以直接打开网页端，网页端的交互操作引流回自己的app。

其中第一步app分享到第三方应用很好实现，目前市面上有很多现成的实现方案，包括第三方应用商直接提供完整的sdk调用方案，在我们自己开发的时候直接配置一下即可；
第二步的话其实也很简单，就是我们web前端自己开发的页面，app那边分享出来的时候生成一个网页地址，第三方app直接打开这个网页即可；
第三步是最麻烦的，主要问题还是引言所说的第三方应用的限制，也是这篇文章主要想讲的。

网页唤醒app，载体是网页，被唤起的是app，正常来说我们只需要对接好app的协议即可。那么也就是意味着，正常情况下web前端开发者只需要对接好Android、iOS两个生态环境的协议即可，也就是说，两套方案即可。

但事实上因为网页端的安全限制，大部分浏览器与app都是有自己独立的一套规范。比如虽然微信里面可以打开网页，但大部分网页协议都被微信禁止了，浏览器里面的原生方案在微信生态里面都是被禁止需要重新开发的，从申请账号、开通权限、标签开发等等，非常复杂。

目前能想到的有，安卓、ios、微信、qq、微博，每一个都有自己独立的封闭环境，都需要独立开发。

原生方案

首先提一下原生方案，原生意味着是浏览器本身支持的方案，市面上常见的浏览器Safari、Chrome、小米浏览器、搜狗浏览器等等基本都是支持的。

URL scheme

就像每一个网站都有自己独立的网址，我们也可以给每个app定义独立的前缀，使用独特的标识来定位app，这就是URL scheme。

例如weixin:// 指向微信app，当我们在浏览器访问这个地址的时候就会唤起微信app，并且我们可以携带参数.

行为(应用的某个功能)    
            |
scheme://[path][?query]
   |               |
应用标识       功能需要的参数

这是一个URL scheme的完整结构。

当然了，在网页直接输入是打不开的，因为浏览器会把它识别成一串字符，可以通过js触发，在页面运行window.open('weixin://')即可跳转微信

Intent

谷歌官方提供的语法，安卓平台独有的，结构如下。

intent:
   HOST/URI-path // Optional host 
   #Intent; 
      package=[string]; 
      action=[string]; 
      category=[string]; 
      component=[string]; 
      scheme=[string]; 
   end;

这个方案很少见，其最终格式也是生成一串url地址，与上面一样本质都是访问这个地址然后唤起app。

与URL scheme相比，其最大的优点就是提供了唤醒失败的跳转url地址，比如用户没有安装软件的时候，我们可以跳转到商店下载页。

Universal Link

Universal Link 是苹果在 WWDC2015 发布的新功能，并且 iOS9 以上才支持。它通过传统的 HTTP 链接即可打开 APP。

Universal Link 是非常不错的解决方案，在使用的时候只需要ios客户端生成一个json文件，里面写入配置项，然后服务端把它放到我们的域名下面，之后访问网站的时候就可以自动唤醒app了，不需要做任何额外操作，体验极好。

并且与安卓提供的Intent类似，如果用户没有安装的话，还会跳转到app store应用详情页。

缺点就是只支持ios原生浏览器了，并且在微信等软件中也被限制了无法使用。

第三方解决方案

第三方生态都是封闭的，所以我们必须额外开发

微信

起步需要的配置相关可以参考前面我发过的文章

微信唤醒app本身还是挺简单的，配置好环境后，我们只需要引入wx-open-launch-app标签即可，代码部分如下。

<wx-open-launch-app
  id="launch-btn"
  appid="your-appid"
  extinfo="your-extinfo"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">App内查看</button>
  </script>
</wx-open-launch-app>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

文档看起来是挺简单的，使用的时候只需要按照文档，在唤起按钮上面封装一层微信开放标签即可。

其实使用起来真的非常复杂。举个例子

需求是网页所有交互按钮点击后都需要唤醒app，那么是否意味着所有交互按钮都需要封装一层微信组件呢？
封装也没问题，但我们还有原生浏览器，其它环境，如果每个环境都这样套一层或者判断一次，代码会不会变的非常混乱？
并且很多项目都是开发完成了，后期需要接入微信分享，总不能让开发者一个个改标签，重构项目吧？

在项目开发之初我预留了一个js事件，最理想的肯定还是通过函数唤起，但在调研了很久后发现不可能实现，所以我必须得有替代方案。

目前预定的方案是，用户点击交互标签后，通过预埋的统一事件调起一个模态框，我们只需要在模态框中写一次微信唤起标签，把所有逻辑都放到一个地方，这样即使后面接入qq等其它环境，也可以直接复用。在权衡折中后，选择一个最合理的方案是必须的。

扩展资料

1.微信开放标签

2.微信内网页跳转APP功能

网页唤醒app方案归纳

背景