1. Cordova構(gòu)建Android，IOS工程實(shí)例

cordova是用web編寫的移動(dòng)端程序，通過(guò)調(diào)用原生SDK的方式在js內(nèi)部編寫交互程序，然后加殼包裝。

重要提示

采用混合開發(fā)的方式可以有很多種，具體要根據(jù)項(xiàng)目的不同類型采用不同的方式，cordova是一款不錯(cuò)的混合框架，但是仍然無(wú)法和原生比性能，來(lái)自cordova官方的建議是如果你要做的是大型應(yīng)用或者數(shù)據(jù)量較大，cordova并不是最佳選擇。

環(huán)境配置

  • Node 6.9.2
  • Android
    • Git 2.11
    • AndroidSDK(v19及以上)
    • JDK(7及以上)
  • IOS
    • Xcode
    • 終端
  • 以下演示都用Android為例，不同的地方會(huì)標(biāo)注

安裝Cordova

這幾天一直用GitShell，直到今天突然發(fā)現(xiàn)windows居然也可以用，所以就直接演示windows下的吧

  • 打開git
  • 安裝npm install -g cordova
  • 檢查cordova -version or cordova -v

創(chuàng)建一個(gè)Cordova項(xiàng)目

  • 創(chuàng)建一個(gè)workspace
    • C:\Users\Administrator>cd E:\Cordova
    • C:\Users\Administrator>e:
  • 創(chuàng)建項(xiàng)目
    • E:\Cordova>cordova create CordovaWindows com.jty.mycordova MyCordova
    • 得到提示Creating a new cordova project.
    • down！
  • 創(chuàng)建釋義
    • CordovaWindows 項(xiàng)目名
    • com.jty.mycordova包名
    • MyCordovaAppName

添加平臺(tái)支持

  • 進(jìn)入剛創(chuàng)建的工程目錄
  • windows
    • cordova platform add android
  • Mac
    • $ cordova platform add IOS
    • $ cordova platform add android
  • 運(yùn)行結(jié)果如下 
    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.

構(gòu)建項(xiàng)目

第一次構(gòu)建可能有點(diǎn)慢，因?yàn)樾枰渲肎radle

  • 先看看項(xiàng)目結(jié)構(gòu)

    E:\Cordova\CordovaWindows>ls
config.xml  hooks  platforms  plugins  www
    • 配置文件 config.xml
    • 關(guān)聯(lián)文件 hooks
    • android項(xiàng)目 platforms
    • 插件庫(kù) plugins
    • web項(xiàng)目 www

  • 構(gòu)建項(xiàng)目

    • cordova build android

  • 構(gòu)建效果

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.).
?: ?Щ???????????????????? 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
  • 運(yùn)行項(xiàng)目
    • cordova run android
    • 運(yùn)行之后提示 No target specified, deploying to device '192.168.237.101:5555'.

    這里我開了一個(gè)Genymotion模擬器，上面是分配的設(shè)備，當(dāng)然用真機(jī)效果當(dāng)然是最好的。

這時(shí)候已經(jīng)可以將platforms下的android導(dǎo)入Android Studio運(yùn)行了，因?yàn)樗呀?jīng)是一個(gè)獨(dú)立項(xiàng)目了

配置項(xiàng)目

前面在命令行操作有諸多不便，那么接下里既然項(xiàng)目都可以運(yùn)行了，那就可以直接去項(xiàng)目配置

元素 描述
widget 這是我們?cè)趧?chuàng)建應(yīng)用程序時(shí)指定的應(yīng)用程序反向域值。
name 我們?cè)趧?chuàng)建應(yīng)用程序時(shí)指定的應(yīng)用程序名稱。
description 應(yīng)用程式說(shuō)明。
author 應(yīng)用程式的作者。
content 應(yīng)用程序的起始頁(yè)。 它位于 www 目錄內(nèi)。
plugin 當(dāng)前安裝的插件。
access 用于控制對(duì)外部域的訪問(wèn)。 默認(rèn)的 origin 值設(shè)置為 * ，這意味著允許訪問(wèn)任何域。 此值不允許打開某些特定的網(wǎng)址來(lái)保護(hù)信息。
allow-intent 用于控制對(duì)外部域的訪問(wèn)。 默認(rèn)的 origin 值設(shè)置為 * ，這意味著允許訪問(wèn)任何域。 此值不允許打開某些特定的網(wǎng)址來(lái)保護(hù)信息。...
platform 構(gòu)建應(yīng)用程序的平臺(tái)。 
<?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" >
       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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容