本文介绍从web页面打开iOS app的方法
<!--more-->
从web页面打开app是一个常见场景,大致上有2种做法
利用Safari原生Banner
只需要在html中加入一段meta,即可在Safari中显示一个Banner。如果未安装此app,会跳转到app store的下载页面,否则会直接打开应用
效果图:
html代码如下:
<meta name='apple-itunes-app' content='app-id=你的应用的app-id'>
另外我在简书的网站上,看到代码是这样写的:
<meta name="apple-itunes-app" content="app-id=888237539, app-argument=jianshu://notes/2283513">
特别的地方在于,多了一个app-argument参数,可能可以传递到app的这个方法里进行处理:
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString*, id> *)options
使用自定义链接
第一种方法的好处是方便,但是缺点是样式是固定的,不能自定义,所以更好的办法是采用自定义链接。代码如下:
<a href="https://itunes.apple.com/cn/app/id995195037" id="openApp">打开应用</a>
<script type="text/javascript">
document.getElementById('openApp').onclick = function(e){
var ifr = document.createElement('iframe');
ifr.src = 'com.yilos.nailstar://topic/abcdefg';
ifr.style.display = 'none';
document.body.appendChild(ifr);
window.setTimeout(function(){
document.body.removeChild(ifr);
},3000)
};
</script>
本质上是发起了一个请求:
com.yilos.nailstar:
这个请求会在iOS系统中查找对应的url schema,然后打开此应用,同样会进入以下方法:
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString*, id> *)options
所以有机会对自定义的参数进行处理
比较巧妙的地方在于,打开app的行为,会阻止a链接的默认跳转行为;而如果打开失败,则会进入app store的下载页面
简书的代码是利用同样的原理:
if (/iphone|ipad|ipod/.test(ua)) {
// in iOS
if (ua.match(/MicroMessenger/i) || ua.match(/weibo/i)){
Maleskine.showWeixinHelp();
}else if (ua.match(/MQQBrowser/i) || ua.match(/QQ/i)) {
Maleskine.showQQHelp();
} else {
window.location = "jianshu://p/12345678";
window.setTimeout(function() {
window.location = "https://itunes.apple.com/cn/app/jian-shu/id888237539?ls=1&mt=8";
}, 400);
}
}
也是先尝试打开app,如果打开失败,就跳转到app store下载页面
微信的兼容性问题
微信做了特殊处理,在微信中打开的web页,既不能跳转到app,也不能跳转到app store
所以一般的做法是提示用户在Safari中打开
<script type="text/javascript">
$(function () {
$('pre.prettyprint code').each(function () {
var lines = $(this).text().split('\n').length;
var $numbering = $('<ul/>').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('<li/>').text(i));
};
$numbering.fadeIn(1700);
});
});
</script>
分享到:
相关推荐
在 Web 应用视图中打开 iOS 链接 当您使用 Safari 在 iOS 主屏幕上安装网页时,该网站在使用以下元键时成为网络应用程序: < meta name =" apple-touch-fullscreen " content =" yes " > < meta name =...
源码TSMiniWebBrowser,TSMiniWebBrowser是一款嵌入iOS应用的开源web浏览器控件,它解决了开源浏览器控件中一个共同的知名Bug——UIWebView bug,结合“缩放”和“横向切换”操作时,浏览器会产生一些不稳定的行为。...
这是在 iOS 应用程序中使用 Web 内容的起点,包括 rake 任务和常见 iOS 任务的预编写处理程序。 请参阅。 必读 如果您完全不熟悉 iOS 开发,请遵循 Apple 的本教程: 然后阅读 。 然后,您将拥有了解该项目的体系...
APP 端消息离线推送:集成 unipush(个推),ios 无需上应用商店,但需要 push 的签名,Android 端离线推送需要上应用商店(申请软著并且域名备案) 后端功能详情: 系统设置:系统参数设置、APP 参数设置、vip 参数...
Flutter InAppWebView插件Flutter插件,可让您添加内联Webview,使用无头Webview并打开应用程序内浏览器Windo Flutter InAppWebView插件Flutter插件,可让您添加嵌入式WebView,使用无头Webview ,然后打开应用程序...
测验屏幕截图网页的iOS安卓安装yarn install指令yarn start:web web-在开发模式下运行应用程序的Web版本yarn build:web web-将要生产的应用程序的Web版本生成到dist-web文件夹yarn start:ios运行应用程序的iOS版本,...
##用法注意:从 1.0.4 版本开始, chui-android 使用以下参数: proj(您的项目名称) 用户(您计算机上的用户名) app(现有ChUI Web应用程序的路径,否则将创建一个默认的html页面) 图标(混合路径的图标路径...
SSH 为 Struts+Spring+Hibernate的一个集成框架,是目前较流行的一种Web应用程序开源框架。其中使用Struts作为系统的整体基础架构,负责MVC的分离,在Struts框架的模型部分,控制业务跳转,利用Hibernate框架对持久...
Flutter InAppWebView插件 Flutter插件,可让您添加嵌入式Web视图,使用无头Web视图以及打开应用内浏览器窗口。文章/资源要求Dart SDK:“> = 2.12.0-0 <3> = 1.22.0” Android: minSdkVersion 17并添加了对android...
iOS调试库,支持iOS9 +,无需添加任何代码即可促进iOS开发和测试。 截屏 教程 真实机器或模拟器在5秒钟内两次摇晃以出现调试菜单。 功能如下: FLEX调试工具(摇动即可打开) 循环参考检测和分析(单击以在对象...
iOS 9应用程序搜索示例应用程序此示例应用程序演示了如何使用iOS 9中引入并受Titanium 5.0.0支持的新API,通过Spotlight,Safari和Siri来搜索应用程序的活动和内容。大图景我强烈建议您通读所有新的以及Apple的《 和...
在浏览器上打开某个应用程序的页面后,您可以看到的有关某个应用程序的所有数据都是该项目中可用的数据(减去描述和文本评论)。 您不必输入任何 Apple 帐户凭据,因为此爬网程序的行为类似于“已注销”用户。 ...
但是考虑到 Sky 会从网页上更新应用和数据,那么安全性便不容忽视。Sky 团队的 Github Pages 上写着“我们正在频繁地更新 Sky,因此 Sky 框架还没有完全定型,不同版本的框架和底层也可能会产生兼容性问题”。示例...
否则,打开 web 端百度地图导航 需要用到的百度地图的 api 文档链接如下:http://lbsyun.baidu.com/index.php?title=uri/api/ios 最开始的代码: // 尝试唤起百度地图 app [removed].href = scheme; var timeout...
本示例代码支持PC、Android、IOS(仅Safari)中使用,如果用RecordApp可增加对IOS(微信浏览器、小程序)的支持。 看万遍代码不如行动一遍,新建一个html文件,把下面三段代码复制到文件内,双击浏览器打开就能进行测试...
9、关闭公众平台Web页面 10、判断当前网页是否在微信内置浏览器中打开 11、增加打开扫描二维码 12、支持WeixinApi的错误监控 13、检测应用程序是否已经安装(需要官方开通权限) 14、发送电子邮件
此演示应用程序基于 Android,但也可以移植到 iOS。 此 PoC 由提供支持 执照 截屏 网页、单页应用 安卓应用 这个怎么运作 一个简单的架构图可能价值超过 1000 字...... 要使这个魔法发挥作用,有五件重要的事情:...
* 9、关闭公众平台Web页面 * 10、判断当前网页是否在微信内置浏览器中打开 * 11、增加打开扫描二维码 * 12、支持WeixinApi的错误监控 * 13、检测应用程序是否已经安装(需要官方开通权限) * 14、发送电子邮件...
这是客户端Web应用程序的另一种方法,当您希望拥有更现代的客户端行为时,其行为与每个操作上的典型浏览器往返行为不同,但表现为类似于单页应用程序的单页面应用程序桌面应用使用体验。基于HTTP的微服务的消耗由...
云标签 - 随时同步并打开Windows,iOS,Mac上的标签内容 云同步 - 让账户数据在多平台上瞬间同步 炫酷全屏 全新体验独特的扇形菜单,快捷点划更顺畅 多窗口便利操控,不同页面轻松切换 最大化网页可视面积,...