Hybrid App Development: 二、关于造轮子以及在Xcode iOS应用开发中加入Cordova

转载请注明出处:http://www.cnblogs.com/xdxer/p/4111552.html

【ctrl+左键点击图片可以查看原图】

在上一篇关于Hybrid App Development的文章中,我讨论了一下在iOS下UIWebView的使用方法。但是光使用一个UIWebView所提供的功能还是完全不能满足我们的需求。

 

关于造轮子的思考:

在UIKit中的UIWebView虽然已经提供了很多功能了,比如JavaScript和Objc之间的通信。但是考虑到一个问题,如果在Hybrid App 中,如何才能实现JavaScript调用本地的一些硬件设备,如摄像头、音频、还有本地存储呢? 首先想到的就是规定一些协议,在UIWebViewDelegate 中去接收JavaScript 发来的消息并且由Objc代码去控制本地的数据库访问,控制摄像头和音频等等。但是诸如如何在WebView上显示本地摄像头视频,实现起来还是比较困难的。那么问题来了,如何实现这些协议,并且有广泛的适用性,让广大的开发者去使用这一套框架? 这就是属于是否要造轮子的问题了。当然自己要造起轮子来是十分的费劲的,而且可能会隐藏有很多的BUG,如果使用现有的一些非开源框架的话同样会存在很多的不安全性的问题,和一些框架遗留的bug~下面要介绍的一个开源的框架,Cordova ,它的前身是PhoneGap,被Apache收购之后就改成了Cordova了~

 

关于Cordova:

http://cordova.apache.org/

Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms‘ native development language. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device‘s sensors, data, and network status.

Cordova 是一个开源的移动开发框架。它可以让你使用标准的WEB技术比如HTML5,CSS3还有JavaScript来进行跨平台的开发,避开了每个移动平台的不同的开发语言。

Use Apache Cordova if you are:

  • a mobile developer interested in mixing native application components with a WebView (special browser window) that can access device-level APIs, or if you want to develop a plugin interface between native and WebView components.

如果你对把一个能访问硬件级别API的WebView集成到Native应用中,或者你想要开发一个接口插件实现navtive和WebView组件之间的交互,都可以使用Apache Cordova。

在启用Cordova的WebView中,可以为应用提供了完整的用户接口。在某些平台中也可以作为一个嵌入在本地native应用的组件。

同时,我们可以自行开发插件~!

 

使用Cordova的方式分2种:

1.Cross-platform(CLI) workflow : CLI是一个High-Level的工具,可以允许你在多个平台上只建立一次工程。

2.Platform-centered workflow : 以Native为中心,使用WebView的形式嵌入。

 

在Mac OS 下使用 Cordova:

1. 首先安装一个Node.js http://nodejs.org/download/

2.  打开终端输入如下命令 $  sudo npm install –g cordova

 

 

3. 然后就可以开始建立cordova项目了,如下:

$ cd Desktop/

$ cordova create XiaDongxiang xdx XiaDongxiang

上面第一个参数是project名,第二个是id,第三个是文件夹名

建立完成之后我们可以加入iOS项目

$cd XiaDongxiang/

$cordova platform add ios

这个命令当然也可以是andriod之类的,不过本文只讨论iOS

 

4. 使用 $ cordova  platform ls 可以显示已经安装的平台项目以及可安装的平台

 

5. $ cordova build ios        build iOS项目

 

6 . 使用Xcode 打开项目,并且运行:

 

 

以上的步骤描述了如何使用Cordova建立一个简单的项目,接下来我们来看看如何在已有的Native项目中加入Cordova。

 

如何集成Cordova组件以WebView形式集成到Native应用中去:

可以参考这个网址给的步骤,但是有些地方是不对的。

http://cordova.apache.org/docs/en/4.0.0/guide_platforms_ios_webview.md.html

我所描述的是我加入工程的顺序~

1. 首先使用终端,在桌面上建立一个工程,并且加入ios平台的项目。

$cordova create xdx xdx xdx

$cd xdx/

$cordova platform add ios

 

2. 在以上工程中的platform/ios 目录下找到 config.xml 拖到Native工程中去。

3. 在以上工程中找到 CordovaLib文件夹,将整个文件夹拷贝到Native工程目录下,并且把 CordovaLib.xcodeproj 文件拖动到导航视图中 。

4. 设置其Identity中的Location 为Relative to Group:

 

5.在Native 工程中的target 中的 Build Phases 中加入如下4个库~

AssetsLibrary.frameworkCoreLocation.frameworkCoreGraphics.frameworkMobileCoreServices.framework

6.在Native 的Target中Build Phases 中的Target Dependencies 中加入cordovaLib:

 

7. 在Native 的Target中Build Phases 中的Link Binary With Libraries 加入libCordova.a :

8. 在Target中的Building Settings 中:

Other Link Flags: 加入   –ObjC 和 –all_load (此处官方文档中有误,亲测)

Header Search Paths:

"$(TARGET_BUILD_DIR)/usr/local/lib/include"        
"$(OBJROOT)/UninstalledProducts/include"

"$(BUILT_PRODUCTS_DIR)"

 

9.在stroryboard中加入一个新的视图,建立一个新的ViewController 继承自 CDVViewController ,然后把之前创建的项目中的ios目录下的www文件夹拖到工程中去,记得要在加入的选项中选择create folder ,以建立文件夹,而不是group。

10. 然后什么都不用动,command + r 就可以看到效果了,如图:

 

事实上CDVViewController 中的HTML文件配置地址都是可以自己定义的,只是默认的就是www文件夹,所以我们什么都不用改就可以运行了。

我们可以在载入之前插入如下代码,指定文件夹和开始页HTML文件:

self.wwwFolderName = @"myfolder";self.startPage = @"mypage.html"
接下来研究的方向就是如何使用 & 自己开发并且添加Cordova插件 –> 访问数据库、文件操作、音频、视频操作等,以及其实现的原理。
时间: 2024-05-31 02:17:41

Hybrid App Development: 二、关于造轮子以及在Xcode iOS应用开发中加入Cordova的相关文章

Hybrid App(二)Cordova+android入门

上一篇介绍了app开发如何选型,由于公司人员组织结构的原因(app native较少,每个月一次迭代),因此选型hybrid app. 接下来说一下环境搭建: 一.Java环境 (1)安装jdk (2)配置环境变量 (3)java -version 命令查看是否安装成功 二.Android环境   (1)下载sdk (2)配置ANDROID_HOME和Path 新建系统变量ANDROID_HOME,变量名:ANDROID_HOME,变量值:E:\xxx\sdk  选择"系统变量"中变量

【JavaScript】Hybrid App开发 四大主流移平台分析

转自http://dev.yesky.com/238/34657738.shtml Hybrid App在过去的两年中已经成为移动界的核心话题,但是作为一名Web开发者来说要如何站在移动互联网的浪潮之巅呢?是选择学习原生开发,研究Java.Object-C.C#等语言,还是选择继续使用网页开发,容忍HTML5功能的局限性?就在开发者左右为难的情况下Hybrid App作为一个折中的解决方案诞生了.那么究竟什么才是Hybrid App呢? Hybrid App概念 Hybrid App:Hybri

[转]iOS hybrid App 的实现原理及性能监测

转自:http://www.cocoachina.com/ios/20151118/14270.html iOS hybrid App 的实现原理及性能监测 2015-11-18 11:39 编辑: lansekuangtu 分类:iOS开发 来源:CocoaChina 1 2571 iOS原理hybrid app性能监测 作者董一凡自述:作为一名写了十年代码的程序员,目前我最擅长的领域是移动平台的客户端开发,在移动领域的开发时间超过七年,前前后后涉猎过很多个平台.随着大部分移动平台自己走向死亡

Hybrid App开发 四大主流移平台分析

Hybrid App在过去的两年中已经成为移动界的核心话题,但是作为一名Web开发者来说要如何站在移动互联网的浪潮之巅呢?是选择学习原生开发,研究Java.Object-C.C#等语言,还是选择继续使用网页开发,容忍HTML5功能的局限性?就在开发者左右为难的情况下Hybrid App作为一个折中的解决方案诞生了.那么究竟什么才是Hybrid App呢? Hybrid App概念 Hybrid App:Hybrid App is a mobile application that is code

跨平台 webapp 开发技术之 Hybrid App

前所知的 APP 开发模式有三种: 基于操作系统运行的 APP -> Native App,侧重于原生开发,用户体验好,需要安装才会升级 基于浏览器运行的 APP -> Web App,侧重于网页技术实现,跨平台兼容性好,只要开发人员更新代码,无需通过安装升级 基于移动应用引擎 -> Hybrid App,使用H5和JS开发.如果不追求用户体检时,这种方式最快也最省钱 下面的图摘自简书,是对三种不同形态的 APP 的对比: Hybrid APP是目前广泛流行的一种APP开发模式,Andr

Hybrid APP混合开发的一些经验和总结

Hybrid APP混合开发的一些经验和总结 写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目.当时是第一次接触混合开发,有一些经验和总结,欢迎各位一起交流学习~ 1.混合开发概述 Hybrid App主要以JS+Native两者相互调用为主,从开发层面实现“一次开发,多处运行”的机制,成为真正适合跨平台的开发.Hybrid App兼具了Native App良好用户体验的优势,也兼具了Web App使用HTML5跨平台开发低成本的优势. 目前已经有众多Hybrid App开

【造轮子系列】转轮选择工具——WheelView的改进

在[造轮子系列]转轮选择工具--WheelView中,我详细记录了这个自定义控件的设计思路和相关数据的计算.由于本人能力有限,当时还留下了一些不足的地方,主要包括: 滑动的性能和流畅性有待提高,特别是快速滑动时的效果 没有实现循环滚动的效果 经过这一段时间的不断改进,现在基本上已经比较完美了,接近ios闹钟的滚轮时间选择器的效果了.下面结合代码,对比之前的版本,记录一下我做的这些改进. 效果图 源码 WheelView 核心计算思想的转变 性能优化说白了就是在得到相同结果的前提下进行最少的计算.

移动端混合型App(hybrid app)自动化测试选型与实践

背景 公司产品的业务已经发展到了移动端,开发选型已经结束,决定使用phonegap做移动端的web应用开发平台.考虑到业务的复杂与多样,移动端的测试同样需要自动化.在网上看了很多,最终锁定了3个移动端测试工具:Selendroid,Appium,Robotium.之所以选择他们3个,是因为团队已经有了以Selenium为基础的测试框架,而这三个工具与Selenium可以说一脉相承. 目标 基于phonegap的混合型app(hybrid app)web应用移动端自动化测试 选型过程 Selend

Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较

说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid App React Native App 分析 各大开发模式直观对比 如何选择开发模式 另类的app方案 微网页 微信小程序 其它 前言 参考来源 前人栽树,后台乘凉,本文参考了以下来源 对当前主流hybrid app.web app与native app工具的初步比较与分析 H5.React Nati