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
orcordova -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
包名 -
MyCordova
AppName
-
添加平台支持
- 进入刚创建的工程目录
- 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 | 构建应用程序的平台。 |
<?xml version='1.0' encoding='utf-8'?>
<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>MyCordova</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="521taoyuan@gmail.com" 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>