Hybrid App(一):Cordova集成

前言

项目技术预研Hybrid相关技术,查阅资料实践后记录下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.
Use Apache Cordova if you are: a mobile developer interested in mixing native application components with aWebView(special browser window) that can access device-level APIs, or if you want to develop a plugin interface between native and WebView components.

大意:Cordova 是开源的移动开发框架。可以使用标准的WEB技术进行跨平台的开发,避免了不同移动平台不同的开发语言重复边写。把能访问设备级 API 的 WebView 集成到 Native 应用中,或通过开发接口插件实现 navtive 和 WebView 组件之间的交互。在启用Cordova的WebView中,为应用提供了完整的用户接口。在某些平台中也可以作为一个嵌入在本地native应用的组件。

环境&创建

  • 安装Node.js

https://nodejs.org/en/download/

  • 终端输入如下命令

    1
    $  sudo npm install –g cordova
  • 建立cordova项目

    1
    2
    $  cd Desktop/
    $ cordova create CordovaDemo
  • 加入iOS项目

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $  cd CordovaDemo/
    $ cordova platform add ios

    Adding ios project...
    Creating Cordova project for the iOS platform:
    Path: platforms/ios
    Package: io.cordova.hellocordova
    Name: HelloCordova
    iOS project created with cordova-ios@4.2.1
    Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
    Fetching plugin "cordova-plugin-whitelist@1" via npm
    Installing "cordova-plugin-whitelist" for ios
  • 显示已经安装的平台项目以及可安装的平台

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $  cordova  platform ls   
    Installed platforms:
    ios 4.2.1
    Available platforms:
    amazon-fireos ~3.6.3 (deprecated)
    android ~5.2.0
    blackberry10 ~3.8.0
    browser ~4.1.0
    firefoxos ~3.6.3
    osx ~4.0.1
    webos ~3.7.0
  • build iOS项目

    1
    2
    3
    4
    5
    6
    7
    $ cordova build ios

    Building project: /Users/xjy/Desktop/test/Demo/platforms/ios/HelloCordova.xcodeproj
    Configuration: Debug
    Platform: emulator
    Build settings from command line:
    ......
  • Xcode 打开项目运行
    此处输入图片的描述

已有的Native项目中加入Cordova

  • 拷贝Cordova相关文件(路径:cordovaDemo/platforms/ios)到House目录下,拷贝后目录结构如下
    -此处输入图片的描述

  • CordovaLib.xcodeproj添加到House工程中,右键选择Add Files To House

  • 添加www目录到工程中,记得是勾选Create folder references

  • config.xml添加到Demo工程中,右键选择Add Files To Demo(路径:cordovaDemo/platforms/ios/CordovaDemo/config.xml )

  • Build Settings->Other Links, 设置-Objc -all_load

  • Build Phases->Target Dependencies添加CordovaLib

  • Link Binary With Librarys添加libCordova.a, MobileCoreServices,AssetsLibrary

  • command + B编译通过

  • www文件夹放入对应的文件

  • 调用CDVViewController

1
2
3
4
5
6
#import <Cordova/CDVViewController.h>

//action
CDVViewController* vc = [CDVViewController new];
vc.hidesBottomBarWhenPushed = YES;
[self.navigationController pushViewController:vc animated:YES];

下一章记录一下插件开发的相关流程