iOS平台快速发布HT for Web拓扑图应用
iOS平台一直是封闭的生态圈，iOS开发者要缴纳年费加入开发者计划才可进行iOS平台的APP开发测试，所开发的APP需要上传到App Store经过苹果审核以后才可对外发布。如果要开发企业内部应用，则要缴纳更高的费用购买企业账户才可以。
对于现在火如荼的HTML5应用，我们可以借助PhoneGap对其打包，然后像原生APP一样发布它们；或者要求用户直接通过浏览器访问。前一种方式的优点是用户体验好，用户可以像使用原生APP那样使用它们，缺点是发布很繁琐，而且要等待苹果审核。后一种方式则完全不用考虑发布的问题，但是用户体验比较差，毕竟让用户打开浏览器，自行输入网址对用户操作水平要求较高。今天我们介绍另外一种方式，这种方式综合了前面两种方式的优点，特别适合部署企业内部应用。
手边有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标签的用法也有很好的参考文档，推荐大家仔细阅读：
还有一个细节需要注意，如果页面中的资源(JS脚本，图片等)非常多，每次打开重新加载也会影响到用户体验，这时我们可以将一些资源缓存起来：
<!--指定缓存控制文件-->
<html manifest="cache.manifest">
这个文件的内容如下：
CACHE MANIFEST CACHE:
ht.js
res/girl_iphone5.png
res/girl_iphone6.png
res/1.png
res/2.png
res/icon.png
在这个文件中，我们缓存ht.js和一堆图片文件，这些资源只会加载一次，第二次打开页面时不会重复从网络加载，所以显示非常快，这样我们的页面看起来就非常像一个原生应用了！
缓存的用法也有两篇很好的文档：
2、在客户端存储数据
最后上一段操作视频，看一下最终效果，优酷链接：http://v.youku.com/v_show/id_XOTUyODA1NjQ0.html?firsttime=0&from=y1.4-2
iOS平台快速发布HT for Web拓扑图应用的更多相关文章
- HT For Web 拓扑图背景设置
HT For Web 的HTML5拓扑图组件graphView背景设置有多种途径可选择: divBackground:通过css设置graphView对应的div背景 Painter:通过graphV ...
- iOS平台 | 快速集成华为AGC认证服务
介绍 如何让用户根据已有的账号来进行登录注册呢?在应用中集成华为AGC认证服务SDK来轻松快速地实现这个功能. 本篇内容根据官网文档指导集成过程总结完成,关于集成步骤,官网的资料写的有点多,现在我总结 ...
- ECharts整合HT for Web的网络拓扑图应用
ECharts图形组件在1.0发布的时候我就已经有所关注,今天在做项目的时候遇到了图标的需求,在HT for Web上也有图形组件的功能,但是在尝试了下具体实现后,发现HT for Web的图形组件是 ...
- 百度地图、ECharts整合HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- ECharts+BaiduMap+HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- 关于Unity发布iOS平台代码混淆问题
之前在越狱手机里找到<永恒战士3>的程序发现是用Unity做的,拷出资源出来看的时候发现里面有游戏程序集,立马抽出来反编译了一下,发现里面的代码只有方法签名,没有方法体,还以为用什么高端混 ...
- 如何利用Typora编写博客，快速发布到多平台？
在不同的平台发布同样的文章,最让人头疼的就是图片问题,如果要手动一个个去重新上传,耗时耗力,还容易搞错.下面分享的方法,可以将Typora编写的文章快速发布到CSDN.微信公众号.博客园.简书等平台. ...
- 基于HT for Web 快速搭建3D机房设备面板
以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...
- 基于HT for Web 3D技术快速搭建设备面板
以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...
随机推荐
- [Xamarin] 從Xamarin中呼叫 *.jar 的 library - 呼叫篇 (转帖)
上篇文章我們建立一個很簡單的Library : com.example.blackfactory.UtilFunc 現在我們要在Xamarin 中呼叫囉! 首先我們要先成立一個橋接的專案 JARBri ...
- await之后的线程问题
之前看了园子里的一篇文章「async & await的前世今生」,收益颇多.而其中有句话被博主特意用红色标注,所以留意多看了几眼,「await 之后不会开启新的线程(await 从来不会开启新 ...
- IIS负载均衡ARR路由请求到ARR服务器和处理服务器
.net web 使用IIS ARR(Application Request Route)技术实现web的高性能.高可靠.易扩展及负载均衡.ARR的使用请参考 IIS负载均衡-Application ...
- 使用C#开发ActiveX控件（新）
前言 ActiveX控件以前也叫做OLE控件,它是微软IE支持的一种软件组件或对象,可以将其插入到Web页面中,实现在浏览器端执行动态程序功能,以增强浏览器端的动态处理能力.通常ActiveX控件都是 ...
- nginx(1、正向代理）
正向代理是指客户端通过代理服务器访问某一个服务器,最常见的例子是内网用户通过代理访问外网,以及所谓的“FQ”. 在windows下实例如下: 1.下载安装包:nginx-1.7.9.zip: 2.解压 ...
- MySQL7：视图
什么是视图 数据库中的视图是一个虚拟表.视图是从一个或者多个表中导出的表,视图的行为与表非常相似,在视图中用户可以使用SELECT语句查询数据,以及使用INSERT.UPDATE和DELETE修改记录 ...
- 免费打造自己的个人网站，免费域名、免费空间、FTP、数据库什么的，一个不能少，没钱，也可以这么任性
作为一名程序猿,拥有自己的个人网站,是一件多么有逼格的事~~至于个人网站的好处嘛?那是多的说都说不完啊~~例如我们可以放自己的作品,展示自己的风采,放自己女神的照片(女神看到后会怎么样,自己想吧,哈哈 ...
- 必须知道的SQL编写技巧，多条件查询不拼字符串的写法
在做项目中,我们经常遇到复杂的查询方法,要根据用户的输入,判断某个参数是否合法,合法的话才能当作过滤条件,我们通常的做法是把查询SQL赋值给一个字符串变量,然后根据判断条件动态的拼接where条件进行 ...
- 系统架构：Web应用架构的新趋势---前端和后端分离的一点想法
最近研究servlet,看书时候书里讲到了c/s架构到b/s架构的演变,讲servlet的书都很老了,现在的b/s架构已经不是几年前的b/s架构,其实b/s架构就是web应用开发,对于这样的架构我们现 ...
- http学习笔记（二）—— 嘿！伙计，你在哪？（URL）
我们之所以希望浏览网页,其中一个重要的原因就是庞大的web世界中有很丰富的资源,他就像哆啦a梦的口袋,随时都能拿出我们想要的宝贝.这些资源通过http被传送到我们的浏览器,并展示到我们的屏幕上.而我们 ...