手把手教你在ios上开发web应用

原创 2015年11月20日 11:22:48

长久以来web前端开发都是互联网世界的主流,但是在移动互联网浪潮里它们的用武之地似乎不多,是真的web技术不适合移动互联网吗?其实看看那些巨无霸应用,里面都用到了web技术,微信公众账号,手机QQ的游戏中心,网易新闻详情页,等等。。。。可以从这些应用中可以看的出来,在轻交互重内容的一些业务场景,web的先天优势还是很突出的,那么问题来了,如此多前端开发人员如何快速介入到移动端的开发中来呢?这里给大家介绍一个apache 官方提供的跨平台解决方案 apache cordova 官方地址:http://cordova.apache.org/


以ios平台的工程为例

首先你当然想要安装cordova 在命令行下执行: npm install -g cordova

我的mac在安装过程中提示没有npm 命令,所以就要先搞定npm的安装

 执行这个 brew install node,很意外,我的brew也没有,那么接下来就要搞定brew

还好这个也不难,执行这个:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

然后再把前面的命令执行一下:

brew install node

npm install -g cordova

这样你就能开发cordova框架的应用了


ok 先创建一个应用,执行:cordova create MyApp

进入应用目录进入应用目录:cd MyApp

先试试web功能是否可以跑,执行一下:cordova platform add browser

然后 cordova run browser,这样就通过浏览器打开了这样一个页面



然后如果想要创建一个ios平台的工程,那么就执行一下:cordova platform add ios

这样就生成了一个ios工程,看看

MyApp/platforms这个目录下的文件夹有这么几项


ios目录下就是这个工程目录了(前提是我提前安装了xcode)

打开xcode导入这个ios工程,申请一个开发者账号就可以将这个程序跑起来了,这个请查看苹果官方文档吧https://developer.apple.com/

在ios上跑起来的效果是这样的:



这里的首页就是一个html,通过修改配置就可以载入自己的页面了,详情请看这里http://cordova.apache.org/docs/en/latest/config_ref/index.html


其实cordova不止支持ios一个移动平台,android,blackberry也都支持。

而这种跨平台的开发框架也不光cordova一种,最近比较火的Facebook的开源web框架React及对应的移动平台开发框架ReactNative也是一种发展趋势,看样子js的未来还是一片光明的


Web应用程序开发原理

一、主机/终端模式(Mainframe/Terminal) 企业应用程序是围绕一个中心大型主机建立的,使用者一般通过只有一个屏幕、一个键盘和一根主机连接线的“哑终端”与主机的应用程序进行交互。例如:超...
  • yangtjh
  • yangtjh
  • 2015年07月27日 20:05
  • 1345

WEBAPP介绍及其iOS Web开发技巧总结

结合网上相关资料,以及自己项目中的经验,收集汇总了iOS Webapp相关的开发知识,如下。 WebApp是一种新出现的基于WEB形式的类应用程序,运行在高端的移动终端设备上,其应用范围会越来越广。...
  • freshlover
  • freshlover
  • 2013年08月26日 19:17
  • 49162

11款常见的Web应用程序框架

11款常见的Web应用程序框架
  • YaoXTao
  • YaoXTao
  • 2014年09月13日 19:01
  • 1783

五个步骤告诉你如何开发Web应用程序

五个步骤告诉你如何开发Web应用程序 这是一个经常被问到的问题,问的理所当然。作为一个程序员,为什么我就非要被认为知道如何开发Web应用程序呢?这个问题没有一个简单的答案,甚至那些教育机构都未必能清...
  • u019524703
  • u019524703
  • 2015年01月09日 10:18
  • 1071

Java Web学习(4):徒手开发Web应用程序

一Tomcat服务器的目录结构        在开发Web应用程序之前有必要先来介绍一下Tomcat服务器的目录结构。        1)我们打开安装好的Tomcat服务器的安装目录,我的是:E:...
  • erlian1992
  • erlian1992
  • 2016年07月10日 18:03
  • 2381

iOS开发 - 应用内打开第三方应用并传值

首先说下这个功能, 应该都有接触过。 比如,你下载了一个电子书,然后选择打开方式的时候,可能会看到你手机中已经安装的阅读类App。 或者,你的QQ收到了某个文件,你也可以选择本地的应用来打...
  • u012237115
  • u012237115
  • 2014年10月28日 15:15
  • 407

Java Web学习(5):使用IDE(EClipse)开发Web应用程序

一Eclipse的配置         (1)Eclipse配置JRE         在打开的页面中找到Window->Prefereneces->Java->Installed JREs ...
  • erlian1992
  • erlian1992
  • 2016年07月10日 19:31
  • 2394

ios与javascript的交互,适合刚接触电商ios与html5混编的朋友,(ios自学笔记)

在写 JavaScript 的时候,可以使用一个叫做 window 的对象,像是我们想要从现在的网页跳到另外一个网页的时候,就会去修改 window.location.href 的位置;在我们的 Ob...
  • wangyang6275
  • wangyang6275
  • 2015年07月15日 09:10
  • 1957

大师之路解惑基础概念篇:Java Web应用开发中的一些概念

原文:http://developer.51cto.com/art/201005/201999.htm Java Web应用开发中的一些概念 学习Java Web开发。很多人喜欢直接上手去写...
  • wabiaozia
  • wabiaozia
  • 2015年12月15日 10:51
  • 1890

大型Web应用开发总结

大型Web应用,相对于传统网站。用户逻辑需要更多的在客户端(Browser)处理,同时用户对交互性能更加注重。(这里也讨论WebAPP)1、首先是架构问题架构上可以根据需要选择后端和数据库,java,...
  • u010958922
  • u010958922
  • 2015年08月24日 23:30
  • 826
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:手把手教你在ios上开发web应用
举报原因:
原因补充:

(最多只允许输入30个字)