Cordova构建Android，IOS工程实例

cordova是用web编写的移动端程序，通过调用原生SDK的方式在js内部编写交互程序，然后加壳包装。

重要提示

采用混合开发的方式可以有很多种，具体要根据项目的不同类型采用不同的方式，cordova是一款不错的混合框架，但是仍然无法和原生比性能，来自cordova官方的建议是如果你要做的是大型应用或者数据量较大，cordova并不是最佳选择。

环境配置

• Node 6.9.2
• Android
  
  • Git 2.11
  • AndroidSDK(v19及以上)
  • JDK(7及以上)
• IOS
  
  • Xcode
  • 终端
• 以下演示都用Android为例，不同的地方会标注

安装Cordova

这几天一直用GitShell，直到今天突然发现windows居然也可以用，所以就直接演示windows下的吧

• 打开git
• 安装npm install -g cordova
• 检查cordova -version or cordova -v

创建一个Cordova项目

• 创建一个workspace
  
  • C:\Users\Administrator>cd E:\Cordova
  • C:\Users\Administrator>e:
• 创建项目
  
  • E:\Cordova>cordova create CordovaWindows com.jty.mycordova MyCordova
  • 得到提示Creating a new cordova project.
  • down！
• 创建释义
  
  • CordovaWindows 项目名
  • com.jty.mycordova包名
  • MyCordovaAppName

添加平台支持

• 进入刚创建的工程目录
• windows
  
  • cordova platform add android
• Mac
  
  • $ cordova platform add IOS
  • $ cordova platform add android

• 运行结果如下

  E:\Cordova\CordovaWindows>cordova platform add android
  Adding android project...
  Creating Cordova project for the Android platform:
      Path: platforms\android
      Package: com.jty.mycordova
      Name: MyCordova
      Activity: MainActivity
      Android target: android-25
  Subproject Path: CordovaLib
  Android project created with cordova-android@6.1.2
  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 android
  
             This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this
  plugin since the whitelist will be built in.

构建项目

第一次构建可能有点慢，因为需要配置Gradle

• 先看看项目结构

  E:\Cordova\CordovaWindows>ls
  config.xml  hooks  platforms  plugins  www

  • 配置文件 config.xml
  • 关联文件 hooks
  • android项目 platforms
  • 插件库 plugins
  • web项目 www

• 构建项目

  • cordova build android

• 构建效果

E:\Cordova\CordovaWindows>cordova build android
ANDROID_HOME=E:\64androidstudio\Android\Sdk
JAVA_HOME=E:\JDK
Subproject Path: CordovaLib
Starting a new Gradle Daemon for this build (subsequent builds will be faster).
Incremental java compilation is an incubating feature.
:preBuild UP-TO-DATE
:preDebugBuild UP-TO-DATE
:checkDebugManifest
:CordovaLib:preBuild UP-TO-DATE
:CordovaLib:preDebugBuild UP-TO-DATE
:CordovaLib:checkDebugManifest
:CordovaLib:prepareDebugDependencies
:CordovaLib:compileDebugAidl
:CordovaLib:compileDebugNdk UP-TO-DATE
:CordovaLib:compileLint
:CordovaLib:copyDebugLint UP-TO-DATE
:CordovaLib:mergeDebugShaders
:CordovaLib:compileDebugShaders
:CordovaLib:generateDebugAssets
:CordovaLib:mergeDebugAssets
:CordovaLib:mergeDebugProguardFiles
:CordovaLib:packageDebugRenderscript UP-TO-DATE
:CordovaLib:compileDebugRenderscript
:CordovaLib:generateDebugResValues
:CordovaLib:generateDebugResources
:CordovaLib:packageDebugResources
:CordovaLib:processDebugManifest
:CordovaLib:generateDebugBuildConfig
:CordovaLib:processDebugResources
:CordovaLib:generateDebugSources
:CordovaLib:incrementalDebugJavaCompilationSafeguard
:CordovaLib:compileDebugJavaWithJavac
:CordovaLib:compileDebugJavaWithJavac - is not incremental (e.g. outputs have ch
anged, no previous execution, etc.).
ע: ijЩ�����ļ�ʹ�û�����ѹ�ʱ�� API��
ע: �й���ϸ��Ϣ, ��ʹ�� -Xlint:deprecation ���±��롣
:CordovaLib:processDebugJavaRes UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForDebug
:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForDebug
:CordovaLib:mergeDebugJniLibFolders
:CordovaLib:transformNative_libsWithMergeJniLibsForDebug
:CordovaLib:transformNative_libsWithSyncJniLibsForDebug
:CordovaLib:bundleDebug
:prepareAndroidCordovaLibUnspecifiedDebugLibrary
:prepareDebugDependencies
:compileDebugAidl
:compileDebugRenderscript
:generateDebugBuildConfig
:generateDebugResValues
:generateDebugResources
:mergeDebugResources
:processDebugManifest
:processDebugResources
:generateDebugSources
:incrementalDebugJavaCompilationSafeguard
:compileDebugJavaWithJavac
:compileDebugJavaWithJavac - is not incremental (e.g. outputs have changed, no p
revious execution, etc.).
:compileDebugNdk UP-TO-DATE
:compileDebugSources
:mergeDebugShaders
:compileDebugShaders
:generateDebugAssets
:mergeDebugAssets
:transformClassesWithDexForDebug
:mergeDebugJniLibFolders
:transformNative_libsWithMergeJniLibsForDebug
:processDebugJavaRes UP-TO-DATE
:transformResourcesWithMergeJavaResForDebug
:validateSigningDebug
:packageDebug
:assembleDebug
:cdvBuildDebug

BUILD SUCCESSFUL

Total time: 45.301 secs
Built the following apk(s):
        E:/Cordova/CordovaWindows/platforms/android/build/outputs/apk/android-de
bug.apk

• 运行项目
  
  • cordova run android
  • 运行之后提示 No target specified, deploying to device '192.168.237.101:5555'.
    

这里我开了一个Genymotion模拟器，上面是分配的设备，当然用真机效果当然是最好的。
这时候已经可以将platforms下的android导入Android Studio运行了，因为它已经是一个独立项目了

配置项目

前面在命令行操作有诸多不便，那么接下里既然项目都可以运行了，那就可以直接去项目配置

元素	描述
widget	这是我们在创建应用程序时指定的应用程序反向域值。
name	我们在创建应用程序时指定的应用程序名称。
description	应用程式说明。
author	应用程式的作者。
content	应用程序的起始页。 它位于 www 目录内。
plugin	当前安装的插件。
access	用于控制对外部域的访问。 默认的 origin 值设置为 * ，这意味着允许访问任何域。 此值不允许打开某些特定的网址来保护信息。
allow-intent	用于控制对外部域的访问。 默认的 origin 值设置为 * ，这意味着允许访问任何域。 此值不允许打开某些特定的网址来保护信息。…
platform	构建应用程序的平台。

<widget id="com.jty.mycordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>MyCordovaname>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    description>
    <author email="[email protected]" href="http://cordova.io">
       TaoYuan
    author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    platform>
widget>