资讯专栏INFORMATION COLUMN

iOS平台快速发布HT for Web拓扑图APP应用

hersion / 3110人阅读

摘要:平台一直是封闭的生态圈,开发者要缴纳年费加入开发者计划才可进行平台的开发测试,所开发的需要上传到经过苹果审核以后才可对外发布。前一种方式的优点是用户体验好,用户可以像使用原生那样使用它们,缺点是发布很繁琐,而且要等待苹果审核。

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页面中加入一些特殊标记:





viewport的设置可以参考苹果的官方文档,写的非常棒。

其它meta标签的用法也有很好的参考文档,推荐大家仔细阅读:
1、配置Web应用程序
2、支持的Meta标签

还有一个细节需要注意,如果页面中的资源(JS脚本,图片等)非常多,每次打开重新加载也会影响到用户体验,这时我们可以将一些资源缓存起来:



这个文件的内容如下:

CACHE MANIFEST

CACHE:
ht.js
res/girl_iphone5.png
res/girl_iphone6.png
res/1.png
res/2.png
res/icon.png

在这个文件中,我们缓存ht.js和一堆图片文件,这些资源只会加载一次,第二次打开页面时不会重复从网络加载,所以显示非常快,这样我们的页面看起来就非常像一个原生应用了!
缓存的用法也有两篇很好的文档:
1、HTML5离线缓存
2、在客户端存储数据

最后上一段操作视频,看一下最终效果,优酷链接:http://v.youku.com/v_show/id_XOTUyODA1NjQ0.html?firsttime=0&from=y...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/15715.html

相关文章

  • 基于HTML5的Web SCADA工控移动应用

    摘要:在电力油田燃气供水管网等工业自动化领域的概念已经提出了多年,早先年的前端技术大部分还是基于甚至这样的重客户端方案,在流行前和算是真正纯种方案也是有不少应用,近些年随着的流行,加上移动终端对支持的普及,越来越多新项目开始采用真正纯的方案,更具 在电力、油田燃气、供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex、Sil...

    kk_miles 评论0 收藏0
  • 快速开发基于 HTML5 网络扑图应用

    摘要:采用开发网络拓扑图非常容易,例如入门手册的第一个小例子麻雀虽小五脏俱全该例子展示了如何构建两个节点一条连线以及一个的组合效果。更多拓扑图例子可参考 采用 HT 开发网络拓扑图非常容易,例如《入门手册》的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide... showImg(https://segmentfault.com/img/bVDCcV?w...

    Nino 评论0 收藏0
  • 分享数百个 HT 工业互联网 2D 3D 可视化应用案例

    摘要:研华科技工业物联网云平台,基于图形组件技术,集成边缘计算和云平台,提供从边缘感知及设备到云的数据采集分析可视化软件服务,协助系统集成商和制造商快速开发各垂直产业的应用,形成新形态的云端商务模式。这也是峰会结束后,该系统首次对外展出。 过去的 2018 年,我们认为是国内工业互联网可视化的元年,图扑软件作为在工业可视化领域的重度参与者,一线见证了众多 HTML5/Web 化、2D/3D ...

    anyway 评论0 收藏0
  • HTML5 技术在风电、光伏等新能源领域的应用

    摘要:随着新一轮工业革命兴起,应对气候变化日益成为全球共识,能源技术正在成为引领能源产业变革实现创新驱动发展的源动力。 随着新一轮工业革命兴起,应对气候变化日益成为全球共识,能源技术正在成为引领能源产业变革、实现创新驱动发展的源动力。从全球到中国,以风能、光伏发电为代表的新能源产业发展迅速,可再生能源发电与现代电网的融合成为了世界能源可持续转型的核心,发电技术继续沿着大规模、高效率和低成本方...

    mudiyouyou 评论0 收藏0
  • 数百个 HTML5 例子学习 HT 图形组件 – 扑图

    摘要:拓扑图组件作为最典型的客户需求应用,自然是首篇登场。入门手册中也有个简单的编辑器例子,教用户如何自定义创建节点连线和多边形的示例教材,学习自定义拓扑图交互可从此例子入手。 HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打磨,如今 HT ...

    Shonim 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<