1. 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 构建应用程序的平台。
<?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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,670评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,928评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,926评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,238评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,112评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,138评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,545评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,232评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,496评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,226评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,600评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2 335

推荐阅读更多精彩内容