引起本地app,h5运维原生APP计算

By admin in 4858美高梅 on 2019年3月25日

     
 随着工作的加码,或者存在那样一种供给,就是亟需从h5中从来跳转到app。假诺没有安装app的话,则提示到应用市集照旧app
store下载安装。可是难题就在这么些地点,单纯的用h5是从未有过办法判断是还是不是安装过app的,但是这么些是难不倒程序员的,他们一般会用那种代码来化解

详解如何通过H5(浏览器/WebView/别的)唤起本地app,h5webview

前二日接到一个有线的要求,小编这几个小白可是忙活了少数天……在页面上有一个接连,
如若用户设置了APP,则点击打开对应的APP假若用户没有安装,则点击打开对应的安装连接.上网搜索了弹指间,基本都说能够兑现,可是事实上景况却不乐观.

理所当然只是在这之中的二个急需,还有的是现在种种app,分享出来的H5页面中,一般都会带着1个眼看打开的按钮,尽管当地安装了app,那么就一直唤起本地的app,若是没有安装,则跳转到下载。那是贰个很健康的放大和导流量的策略,近年来产品经营就建议了如此的三个须求,做二个像今日头条效益雷同的带打开app的下载条等等,其余的就背着了!

上边进入我们明天的主旨,H5如何打开或许说唤起手提式有线电话机本地的app,纵观百度和谷歌(Google)上面的答案,无非是三种:

先是种格局:

透过在html的a标签里面包车型大巴href中平素配置android端的schema,当然,如若有host其余的布置,跟在末端就能够了,android端配置和代码如下:

android端配置:

    <activity android:name = ".MainActivity">
        <intent-filter>
            <action android:name = "android.intent.action.MAIN" />
            <category android:name = "android.intent.category.LAUNCHER" />
        </intent-filter>
        <intent-filter>
            <action android:name="android.intent.action.VIEW"/>
            <category android:name="android.intent.category.DEFAULT"/>
            <category android:name="android.intent.category.BROWSABLE"/>
            <data            android:host="jingewenku.com"
                             android:scheme="abraham"/>
        </intent-filter>
    </activity>

注:假使那一个是布局在起步页要和标签并列在共同,否则运营后手提式有线电话机app的图标会没有;注意schema协议要小写,否则会有不可能响应的至极!

html代码:

<html>
       <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
                      <title>Insert title here</title>
       </head> 
        <body> 
            <a href="abraham://jingewenku.com/?pid=1">打开app</a><br/>
        </body>
</html>

 那里大家来探望schema拼接协议的格式:

< a href="[scheme]://[host]/[path]?[query]">启动应用程序< /a>

逐条品种含义如下所示:

scheme:判别运转的App。 ※详细后述

host:适当记述

path:传值时必须的key ※没有也足以

query:获取值的Key和Value ※没有也足以

上述就能促成打开当地的app了,当然是在app存在的气象下,不然的话没有影响。

大家莫不会问上边的html代码中安顿的不是android里面配备的schema协议呢?作者通晓没有配备pid,为何要写这么些吧?那是因为我们有些时候在引起本地app的时候也许会向app传递一些参数,这一个参数大家就足以安插在那边,大家只必要在oncreate里面获得就足以了,代码如下:

Intent intent = getIntent();
    Uri uri = intent.getData();
    if (uri != null) {
        String pid = uri.getQueryParameter("pid");
    }

只要还想要获取android里面配备的schema协议以来,仍是能够如此:

Uri uri = getIntent().getData();
if(uri != null) {
 // 完整的url信息
 String url = uri.toString();
 Log.e(TAG, "url: "  + uri);
 // scheme部分
 String scheme = uri.getScheme();
 Log.e(TAG, "scheme: "  + scheme);
 // host部分
 String host = uri.getHost();
 Log.e(TAG, "host: "  + host);
 //port部分
 int port = uri.getPort();
 Log.e(TAG, "host: "  + port);
 // 访问路劲
 String path = uri.getPath();
 Log.e(TAG, "path: "  + path);
 List<String> pathSegments = uri.getPathSegments();
 // Query部分
 String query = uri.getQuery();
 Log.e(TAG, "query: "  + query);
 //获取指定参数值
 String goodsId = uri.getQueryParameter("goodsId");
 Log.e(TAG, "goodsId: "  + goodsId);
}

 如何判定1个Schema是还是不是行得通 :

PackageManager packageManager = getPackageManager();
Intent intent = newIntent(Intent.ACTION_VIEW, Uri.parse("abraham://jingewenku.com:8888/goodsDetail?goodsId=10011002"));
List<ResolveInfo> activities = packageManager.queryIntentActivities(intent, 0);
booleanisValid = !activities.isEmpty();
if(isValid) {
 startActivity(intent);
}

这种方法也是本身百度到的最多的方法,然而如此就推动了二个题材了,上边的急需说的是“在页面上有二个老是,
若是用户安装了APP,则点击打开对应的APP;借使用户并未设置,则点击打开对应的装置连接”,那明摆着就不相符须要了,那不得不当做一些分头须求来使用了。

第3种方法:

既然如此经过在href配置schema协议不行,那就只能通过js代码来贯彻了,只有这么才能依据判断完成app有的时候就打开,没有的时候就跳转到下载链接下载。
我们掌握,js是力不从心判定手提式有线电话机是还是不是安装了某款app的,所以大家不得不够曲线救国了,大家能够获取时间假使,长日子无法呼起app则暗中同意为尚未安装那款app,然后跳转到下载页。当然那不是作者想出去的,是网上的诸位大佬的想法。在此间又要分开为三种状态了。

1.一直唤醒

表明:通过h5可换醒app,如访问三个U奥迪Q7L,点击按钮,打开应用,假设该应用APP没有设置,那么直接跳转到App
Store的APP下载页面,通过点击的办法包容性较好,如若设置了app,在手提式有线电话机各大浏览器(360浏览器、uc浏览器、搜狗浏览器、QQ浏览器、百度浏览器
)和QQ客户端中,能唤醒。微信、和讯博客园客户端、腾讯和讯客户端不可能唤起。

代码如下:

<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>点击唤醒demo</title>
</head>
<body>
<style>
#zjmobliestart{font-size:40px;}
</style>
<!--
说明:通过h5可换醒app,如访问一个URL,点击按钮,打开应用,如果该应用APP没有安装,那么直接跳转到App Store的APP下载页面,通过点击的方式。兼容性较好,如果安装了app,在手机各大浏览器(360浏览器 uc浏览器 搜狗浏览器 QQ浏览器 百度浏览器 )和QQ客户端中,能唤醒。微信 新浪微博客户端 腾讯微博客户端无法唤醒。
-->
<a href="zjmobile://platformapi/startapp" id="zjmobliestart" target="_blank">唤醒浙江移动手机营业厅!</a>
<script type="text/javascript"> 
function applink(){  
    return function(){  
        var clickedAt = +new Date;  
         setTimeout(function(){
             !window.document.webkitHidden && setTimeout(function(){ 
                   if (+new Date - clickedAt < 2000){  
                       window.location = 'https://itunes.apple.com/us/app/zhe-jiang-yi-dong-shou-ji/id898243566#weixin.qq.com';  
                   }  
             }, 500);       
         }, 500)   
    };  
}  
document.getElementById("zjmobliestart").onclick = applink();  
</script>   
</body>
</html>

2.点击唤醒

表明:通过h5可换醒app,如访问3个U汉兰达L就能直接打开应用,假如该应用APP没有设置,那么直接跳转到App
Store的APP下载页面。包容性一般:在四哥伦比亚大学各大浏览器(360浏览器、uc浏览器、搜狗浏览器
QQ浏览器、百度浏览器 )能提醒。微信、QQ客户端、搜狐天涯论坛客户端、
腾讯微博客户端无法唤起。

代码如下:

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>直接唤醒demo</title>
</head>
<body>
<style>
#zjmobliestart{font-size:40px;}
</style>
<!--
说明:通过h5可换醒app,如访问一个URL就能直接打开应用,如果该应用APP没有安装,那么直接跳转到App Store的APP下载页面
兼容性一般:在手机各大浏览器(360浏览器 uc浏览器 搜狗浏览器 QQ浏览器 百度浏览器 )能唤醒。微信 QQ客户端 新浪微博客户端 腾讯微博客户端无法唤醒。
-->
<p id="zjmobliestart">唤醒浙江移动手机营业厅!</p>
<script type="text/javascript"> 
function applink(){   
    window.location = 'zjmobile://platformapi/startapp';  
        var clickedAt = +new Date;  
         setTimeout(function(){
             !window.document.webkitHidden && setTimeout(function(){ 
                   if (+new Date - clickedAt < 2000){  
                       window.location = 'https://itunes.apple.com/us/app/zhe-jiang-yi-dong-shou-ji/id898243566#weixin.qq.com';  
                   }  
             }, 500);       
         }, 500)   

}
applink();
</script>   
</body>
</html>

 那样就到位了大家的供给了,在那么些进度中,也赶上了广大热心人的任课,那里记录一下,刚起头有人没明白作者的要求,以为自身是在android端来贯彻,让本身通过包名的法门来检验app是或不是安装,那里记录一下艺术,代码如下:

4858美高梅 1

更加多措施请查看本人的工具类: CommonUtilLibrary

还有的正是认为笔者是要在app里面通过加载webview的款式来挑起本地的app,那里也记录一下,代码如下:

webView.setWebViewClient(new WebViewClient(){ 
            @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { 
                    Uri uri=Uri.parse(url);
                   if(uri.getScheme().equals("abraham")&&uri.getHost().equals("jingewenku.com")){ 
                            String arg0=uri.getQueryParameter("arg0");
                           String arg1=uri.getQueryParameter("arg1"); 
                      }else{ 
          view.loadUrl(url); 
        } return true; 
}});

还要注意的是,倘使是在微信中滋生本地app,手提式有线电话机的微信中,是行使微信内置的浏览器(你可以将从前得到的页面在服务器上的地方发给你的其余关系人,点击发送的新闻即可打开网页)打开那么些简单的HTML页面,注意:直接打开scheme://host/datastring是不可行的,微信不会把那串字符解析成网址,必须包装成网页才能借助微信的浏览器打开。进入后正是我们刚刚设计的页面。那些时候,直接点击“运转应用程序”是不会唤起此前设置的APP的,因为微信做了遮风挡雨,你须要在右上角的菜单中采取“在浏览器中开辟”。那么些时候,有个别浏览器就能够唤起,有些浏览器则分外,比如小编测试机MX4上的放权浏览器不行,UC浏览器就能唤醒。部分浏览器不可能唤起,小编查阅了不可胜举材质也无法彻底化解,作者将来唯一能想到的是将赶上难题的浏览器让前者做二个判定,提醒不辅助,应该运用什么浏览器。即使有读者有缓解方案,敬请留言,多谢!

引起本地app,h5运维原生APP计算。后记:

微信中为什么无法唤醒App,须求“用浏览器打开”?

因为微信对具有的分享连接做了scheme屏蔽,约等于说分享连接中装有对于scheme的调用都被微信封掉了。

这为何有个别应用是足以唤起的,比如NISSAN点评,嘀嘀打车?

从非技术角度讲,因为公众点评,嘀嘀打车都以微信的养子,亲外甥。对于外甥有特殊照顾。

从技术角度讲,微信有3个白名单,对于在白名单中的分享连接是不会遮掩掉scheme调用的。

听不清楚?那我们举三个例子。

例如马自达点评的享受连接是

对应到微信白名单中就会有
这一项,全数源自于这几个三番五次的享受,都不会遮掩scheme,

比如

固然是SKODA点评的子集团也能够

到那里,我们就应当掌握,想借用NISSAN点评的scheme,绕过那一个难点是不容许的,除非您的享受连接能挂到民众点评的根域名上。

其一题材应该说北魏楚了,其它提一句,对于下载apk那种,微信是遮掩任何利用的,对于外孙子也不例外,所以你想提供下载链接,无论你是否孙子,都逃但是使用浏览器打开个中low的办法了.

附录:常见应用的UCRUISERL Scheme

1,系统默许使用

名称 URL Scheme Bundle identifier
Safari http://
maps http://maps.google.com
Phone tel://
SMS sms://
Mail mailto://
iBooks ibooks://
App Store itms-apps://itunes.apple.com
Music music://
Videos videos://

2,常用第壹方软件

名称 URL Scheme Bundle identifier
QQ mqq://
微信 weixin://
腾讯微博 TencentWeibo://
淘宝 taobao://
支付宝 alipay://
微博 sinaweibo://
weico微博 weico://
QQ浏览器 mqqbrowser:// com.tencent.mttlite
uc浏览器 dolphin:// com.dolphin.browser.iphone.chinese
欧朋浏览器 ohttp:// com.oupeng.mini
搜狗浏览器 SogouMSE:// com.sogou.SogouExplorerMobile
百度地图 baidumap:// com.baidu.map
Chrome googlechrome://
优酷 youku://
京东 openapp.jdmoble://
人人 renren://
美团 imeituan://
1号店 wccbyihaodian://
我查查 wcc://
有道词典 yddictproapp://
知乎 zhihu://
点评 dianping://
微盘 sinavdisk://
豆瓣fm doubanradio://
网易公开课 ntesopen://
名片全能王 camcard://
QQ音乐 qqmusic://
腾讯视频 tenvideo://
豆瓣电影 doubanmovie://
网易云音乐 orpheus://
网易新闻 newsapp://
网易应用 apper://
网易彩票 ntescaipiao://
有道云笔记 youdaonote://
多看 duokan-reader://
全国空气质量指数 dirtybeijing://
百度音乐 baidumusic://
下厨房 xcfapp://

上述正是本文的全部内容,希望对我们的学习抱有援助,也期待大家多多支持帮客之家。 

前两日接到二个有线的供给,作者那几个小白可是忙活了少数天在页面上有二个连接…

率先明晰,微信里屏蔽了schema协议。除非您是微信的合营伙伴之类的,他们专程给你布置进白名单。不然,我们就无法通过那些体协会议在微信中央直机关接唤起app。

为此,大家必要先判断页面场景是或不是在微信中,倘若在微信中,则会唤起用户在浏览器中开辟。

4858美高梅 ,久而久之没有写博客了,方今有个H5运营APP原生页面包车型大巴要求,中间遇上一些坑,看了些网上的完毕方案,特意来计算下

1 window.location.href = 'app的协议';
2 
3 setTimeout(function() {
4 window.location.href = 'app的下载地址'
5 },500)

H5中直接判断应用是不是安装

那里的逻辑很简单,当未遂打开app的时候,新页面不会弹出则页面逻辑继续展开;不然一经进入了新页面,则页面逻辑便结束了。所以大家能够另开多个延时的线程来判断这些事情

if(...){
document.location = '';
setTimeout(function(){
   //此处如果执行则表示没有app
},200);
}

一 、须要判定客户端的平台以及是或不是在微信浏览器中走访

     
其实代码很简短,先去跳转集团无线组app的自定义的schema协议;如若没有安装的app的话,第①行的代码是不奏效的,然后500ms跳转到app的下载地址,经常是是借助tx的亲外甥应用宝恐怕app
store
的下载连接。然则这种达成格局也是有标题标,因为你在微信中依然qq中不怕安装app的话,也不会跳转到app中的,因为你司的app的schema协议是明令禁止跳转的,除非进入了白名单。若是没插手微信的白名单的话,解决措施一般在h5页面某些地点加上叁个简约的tips.提醒用浏览器打开那些页面。假如设置了app,在浏览器能够正确的开拓app的。当然,那是安装了app的事态,当没有安装app的话,上诉代码在微信是从未别的难点的,反正又无可如何跳schema的,跳转到app的下载地址肯定是轻而易举的。但是大家在上一步提醒用户在浏览器打开页面,那时候难题又来了。那时候会冒出贰个憎恶的规模,那种局面是没有何好点子明确命令禁止的。发生的缘由嘛。就是尤其schema协议搞得鬼。那时候大家的缓解格局,正是在上一步的tip中唤醒‘若是设置了app的话,用浏览器打开’,哈哈,这么简单的呗,其实过多商户都以这般做的,简单直接。近来我们的商号正是这种艺术。也许直接给七个按钮算了。叁个开辟,3个下载。有个别时候,化繁为简未尝不是一种适于的主意。

通过H5唤起APP

编纂AndroidManifest.xml,首即便充实第二个<intent-filter>,launchapp用来标识schema,最CANON确认保证手提式有线电电话机系统唯一,那样就能够打开应用,而不是弹出二个精选框。能够顺便自身的数目通过string传递到activity,比如完整url为
launchapp://?data=mydata

<activity    
     android:name="com.robert.MainActivity"    
     android:configChanges="orientation|keyboardHidden|navigation|screenSize"    
     android:screenOrientation="landscape"    
     android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >    
     <intent-filter>    
         <action android:name="android.intent.action.MAIN" />    
         <category android:name="android.intent.category.LAUNCHER" />    
     </intent-filter>    
     <intent-filter>    
         <action android:name="android.intent.action.VIEW" />    
         <category android:name="android.intent.category.BROWSABLE" />    
         <category android:name="android.intent.category.DEFAULT"/>    
         <data android:scheme="launchapp" android:pathPrefix="/haha" />    
     </intent-filter>    
   </activity>   

下一场经过activity获得data数据:

  public void onCreate(Bundle savedInstanceState) {             
     Uri uridata = this.getIntent().getData();             
     String mydata = uridata.getQueryParameter("data");            
  }  

壹 、客户端判断

   
 那么有其余的法子来消除嘛。按理说是有些。上文说到微信禁止了app的schema协议。其实有一种协议,微信是从未禁止的,那就是universal
links。关于怎么布局的话实际不是大家前端工程工作局面的,甚至有写有线端开发也是一脸懵逼,有趣味可径直百度。别的的一种方法是利用iframe,但是那种格局在ios9以上是无法学有所成的。所以那种方法也得以间接pass。

编写html页面

方方面面页面或者是有些app的详细介绍,那里只写出关键的js代码:

<activity  
     android:name="com.robert.MainActivity"    
     android:configChanges="orientation|keyboardHidden|navigation|screenSize"    
     android:screenOrientation="landscape"    
     android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >    
     <intent-filter>    
         <action android:name="android.intent.action.MAIN" />    
         <category android:name="android.intent.category.LAUNCHER" />    
     </intent-filter>    
     <intent-filter>    
         <action android:name="android.intent.action.VIEW" />    
         <category android:name="android.intent.category.BROWSABLE" />    
         <category android:name="android.intent.category.DEFAULT"/>    
         <data android:scheme="launchapp" android:pathPrefix="/haha" />    
     </intent-filter>    
</activity>   

下边代码能够达到规定的标准那样1个指标,先请求 launchapp://
,借使系统能处理,或然说已经设置了myapp表示的使用,那么就能够打开,其余,借使无法打开,间接刷新一下当下页面,等于是重置location。

function openApp() {    

           if (/android/i.test(navigator.userAgent)) {    
                var isrefresh = getUrlParam('refresh'); // 获得refresh参数    
                if(isrefresh == 1) {    
                    return    
                }    
                window.location.href = 'launchapp://haha?data=mydata';    
                window.setTimeout(function () {    
                        window.location.href += '&refresh=1' // 附加一个特殊参数,用来标识这次刷新不要再调用myapp:// 了    
                }, 500);    
            }    

   }  

在运转APP时,Android和IOS系统处理的方法是不雷同的,Android这边由于开放,能够在浏览器中通过<a>标签以及meta标签的办法,让浏览器app获取手提式有线电话机打开应用的权力进而运转APP。

完整代码

代码作用: 判断手机/平板是不是安装app 假若设置
则调用app的scheme,传入url当作参数,来做持续操作 假若没有设置
则跳转到app store/google play 下载app

(function () {
    var openUrl = window.location.search;
    try {
        openUrl = openUrl.substring(1, openUrl.length);
    } catch (e) {}
    var isiOS = navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') || navigator.userAgent.match(
        'iPod'),
        isAndroid = navigator.userAgent
            .match('Android'),
        isDesktop = !isiOS && !isAndroid;
    if (isiOS) {
        setTimeout(function () {
            window.location = "itms-apps://itunes.apple.com/app/[name]/[id]?mt=8";
        }, 25);
        window.location = "[scheme]://[host]?url=" + openUrl;
    } else if (isAndroid) {
        window.location = "intent://[host]/" + "url=" + openUrl + "#Intent;scheme=[scheme];package=[package_name];end";
    } else {
        window.location.href = openUrl;
    }
})();

而在IOS那边,IOS9后头的系统,则能够在APP开发进度中参加配置和逻辑代码编写,系统在浏览器即将访问到有些域名前就把那几个域名对应的APP打开,那一个略带闪,封闭依旧有查封的利益。

据此率先要在客户端判断,是Android系统或许IOS系统,判断代码如下

function isInIos(){
    var userAgentInfo = navigator.userAgent ,
        Agents = ["iPhone" , "iPad", "iPod"];
    for(var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          return true;
        }
    }
    return false;
}        

二 、是不是在微信内置浏览器中

随便在哪个平台的客户端Android/IOS,在微信的平台上访问都有1个难题,那就是无能为力起动客户端,那是微信为了安全性考虑的范围,android那边屏蔽schema协议,除非集团是微信的同伴参预了白名单才能

应用,IOS系统能够去访问app对应appstore的下载页,可是微信日常屏蔽appstore的这几个网址,进而访问不到。比较便宜的做法就是在微信浏览器中,无论是IOS照旧android都去应用宝的下载(IOS
那边最后会到

appstore中)页面打开。笔者这边的供给是提醒用户点击“…”用暗中认可浏览器打开。

判定是还是不是是在微信中,代码如下:

function isInWx(){
    var agent = window.navigator.userAgent.toLowerCase();
    return agent.match(/MicroMessenger/i) == 'micromessenger';
}

 

 

二、原理

第②无论是andorid依旧IOS端,在浏览器中经过JS都是无力回天看清该手机是或不是富有某APP的,就算这一个浏览器有权力读取手提式有线话机采取列表,也并未四个固定的对外API让我们进行询问。而H5运维APP本质上是通过

U揽胜极光L scheme打开APP,二个APP能够安装三个或四个打开自个儿的U昂科雷L
scheme,浏览器去访问某1个APP的U奥迪Q5L
scheme,然后若系统设置有其一APP,则会呈请权限去开辟那一个APP。其实也究竟浏览器app

开辟另贰个app,iOS就能够应用 UIApplication 的 canOpenUrl 方法来检查和测试U昂CoraL
scheme 是还是不是能开拓对应的APP,而android也是相仿的办法。当然假如JS跳转UTucsonL
scheme没有影响,也意味着那一个手提式有线电话机没有

装这个app。

 

三、android平台

首先编辑AndroidManifest.xml,首借使增多首个<intent-filter>

<activity android:name=".activity.LoadingActivity"
      android:label="${APP_NAME}"
      android:screenOrientation="portrait"
      android:theme="@style/FirstActivityTheme">
      <intent-filter>
          <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
      <intent-filter>
          <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
      <data android:host="android"
                android:scheme="wushang" />
      </intent-filter>
</activity>

比如此处wushang正是scheme,那一个最棒是app的绝无仅有标识符,要不然在H5唤醒时,晤面世一个选用框,选取运维哪一个APP。而host表示运营该页面,其实那一个更应该用com.android.sky那样的包名来顶替更好。

那样的事态完全的U昂科拉L正是wushang://android?data=sky,后边是参数字传送递。在Activity中得以用如下代码获取参数

public void onCreate(Bundle savedInstanceState) {             
     Uri uridata = this.getIntent().getData();             
     String mydata = uridata.getQueryParameter("data");            
}

后来在拓展字符串截取照旧怎么鬼的都随意啦。

 

接下去来切磋前端代码,那里有三种意况

① 、页面在刷新进入时,请求权限唤起APP

那一个相比不难,就只用在页面包车型地铁顶部head中进入meta标签即可

<meta http-equiv="refresh" content="0;url=wushang://android?data=sky">

其一标注当页面刷新即去拜谒那些链接,进而运营APP。然而存在一个标题,若是是苹果系统的Safari浏览器的话,访问有其一meta的头,会付出错误提醒,所以那个底部能够在后端实行页面渲染时经过客户端的

总类在累加去。

二 、通过点击事件唤起APP

最简易的办法当然是直接采取a标签,如下

<a href="wushang://android">open Android app</a>

然而在其实使用时,是必要对客户端的平台项目还有是或不是在微信内置浏览器中展开判定的,所以这么的做法必将是不行的。

接下去探究在支付进度中,遇到的三个标题,记录下。因为那边移动端选用的工具库库是zepto,采用的点击事件是tap,然而在用tap举办处理是时常要点很多下,才能唤起APP

<script type="text/javascript">
  $('#go').tap(function(){
      window.location.href = "wushang://android";
  });
</script>

切实原因不知,或者是tap事件选取的是轻点触碰。然后搜索了下,才用click事件,或然间接在a标签上标明处理函数就从未有过那标题

<a id="go" >
    open Android app
</a>
<a href="javascript:startApp()">
   open
</a>
<script src="../res/lib/zepto.min.js"></script>
<script src="../res/lib/public.js"></script>
<script>
    $('#go').click(function () {
       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    });

    function startApp(){
       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    }
</script>

为此决定之后境遇那类难题,就用那二种情势了。上面是实在的处理函数

 window.startApp = function(){     //启动APP
     if(publicFun.isInWx()){     //微信中
        alert("请在浏览器中打开");
     }else{      //非微信中
        if(publicFun.isIos()){    //IOS系统,直接去itunes中,既可以下载也可以打开
            window.location.href = "https://itunes.apple.com/cn/app/[name]/id[id]";
        }else{      //android系统,通过定时器的方式,判断是否安装有APP
            var hasApp = true , t = 1000;
            setTimeout(function () {  //没有安装APP则跳转至应用宝下载,延时时间设置为2秒
              if(!hasApp) window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=[name]";
            } , 2000);
            var t1 = Date.now();
            window.location.href = "wushang://android";
            setTimeout(function () {    //t的时间就是出发APP启动的时间,若APP启动了,再次返回页面时t2这行代码执行,hasApp即为true。反之若APP没有启动即为false
              var t2 = Date.now();
              hasApp = !(!t1 || t2 - t1 < t + 150);
            } , t);
        }
     }
  } 

实际上有个卓殊简单的法门,就是从来跳转应用宝。无论是在android依然IOS,以及微信非微信。应用宝的下载页面都有下载和开拓多少个效益(假设是在IOS平台,它是通过连接app
store的不二法门)

 

四、IOS平台

针对ios9及以上的打不开难题,实际上ios9提供了更好的解决方案————通用链接。

那是iOS9生产的一项意义,如若你的行使支撑Universal
Links(通用链接),那么就可见有利于的经过守旧的HTTP链接来运行APP(如若iOS设备上业已设置了您的app,不供给非常做别的判断等),也许打开网页(iOS设备上从未有过设置你的app)。只怕能够更简短点来证实,在iOS9在此以前,对于从各类从浏览器,Safari、UIWebView或者WKWebView中唤醒APP的须要,大家常常只可以动用scheme。

以上来自网上有关通用链接的牵线,对于前端简单点讲便是你拜访二个http的url,假若这几个url带有你提交给支付平台的配备文件中拾壹分规则的始末,ios系统会去品尝打开你的app,要是打不开,系统就会在浏览器中间转播向你要访问的链接。很好的2脾质量,因为经过那一个性子在ios9上大家能够绕过微信的阻止从而开拓app。

因此地点的点击事件,仅仅是去访问app
store,因为若app已设置,在浏览器访问时,就曾经去到APP中了。

那些都是IOS配置上的东西,就不多写了。至于传参,以及页面定向,其实也正是相当于在UIWebView中收获当前连接的U路虎极光L,然后开始展览字符串拆分以及校验,即可判断去哪个页,以及取得参数值。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有