您的位置:时时app平台注册网站 > web前端 > h5跳转到app的实现

h5跳转到app的实现

2019-10-18 23:54

      其实代码相当的粗略,先去跳转公司有线组app的自定义的schema合同;若无安装的app的话,第一行的代码是不奏效的,然后500ms跳转到app的下载地址,常常是是依赖tx的亲儿子应用宝或许app store 的下载连接。不过这种完成情势也可能有题指标,因为您在微信中或许qq中正是安装app的话,也不会跳转到app中的,因为你司的app的schema合同是明确命令制止跳转的,除非走入了白名单。假若没插手微信的白名单的话,消除办法平常在h5页面某些地点加上贰个简练的tips.提醒用浏览器张开这些页面。借使设置了app,在浏览器能够精确的开采app的。当然,那是设置了app的景况,当未有安装app的话,上诉代码在微信是未有任何难点的,反正又万般无奈跳schema的,跳转到app的下载地址鲜明是安若大茂山的。但是大家在上一步提醒客商在浏览器展开页面,那时候难点又来了。那时候会并发一个憎恶的规模,这种局面是绝非什么好点子明确命令禁止的。产生的缘由嘛。正是非常schema公约搞得鬼。那时候大家的减轻办法,就是在上一步的tip中唤醒‘借使设置了app的话,用浏览器张开’,哈哈,这么轻巧的呗,其实过多合营社都以这么做的,轻巧直接。这几天我们的商铺就是这种情势。或许直接给七个按键算了。一个开发,二个下载。有个别时候,化繁为简未尝不是一种适于的点子。

详解怎么样通过H5(浏览器/WebView/别的)唤起当地app,h5webview

前两日接到叁个无线的须要,笔者这些小白可是忙活了少数天……在页面上有三个连连, 如果顾客设置了APP,则点击张开对应的APP假设客商未有安装,则点击张开对应的安装连接.上网物色了弹指间,基本都说能够兑现,可是事实上情况却不乐观.

理之当然只是此中的贰个急需,还应该有的是前几日种种app,分享出去的H5页面中,平时都会带着二个应声张开的开关,假使本地安装了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的Logo会未有;注意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);
}

 如何判断叁个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);
}

这种艺术也是自家百度到的最多的章程,不过那样就带来了二个标题了,下边包车型客车急需说的是“在页面上有一个连连, 借使客户设置了应用软件,则点击展开对应的应用软件;若是顾客未有安装,则点击张开对应的设置连接”,那明摆着就不相符供给了,那只能当做一些分别供给来利用了。

第三种方法:

既然如此经过在href配置schema左券不行,那就只能通过js代码来促成了,唯有这么技能依照决断实现app偶尔就展开,没有时就跳转到下载链接下载。
大家知道,js是力不可能支剖断手提式有线电话机是不是安装了某款app的,所以大家只可以够曲线救国了,我们能够赢得时间一旦,长日子无法呼起app则暗许为尚未安装那款app,然后跳转到下载页。当然那不是作者想出去的,是网络的诸位大佬的主张。在这里处又要分开为二种情形了。

1.直接唤醒

表明:通过h5可换醒app,如访问三个U安德拉L,点击按键,张开应用,假若该应用应用程式未有设置,那么直接跳转到App Store的APP下载页面,通过点击的诀窍宽容性较好,如果设置了app,在手提式无线电话机各大浏览器(360浏览器、uc浏览器、搜狗浏览器、QQ浏览器、百度浏览器 )和QQ客户端中,能唤起。微信、博客园今日头条客商端、Tencent新浪顾客端无法唤起。

代码如下:

<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<head>
<script src="http://www.zhikejy.com/uploads/allimg/191018/2354051023-0.jpg"></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,如访问二个UXC60L就会直接张开应用,要是该应用应用软件未有设置,那么直接跳转到App Store的应用程式下载页面。包容性凉日:在四哥伦比亚大学各大浏览器(360浏览器、uc浏览器、搜狗浏览器 QQ浏览器、百度浏览器 )能唤醒。微信、QQ客商端、新浪博客园顾客端、 Tencent天涯论坛顾客端无法唤起。

代码如下:

<!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://www.zhikejy.com/uploads/allimg/191018/2354051023-0.jpg"></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是不是安装,这里记录一下方法,代码如下:

图片 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是不可行的,微信不会把这串字符解析成网址,必得包装成网页本领依赖微信的浏览器打开。步向后正是我们正好设计的页面。那年,直接点击“运行应用程序”是不会唤醒之前设置的应用程式的,因为微信做了遮挡,你要求在右上角的菜单中选用“在浏览器中打开”。今年,有个别浏览器就足以唤起,有些浏览器则丰盛,举例作者测量试验机MX4上的内置浏览器不行,UC浏览器就可以提示。部分浏览器不可能唤醒,小编查阅了广大资料也不能够透彻解决,笔者现在独一能体会精通的是将赶上难点的浏览器让前面一个做贰个剖断,提醒不帮助,应该采Nash么浏览器。假使有读者有缓慢解决方案,敬请留言,谢谢!

后记:

微信中为何不能够唤醒App,要求“用浏览器打开”?

因为微信对全部的享用连接做了scheme屏蔽,也正是说分享连接中全部对于scheme的调用都被微信封掉了。

那为啥有些应用是能够引起的,举个例子大众点评,嘀嘀打车?

从非本领角度讲,因为大众点评,嘀嘀打车都以微信的养子,亲孙子。对于外甥有特殊照望。

从技艺角度讲,微信有二个白名单,对于在白名单中的分享连接是不会隐瞒掉scheme调用的。

听不明白?那大家举二个事例。

譬喻说大众点评的分享连接是

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

比如

就算是大众点评的子集团也能够

到此地,大家就应有知道,想借用大众点评的scheme,绕过那几个难题是不容许的,除非您的享受连接能挂到大众点评的根域名上。

以此难点应有说金朝楚了,别的提一句,对于下载apk这种,微信是遮盖任何利用的,对于儿子也不例外,所以您想提供下载链接,无论你是不是外甥,都逃但是使用浏览器张开此中low的方法了.

附录:常见应用的U中华VL 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。

之所以,大家要求先决断页面场景是或不是在微信中,借使在微信中,则会提醒顾客在浏览器中开垦。

     那么有别的的章程来消除嘛。按理说是一些。上文说起微信幸免了app的schema公约。其实有一种合同,微信是未曾明令禁绝的,那正是universal links。关于怎么布局的话并不是大家前端工程职业层面包车型客车,以至有写有线端开采也是一脸懵逼,有意思味可径直百度。其他的一种办法是运用iframe,然则这种措施在ios9以上是不可能得逞的。所以这种艺术也得以平素pass。

通过H5唤起APP

编排AndroidManifest.xml,首若是充实第叁个<intent-filter>,launchapp用来标志schema,最棒能保险手提式有线电话机系统独一,那样就能够展开应用,实际不是弹出叁个精选框。能够顺便自身的数额通过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");            
  }  

       随着业务的加多,或许存在此么一种须要,就是索要从h5中央直属机关接跳转到app。若无安装app的话,则提醒到利用市镇依旧app store下载安装。可是难点就在这里个地点,单纯的用h5是不曾议程推断是还是不是安装过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;
    }
})();
1 window.location.href = 'app的协议';
2 
3 setTimeout(function() {
4 window.location.href = 'app的下载地址'
5 },500)

编写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>   

上面代码能够完毕如此一个指标,先央浼 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);    
            }    

   }  

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

此间的逻辑相当粗略,当未遂开采app的时候,新页面不会弹出则页面逻辑继续开展;不然一旦走入了新页面,则页面逻辑便停下了。所以我们得以另开二个延时的线程来决断那些专业

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

本文由时时app平台注册网站发布于web前端,转载请注明出处:h5跳转到app的实现

关键词: