怎么在网页中打开你的app

2016-07-15 00:04:00

先声明一下关于ios中9.0打开方式的文章来自博客：IOS9通用链接（universal link）

前言

对于一个完备的互联网产品而言需要有app端与web端两个不同前端，对于产品而言很多都希望能够将wap页上的用户引向native app上这就要求前端工程师们为网页提供各种入口去打开app，今天我们就聊一聊app的打开方式（有错误的地方还请高手指正）。

常规打开

对于app打开而言最常规的打开就是通过url scheme的方式去打开你的app，如下的

myapp://myapp://openmyapp://type=1&id=2sdeo223lwe

这些抛出都是以url的方式进行抛出，app捕捉到这些抛出去做相应的处理，本文对app的处理不做详细描述，app开发请自行谷歌百度。对于前端而言抛出的方式也有很多，而最理想的方式是通过iframe的src对其进行链抛出，来！说的在多都没有代码来的清晰，请看下面。

首先我们需要有一个iframe：

//实际上就是新建一个iframe的生成器var  createIframe=(function(){  var iframe;    return function(){        if(iframe){            return iframe;        }else{            iframe = document.createElement('iframe');            iframe.style.display = 'none';            document.body.appendChild(iframe);            return iframe;              }    }})()

之后我们还需要一个url scheme:

//生成一个url scheme,假设我们约定的scheme是myApp://type=1&id=iewo212j32这种形式的var baseScheme = "myApp://"var createScheme=function(options){    var urlScheme=baseScheme;    for(var item in options){        urlScheme=item + '=' + encodeURIComponent(options[item]) + "&"        urlScheme = urlScheme.substring(0, urlScheme.length - 1);    }    return encodeURIComponent(urlScheme);}

这种scheme形式的其实不是最好的,根据我们踩过的坑，觉得约定为与http协议相近可能更好一些，具体的协议需要前端人员自己去和app端人员约定。

ok万事具备，iframe有了，urlScheme也有了，该去打开app了

var openApp=function(){    var localUrl=createScheme();    var openIframe=createIframe();    if(isIos()){        //判断是否是ios,具体的判断函数自行百度        window.location.href = localUrl;        var loadDateTime = Date.now();        setTimeout(function () {            var timeOutDateTime = Date.now();            if (timeOutDateTime - loadDateTime ios中实现通用链接：而我们要做的真的很简单，实际上我们只需要抛出链接就好了（实际上博主只是来骗经验的）。在此之前请准备好与主站不同的域名，比如主站www.xxxx.com，你们可以准备好open.xxxx.com的域名作为重定向用。好吧！实际上通用链接有一个很坑的属性，必须是异域打开，而且如果你提交的是你主站的链接，你打开你的主站你会发现网站上方会挂着一个难看的灰条转向appstore中你们的app，没错，就是ios系统干的这个事，具体的其他注意事项可以参考这篇文章IOS9通用链接（universal link）。那么接下来我们的代码得做好更改

//增加通用链接的生成,
var baseScheme = "myApp://",
baseLink="http://m.xxxx.com?";
var createScheme=function(options,isLink){
var urlScheme=isLink?baseLink:baseScheme;
for(var item in options){
urlScheme=item + '=' + encodeURIComponent(options[item]) + "&"
urlScheme = urlScheme.substring(0, urlScheme.length - 1);
}
return isLink?urlScheme:encodeURIComponent(urlScheme);
}

然后对抛出做

一种简单的方式就是弹窗告诉用户让他去浏览器中打开——在技术之外的办法
还有一种方式就是应用宝

是的如果是微信就去打开你的app对应的应用宝，应用宝会去检测你的app是否存在有则去打开，但只是去打开。实际上腾讯的应用宝对于开发者在功能上做的比想象中的要强大，你在应用宝的微下载中配置申请你的applink与app store的链接,之后你只要在你的链接参数中带上android_schema="myApp://"就在应用宝中打开app中的特定功能，如果忽略应用宝的页面跟自己scheme打开没有太大区别，具体的操作可以查看应用宝的说明。简而言之，腾讯的产品中都去借助应用宝这个平台去执行你需要的操作。在此就不贴代码了，只要判断浏览器如果是微信或者是qq就去跳你的应用宝链接就行。

总结

实际上单纯打开app非常简单，目前无论安卓还是ios都能够很好的支持scheme，当然腾讯系产品除外，实际上百度浏览器也会拦截scheme（我觉得真是奇了葩！！！微信这种尚能理解，一个浏览器居然擅自去拦截scheme）目前对百度浏览器还没有什么很好的办法，可以尝试是否能够通过百度应用市场去解决。如果是希望打开app同时又要打开下载页，那么ios9及以上就得用通用链接去解决，重点就是这个通用链接。

关键字：JavaScript, wap网页, APP, scheme

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！