所有分类
  • 所有分类
  • 后端开发
详解如何通过 h5 唤起手机本地 app,方法都在这了

详解如何通过 h5 唤起手机本地 app,方法都在这了

还有的就是以为我是要在app里面通过加载webview的形式来唤起本地的app,这里也记录一下,代码如下:

    
        
            
            
        
        
            
            
            
            
        
    

1.问题的起源:为什么APP图标会消失?

讲到这儿,我得说说我那天的遭遇,就是手机上APP的图标突然没了。其实,就是我们在启动页面设置有点小岔子。开发App时,我们可能会传个啥参数进去,就体现在那个页面上。然后,要是咱们不留神把那些配置跟标签弄混了,那图标就要玩消失,搞得就好像被风刮跑了似的。

       
        
                      Insert title here
        
         
            打开app

这种事儿挺常有的,当你想让APP在启动时传点什么东西进来的时候。比如说,你可能要用到onCreate这个函数把它调出来。这样的话,虽然功能是能用了,但是如果设置错了,那APP图标就没了,用户肯定不高兴。

2.使用schema协议的尝试与失败

启动应用程序

搞定APP图标失踪这档子事儿,咱们首先想到的就是用schema协议,这玩意儿能让网页上的链接直通APP!听着就挺炫?可惜,用了才知道,靠配置href来实现它并没想象中的那么好用。有时候点了也打不开APP,真是愁人呐~

于是咱们得找别的法子。要是没装APP,点了链接得去下。可惜schema撑不了这事,咱们只好再想想新招儿。

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

3.转向JavaScript的救赎

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 pathSegments = uri.getPathSegments();
 // Query部分
 String query = uri.getQuery();
 Log.e(TAG, "query: "  + query);
 //获取指定参数值
 String goodsId = uri.getQueryParameter("goodsId");
 Log.e(TAG, "goodsId: "  + goodsId);
}

因为Schema协议搞不定,我们只能求助于JavaScript。毕竟,也就只有靠它,我们才能在适当时候决定要不要启动APP,或导向下载链接。但问题来了,JavaScript自己可没法检查用户的手机上到底装没装某个APP。这时,我们得想些聪明办法来解决这个问题。

我们就是靠看看你什么时候想打开这个APP,要是等半天都没动静,那就当你没装,直接去下载那个页面。其实这挺费劲儿的,但是当时也真找不出别的好办法来了。

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

4.H5页面的神奇力量

我们玩儿出来个大发现!H5页面竟然这么牛逼——只要输入一个网址就可以直接开启你想用的APP。哪怕是没装APP的小伙伴,也会自动帮你跳转到AppStore下载。这个方法太万能了,各种浏览器和QQ客户端都能用得起来~

这个新办法真不错,让人眼前一亮。既把以前的问题解决了,也给了个更高级的解决法子。利用H5,居然能直接唤起手机应用和引导用户自己下载,真的很厉害!

5.微信中的特殊情况

你看,问题哪有那么好处理?我们刚觉得搞定了,结果微信就给了个新麻烦。在微信里,你得把那个什么schema协议的链接包装成网页才能点开,不然微信就是识别不了。

也就是说,要是你想在微信里点链接的话,得先选择“在浏览器中打开”直接点“启动应用程序”是打不开以前装过的APP的,有点小麻烦对?但也提醒我们要留意不同的平台和情况下的适应度!





点击唤醒demo



#zjmobliestart{font-size:40px;}

唤醒浙江移动手机营业厅!
 
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();  
   

6.技术细节:包名检查与WebView加载

解决问题时,我们发现了些有意思的技术点子~有人说要靠看APP名字来判断有没有装,虽然有点不太准,但有时候也是个好办法;另外有种方法叫”WebView加载”,就是利用网页去调用手机里的应用程序,这招儿挺管用,而且也有特定用处。

研究这些技术,就是为了更好地明白怎么唤醒APP。虽然挺费劲的,但是每次努力,都能让我们离答案再靠近一点呗!






直接唤醒demo



#zjmobliestart{font-size:40px;}

唤醒浙江移动手机营业厅!

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();

7.总结与展望

经过折腾,咱们终于搞定了APP唤醒的难题。虽然过程磕磕绊绊,但结果还是挺满意的,既解决了问题,又找到了个更漂亮、兼容性也更好的方法。这让我对接下来的项目干劲十足!

这儿想请教下大家伙儿:开发时遇到了什么难题吗?是咋整好的?咱们一起来唠嗑,互相学习呗!别忘了点个赞,分享出去,让更多的人受益呀~

详解如何通过 h5 唤起手机本地 app,方法都在这了

原文链接:https://www.icz.com/technicalinformation/web/2024/07/20236.html,转载请注明出处~~~
0

评论0

请先
注意:请收藏好网址www.icz.com,防止失联!站内免费资源持续上传中…!赞助我们
显示验证码
没有账号?注册  忘记密码?