iOS平台一直是封闭的生态圈,iOS开发者要缴纳年费加入开发者计划才可进行iOS平台的APP开发测试,所开发的APP需要上传到App Store经过苹果审核以后才可对外发布。如果要开发企业内部应用,则要缴纳更高的费用购买企业账户才可以。
对于现在火如荼的HTML5应用,我们可以借助PhoneGap对其打包,然后像原生APP一样发布它们;或者要求用户直接通过浏览器访问。前一种方式的优点是用户体验好,用户可以像使用原生APP那样使用它们,缺点是发布很繁琐,而且要等待苹果审核。后一种方式则完全不用考虑发布的问题,但是用户体验比较差,毕竟让用户打开浏览器,自行输入网址对用户操作水平要求较高。今天我们通过采用Hightopo的HT for Web组件,介绍另外一种方式,这种方式综合了前面两种方式的优点,特别适合部署企业内部应用。
手边有iPhone或iPad的同学可以先按照下面的方式实验:
1、用iPhone或iPad上的Safari浏览器打开链接:http://pattern.dk/sun/,点击底部的发送按钮
2、 点击发送到主屏幕
3、确认添加
4、查看主屏上新增加的APP图标
大家可以看到我们的主屏幕上已经多了一个”APP”,如果细心优化,用户完全无法区分这是一个原生应用还是HTML5应用,极大提升了用户体验。
是不是很神奇?接下来我们以HT for Web的拓扑应用为例,试着实现这样一个”高仿”的APP,先看一下我们的页面在iPhone浏览器中的效果:
为了使这个页面看起来像原生APP,我们需要在HTML页面中加入一些特殊标记:
<!--页面缩放方式--> <meta name="viewport" content="user-scalable=0, initial-scale=1.0”> <!--是否全屏显示--> <meta name="apple-mobile-web-app-capable" content=“yes"> <!--状态栏透明--> <meta name="apple-mobile-web-app-status-bar-style" content=“black-translucent"> <!--APP在主屏上显示的名字--> <meta name="apple-mobile-web-app-title" content="ht" /> <!--App在主屏上显示的图标--> <link rel="apple-touch-icon" href="res/icon.png"> <!--启动画面--> <!-- iPhone5--> <link rel="apple-touch-startup-image" href="res/girl_iphone5.png"> <!-- iPhone6--> <link rel="apple-touch-startup-image" href="res/girl_iphone6.png" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" />
viewport的设置可以参考苹果的官方文档,写的非常棒。
其它meta标签的用法也有很好的参考文档,推荐大家仔细阅读:
相关推荐
IOS加载bundle里的html并实现WebView与JavaScript的交互
iOS超级猜图app小程序,猜图是以休闲娱乐为主,界面美观、大方,操作简便、流畅,可以使玩家在工作之余放松心情,舒缓压力。玩家通过查看图片来猜出图片所对应的内容,从而获得高分。
ios一个app应用内部调用另一个新的app应用,ios app内调用另一个app app打开新app
ios url 调用百度app 和 调用web 百度地图 iphone
1. IOS app 发布应用详细操作说明;2. outside the store 安装流程;3. Missing ios distribution signing identity…解决方案;4. Your account already has a valid certificate解决方案
自己亲手整理的ios 应用发布到appstore的全部流程,含有配图,清晰明了,学不会只能说你笨。
2022新版本运营级分发平台一键IOS免签支持在线封装app分发源码 支持免签绿标 2022新版本运营级分发平台一键IOS免签支持在线封装app分发源码 支持免签绿标 可能有后门,所以分享出来给大家看一下,前端去掉了两个加密...
使用与支持 Vuplex VR/AR 浏览器的相同代码,即可轻松在 Windows 和 macOS 上以 3D 形式渲染 Web 内容并与之进行交互 该软件包支持 Android ≥ 6.0 上的原生视频和 WebGL,但某些 VR 虚拟现实头盔(如 Oculus Go 和 ...
第五章 创建移动平台应用程序 (iOS and Android) 54 5.1在你开始之前 54 5.2创建一个新的Android或iOS FireMonkey应用 55 5.3选择Style 56 5.4在多设备窗体上放置组件 56 5.5添加视图到项目 60 5.6编写用户...
iOS 6 SDK在应用内展示App Store
You have a great idea for a simple mobile web app. Or, you have a great idea for a complicated mobile web app. Either way, Learn HTML5 and JavaScript for iOS will help you build, fine-tune, and ...
iOS 10 App Development Essentials: Learn to Develop iOS 10 Apps with Xcode 8 and Swift 3 Author: Neil Smyth Length: 816 pages Edition: 1 Language: English Publisher: CreateSpace Independent Publishing...
app内打开第三方地图进行导航<百度,高德,腾讯,苹果>iOS移动前段
中文版ios App上线操作流程文档。已经过实践检验。
Web2 App是将您的网站转换为真实的IOS应用程序的最简单方法。此外,我们还提供了强大的功能,如标签,抽屉,内置广告,通知以及轻松的自定义和样式选项。 更容易些 h、.m、.x 第一个应用?没问题.我们提供了一个很...
2.智能提取APP应用信息,自动生成IOS应用PLIST,开发信息,方便用户在测试。 3.支持阿里云和七牛云存储绑定。 充值点数比例固定默认比例是一比一百点。 对接码支付版的分发系统,修复官方后门与修复数据库被删除的...
本科毕业设计+基于iOS平台的计步健身APP设计与实现+Objective-c 基于iOS平台的计步健身APP,有计步,计时,记录卡路里,等主要功能,其他还有商城,登录注册等等功能。主要用Objective-c制作前端 本科毕业设计+...
IOS APP应用开发 微博 Xcode 详细代码
3D WebView for Android and iOS Web Browser
ionic2 开发app的ios平台打包以及发布到App Store流程步骤