ios制作h5的桌面webapp的详解

时下app的解决方案大概分以下几种

1.原生ios以及android app（需要两端程序员复杂度高学习成本高可扩展性无）

2.通过native系列衍生物产生的各种js混合app，如react native，phone gap ，cordova等（需要混合开发经验的程序员复杂度较高学习成本较高可扩展性较高）

3.通过ios以及android原生webview原理制作壳内嵌普通h5网页来实现的app（需要web前端网页开发人员即可复杂度低学习成本低需要两端程序员做壳或第三方平台扩展性高）

4.轻量级webapp（不需要写壳需要前端网页开发程序员兼容性目前很低）

这几种app针对的领域以及用途已经可以通过如今的项目结构和方向来进行选择和区分了

比如按照app执行效率 1-4是从高到低的

但是如今的硬件水平对于这四种app在使用阶段已经看不出太多的差异，比如一个内容比较轻量的前端功能不是很重度的app对于这四种方式都可以实现

所以针对项目公司们往往会选择一个性价比最高的方式进行开发，

目前选择2，3的公司为主

今天我们着重说一下4，因为这个相对来说是一个未来的趋势，

由于h5的功能以及灵活性越来越高，可实现功能越来越趋近于本地app

那么在未来的发展中如果webapp套壳的步骤省略的话对于移动开发是一个飞跃性的助力

目前ios系统的safari浏览器中有这样一个功能可以将网页保存到桌面，看似收藏夹的效果，但是它实际是一个生成webapp微端的功能

这就是保存到桌面之后的效果，

但是这种webapp保存之后经过开发打开以后是这样的

经过简单的加工之后，点击图标他不会再打开safari浏览器并且不会自带地址栏以及工具栏，

是以一个单独app形式存在并且运行的

也就是说他的使用与安装式的app无异

那么我们来简单的说一下如何进行ios桌面webapp的开发

首先我们看一下常用的标签

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Monaco; color: #4f76cb}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Monaco; color: #3933ff}
span.s1 {text-decoration: underline}
span.s2 {color: #009193}
span.s3 {color: #4e9192}
span.s4 {color: #000000}
span.s5 {color: #932192}
span.s6 {color: #4f76cb}<!-- 隐藏浏览器的工具栏以及地址栏 -->

<meta name="apple-mobile-web-app-capable" content="yes">  

<!-- 设置顶端手机状态栏的背景颜色 --><meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- 设置主屏幕应用图标 --> 

<link rel="apple-touch-icon-precomposed" href="img/icon.png" />

<!-- 设置启动画面 -->

<link rel="apple-touch-startup-image"  href="img/bg1.png" />

<!-- 设置竖屏启动画面 -->

<link rel="apple-touch-startup-image" media="screen and (orientation: portrait)" href="img/bg1.png" /> <!--竖-->

<!-- 设置横屏启动画面 -->

<link rel="apple-touch-startup-image" media="screen and (orientation: landscape)" href="img/bg1.png" /> <!--横-->

有了这几个标签就可以让生成的webapp打开之后呈现一个app的效果并且附带开场画面

但是单单使用这几个元素是不够的

因为我们的网页中如果使用了超链接

那么打开的新页面会自动调用浏览器打开

为了防止弹出浏览器我们还需要使用js来强制页面在webapp中跳转

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Monaco; color: #4e9072}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Monaco}
span.s1 {color: #931a68}
span.s2 {color: #3933ff}
span.s3 {text-decoration: underline}//解决ios webapp子链接跳页弹回浏览器的问题if(('standalone' in window.navigator)&&window.navigator.standalone){      var noddy,remotes=false;      document.addEventListener('click',function(event){              noddy=event.target;              while(noddy.nodeName!=='A'&&noddy.nodeName!=='HTML') noddy=noddy.parentNode;              if('href' in noddy&&noddy.href.indexOf('http')!==-1&&(noddy.href.indexOf(document.location.host)!==-1||remotes)){                      event.preventDefault();                      document.location.href=noddy.href;              }      },false);  }

加入后我们可以测试一下效果

效果如此

尾声：

也就是说，如今的移动端开发已经不是过去我们耳熟的几种技术来实现的，

你在使用一款app的时候是感觉不出来他到底是用什么技术来实现的，

新技术层出不穷，旧技术面临淘汰或改变

这种webapp虽然没什么人使用兼容性也不好，这次提起他只是个人觉得

桌面webapp未来可能也会成为一种趋势

就像pc端端游进化到页游页游生成微端一样

就像微信支付宝相继推出小程序一样

移动app也在悄悄的产生一种过度，未来应该会发展到免安装app的时代

所以介绍一下免安装app的概念

ios制作h5的桌面webapp的详解相关推荐

wpf 客户端【JDAgent桌面助手】详解（二）桌面宠物制作详解
目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图(此文由于当时没有开通csdn博客所以在博客园发了,后续文章都是csdn 首发奥) [晒视频了]业余开发wpf 客户端[JDAgent桌面助 ...
Pinterest 3.0 for iOS设计过程——升级iOS7设计思路详解
Pinterest 3.0 for iOS设计过程--升级iOS7设计思路详解时间2013-12-11 11:39:31 苹果开发中文站原文 http://www.cocoachina.com ...
iOS 7: iPhone/iPad应用开发技术详解
iOS 7: iPhone/iPad应用开发技术详解作者:刘一道出版社:机械工业出版社出版年:2013-11 页数:507 定价:79.00元 ISBN:9787111440512 样章下载:h ...
python 制作gif-利用Python如何制作好玩的GIF动图详解
前言之前我们分享过用Python进行可视化的9种常见方式.其实我们还能让可视化图形逼格更高一些,今天就分享一下如何让可视化秀起来:用Python和matplotlib制作GIF图表. 假如电脑上没有 ...
iOS 7 iPhone iPad应用开发技术详解
2019独角兽企业重金招聘Python工程师标准>>> iOS 7 iPhone iPad应用开发技术详解本书内容全面,从 Objective-C语法知识.iOS功能特性,到高级 ...
iOS 内购（In-App Purchase）详解
iOS 内购(In-App Purchase)详解概述 IAP 全称:In-App Purchase,是指苹果 App Store 的应用内购买,是苹果为 App 内购买虚拟商品或服务提供的一套交易 ...
专题地图制作（设计、规划、测绘制作图斑）标绘使用详解
专题地图制作(设计.规划.测绘制作图斑)标绘使用详解同步视频教程:http://www.iqiyi.com/w_19rvgy9jux.html 1.导入/导出AutoCAD文件DXF格式 2.在线标 ...
制作gif动图python_利用Python如何制作好玩的GIF动图详解
前言之前我们分享过用Python进行可视化的9种常见方式.其实我们还能让可视化图形逼格更高一些,今天就分享一下如何让可视化秀起来:用Python和matplotlib制作GIF图表. 假如电脑上没有 ...
如何制作专题地图（设计、规划、测绘制作图斑）标绘使用详解
量数据下载矢量标注标绘标注管理功能离线地图手机APP 其他功能下载帮助文档快速入门视频教程 BIGEMAP快速入门下载卫星影像下载高程等高线数据下载路网水系等矢量图应用地图到工作中 ...

ios制作h5的桌面webapp的详解

ios制作h5的桌面webapp的详解相关推荐

最新文章

热门文章