如何在HTML网页中调起APP?

首先, 这个需要提前跟客户端开发人员商定协议名称，用URI Scheme作为HTML页面与客户端的通讯协议（这个很重要）。这里的URI Scheme前缀不是一般的http://，而是由客户端开发者定义的，一般在写程序的时候就会设置的了。然后剩下的部分就像普通的 URL 地址一样，需要大家来约定 URI Scheme 具体如何，例如参数是什么等等。

那么如何去建立这个本地协议呢?

其实就是在app中将http协议转换为本地协议，具体怎么转换，不在本讨论范围。但需要在app里面对配置文件做一下设置（一般是在manifest.xml文件的activity的intent filter里面）：

好比微信客户端的是以 weixin:// 为前缀：打开微信客户端。用手机浏览器，就可以打开微信客户端，前提是你需要安装微信客户端。
现在已经可以调用到客户端了，但是咱们好像落下了一个问题，如果用户没有需要调开的客户端怎么办，总不能让用户傻傻的在当前页面等待，那么咱们就需要做一个判断，来判断用户是否有此软件。
判断客户端
现在大体的思路有了，咱们现在需要明确的是，怎么做到判断是否有软件并且怎么下载。
这里我是通过一个隐藏的iframe做到的。因为iframe既可以判断用户是否安装客户端，也可以停留在当前页面。
具体代码如下：

/**   @param schemaUrl 想要打开的APP的URI Scheme*   @param fail      如果打开失败(手机没有安装APP)时执行的函数*/1 function openApp(schemaUrl, func) {2       //创建一个iframe用于存放想要打开的APP的URI Scheme3       var ifr = document.createElement('iframe'),4           t = 500,5           t1,6           timeout;7       ifr.style.display = 'none';8       document.body.appendChild(ifr);9       t1 = Date.now();10      ifr.src = schemaUrl;11      timeout = setTimeout(function() {12          var t2 = Date.now();13          if (t2 - t1 < t + 100) {14              if (typeof fail == 'function') {15                  fail();16              } else {17                  location.href = fail;18              }19          }20          document.body.removeChild(ifr);21      }, t)22  }

简单解释一下:

如果移动设备中安装了相应的APP的话, 此时设备回去调起APP, 那么此时代码是暂时不执行的, 会有一小段时间是去调起APP, 调起完成之后再回来执行setTimeout里面的函数体, 那么此时t2-t1得到的结果(所消耗的时间)会相对较长, 大于t+100, 因此不会执行条件语句中的代码. 而如果移动设备中没有安装对应的APP的话, 代码就会一直往下走, 那么t2-t1就基本上等于t, 因此t2-t1 < t+100, 因此会执行setTimeout里面的函数体, 这里可以提醒用户设备中没有安装APP, 或者跳转到软件商店下载APP.

最后介绍一下什么是apps custom url schemes?

其实就是你与app约定的一个协议URL，在iOS客户端或者Android客户端中可以设置一个URL Scheme。例如，设置URL Scheme：app，然后其他的程序就可以通过“ URLString=app://”调用该应用。还可以传参数，如：app://reaction/?uid=1

以上介绍了怎么创建该本地协议及调用该本地协议的方法。但这里还有个关键就是怎么判断用户是否安装了该app呢？原理如下：
在手机浏览器中用js代码请求该协议，如果在500ms内，如果有应用程序能解析这个协议，那么就能打开该应用；如果超过500ms就跳转到app下载页。