实现方式不太完美,最近看了微博、京东的手机版网页,感觉他们的实现方式很不错,研究了一下,实现以下效果:
如果本地已经安装了指定Android应用,就直接打开它;如果没有安装,则直接下载该应用的安装文件(也可以跳转到下载页面)。
实现效果
如下图所示,在手机浏览器中访问京东的手机版网站(m.jd.com),顶部会有一个广告图,点击这个广告图,如果手机上已经安装了京东App,则直接打开,如果没有安装,则开始下载。
实现方式
1.为Android应用的启动Activity设置一个Schema,如下:
<data android:host="splash" android:scheme="cundong"/>
2.用户点击浏览器中的链接时,在动态创建一个不可见的iframe,并且让这个iframe去加载步骤1中的Schema,如下:
var ifr = document.createElement('iframe'); ifr.src="cundong://splash"
3,如果在指定的时间内没有跳转成功,则当前页跳转到apk的下载地址(或下载页),如下:
window.location = download_url;
HTML代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<! doctype html>
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< meta name = "apple-mobile-web-app-capable" content = "yes" >
< meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
< title >this's a demo</ title >
< meta id = "viewport" name = "viewport" content = "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui" >
</ head >
< body >
< div >
< a id = "J-call-app" href = "javascript:;" class = "label" >立即打开>></ a >
< input id = "J-download-app" type = "hidden" name = "storeurl" value = "http://m.chanyouji.cn/apk/chanyouji-2.2.0.apk" >
</ div >
< script >
(function(){
var ua = navigator.userAgent.toLowerCase();
var t;
var config = {
/*scheme:必须*/
scheme_IOS: 'cundong://',
scheme_Adr: 'cundong://splash',
download_url: document.getElementById('J-download-app').value,
timeout: 600
};
function openclient() {
var startTime = Date.now();
var ifr = document.createElement('iframe');
ifr.src = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adr;
ifr.style.display = 'none';
document.body.appendChild(ifr);
var t = setTimeout(function() {
var endTime = Date.now();
if (!startTime || endTime - startTime < config.timeout + 200) {
window.location = config.download_url;
} else {
}
}, config.timeout);
window.onblur = function() {
clearTimeout(t);
}
}
window.addEventListener("DOMContentLoaded", function(){
document.getElementById("J-call-app").addEventListener('click',openclient,false);
}, false);
})()
</ script >
</ body >
</ html >
|
AndroidMainfext.xml
<activity android:name=".activity.LauncherActivity" android:configChanges="orientation|keyboardHidden|navigation|screenSize" android:label="@string/app_name" android:screenOrientation="portrait" > <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="splash" android:scheme="cundong" /> </intent-filter> </activity>
相关推荐
2. 提高用户体验:通过将常用的应用程序集成到网页中,用户可以方便地在浏览器中直接打开所需的应用程序,无需繁琐的寻找和启动过程,提高了用户的使用体验。 3. 跨平台兼容性:由于该功能是基于浏览器实现的,因此...
包括Android 移动开发基础案例教程课本中第三章实战演练——打开浏览器的源代码,可用Android studio运行,适合初学者学习。
通过H5链接在微信端或者外部浏览器输入链接打开微信小程序
Android卸载或删除应用,调用浏览器打开指定网页地址url
]: [特拉维斯图像]: MeowChatBox是一个 WebRTC 浏览器到浏览器的聊天应用程序。 它目前 100% 在 Chrome 和 Firefox 中以在线模式运行。 它适用于桌面和移动设备(在 Android 中速度很快)。 我还没有检查过 Opera...
一个用于构建浏览器或类似浏览器的应用程序的Android库集合
应用调用应用程序调用是一个演示,用于显示Android和html... 特征: 通过网络浏览器打开Android应用通过另一个应用程序打开Android应用程序申请者网页浏览器项目路径: app-call/web/ 发送带有查询参数的参数: href=...
前端JS打开CMD执行程序 不限制浏览器 JS打开浏览器 谷歌浏览器前端打开其他程序 谷歌浏览器JS打开其他程序
自定义协议从浏览器中启动本地应用程序,是一个完成的DEMO,可以正常实现功能.
:airplane: 在浏览器中观看此应用,并控制您的旅行支出。 :airplane: 您有一个漂亮的面板,您可以在其中查看旅行费用,最后记录的费用显示在底部。 在左侧,将记录所有旅行费用而不会遗漏任何统计信息,并且您不必...
Android学习笔记(二九):嵌入浏览器
如果你已经搭建了一个适合手机浏览的服务端网站比如公司主页等,完全可以把这个源码当作外壳来做一个属于自己的“套壳客户端”,也就是套着安卓客户端的壳子实际上是放了一个浏览器用来直接浏览web内容,点击手机的...
浏览器中运行Android应用.pdf
需求是在浏览器中点击某个按钮,打开本地的某个exe文件。上传代码直接修改reg中的路径(里面包含所有行的说明信息),执行reg之后,打开代码中的网页,点击即可测试使用。
让用 C 语言开发的 应用程序,在不需要修改源码的情况下,能在浏览器中运行。 这样做的意义主要在于,可以很方便的向客户展示项目。你只需分享一个链接,客户就可以在浏览器中打开,并看到实际的运行效果。 把 AWTK ...
嵌入式Android项目设计与开发 第九章 网络通讯 —— 浏览器的实现 浏览器的实现 有时候,我们需要在应用程序中展示一个网页内容,通常这是浏览器的工作,但我们也可以通过WebView自己去实现。 WebView本身就是...
源码参考,欢迎下载
Android的文件浏览器/文件选择器,可以集成到应用程序中,从内部/外部存储中浏览/选择文件。
让我们将您的网站和Web应用程序转换为Android应用程序。此应用程序模板支持各种Web应用程序/网站(包括HTML,PHP,WordPress,Progressive Web Apps,HTML 5 Games,WiX,Jimdo,apprat.io,bubble,Webflow,...)...
Chrome浏览器可以运行Android应用.docx