使用Cordova建立第一個App和Cordova構建環境的配置

標籤：shell   使用者目錄   default   add   客戶   har   跳過   用戶端   目錄名   

引言

通過上一篇文章我們已經對 Hybrid App 有了一定的瞭解，並且根據實際業務情況選擇了 Cordova 來開發我們的APP， 如果對這些還不瞭解的話請查看上一篇文章，那麼接下來我們就開始Cordova 之旅把！

安裝Cordova CLI

由於Cordova命令列工具作為npm包發布，這對於我們前端開發的同學來說實在是太方便了！

#全域安裝Cordova$ npm install -g cordova

注 ：對於在OS X和Linux上, npm命令前加sudo 是因為 cordova 需要安裝在您的目前使用者沒有寫入許可權的目錄或其他受限制目錄比如 /usr/local/share。如果你使用像nvm/nave或者具有安裝目錄的寫入許可權，那麼你可以省略sudo首碼。

建立App

建立一個APP只需要執行：

$ cordova create hello com.example.hello HelloWorld

讓我們來一起剖析下 cordova create 到底做了些什嗎？根據官方描述該命令支援四個參數：

1. path：也就是項目的目錄名稱
2. ID：項目的ID，用於寫入config.xml的widget中，通常格式為 com.example.hello
3. name：應用程式的顯示名稱
4. options：項目的可選配置項
   • --template：可執行項目的模版檔案
   • --copy-from 指定src
   • --link-to 可將一個前端資來源目錄連結到項目的www目錄下而不是一個副本

通過部分 Cordova cli 源碼我們可以大致知道Cordova是如何幫我們建立一個初始化工程的

var paths = {};//從 cordova-app-hello-world npm包中擷取config.xml檔案paths.configXml = path.join(require(‘cordova-app-hello-world‘).dirname, ‘config.xml‘);//從 cordova-app-hello-world npm包中擷取 www 目錄paths.www = path.join(require(‘cordova-app-hello-world‘).dirname, ‘www‘);//從 cordova-app-hello-world npm包中擷取 hooks 目錄paths.hooks = path.join(require(‘cordova-app-hello-world‘).dirname, ‘hooks‘);// 從 cordova-app-hello-world npm包中擷取 package.json 檔案var dirAlreadyExisted = fs.existsSync(dir);//dir為 cordova create 的第一個參數 ptah//判斷當前path是否存在不存在直接建立if (!dirAlreadyExisted) {    fs.mkdirSync(dir);}try {    //如果指定了 --template 則從模版複製項目到新項目下     if (cfg.lib.www.template) { copyTemplateFiles(import_from_path, dir, isSubDir); }    //如果指定了 --link 則建立連結到項目    if (cfg.lib.www.link) { linkFromTemplate(import_from_path, dir); }    //如果沒有沒有指定 --template 或者 --link 則直接用 cordova-app-hello-world npm包    copyIfNotExists(paths.www, path.join(dir, ‘www‘));    copyIfNotExists(paths.hooks, path.join(dir, ‘hooks‘));    var configXmlExists = projectConfig(dir); // moves config to root if in www    if (paths.configXml && !configXmlExists) {        shell.cp(paths.configXml, path.join(dir, ‘config.xml‘));    }} catch (e) {    if (!dirAlreadyExisted) {        shell.rm(‘-rf‘, dir);    }    if (process.platform.slice(0, 3) === ‘win‘ && e.code === ‘EPERM‘) {        throw new CordovaError(‘Symlinks on Windows require Administrator privileges‘);    }    throw e;}//擷取 package.json 檔案var pkgjsonPath = path.join(dir, ‘package.json‘);// Update package.json name and version fieldsif (fs.existsSync(pkgjsonPath)) {    delete require.cache[require.resolve(pkgjsonPath)];    var pkgjson = require(pkgjsonPath);    //指定項目名稱，也就是我們 cordova create 命令的第三個參數    if (cfg.name) {        pkgjson.displayName = cfg.name;    }    //指定項目ID，也就是我們 cordova create 命令的第二個參數    if (cfg.id) {        pkgjson.name = cfg.id.toLowerCase();    } else if (!cfg.id) {        //設定預設ID為 helloworld        pkgjson.name = ‘helloworld‘;    }    pkgjson.version = ‘1.0.0‘;    fs.writeFileSync(pkgjsonPath, JSON.stringify(pkgjson, null, 4), ‘utf8‘);}//建立 platforms(後期添加的Android和iOS平台都放在此檔案夾) 和 plugins(外掛程式)檔案夾 if (!fs.existsSync(path.join(dir, ‘platforms‘))) { shell.mkdir(path.join(dir, ‘platforms‘)); }if (!fs.existsSync(path.join(dir, ‘plugins‘))) { shell.mkdir(path.join(dir, ‘plugins‘)); }var configPath = path.join(dir, ‘config.xml‘);// only update config.xml if not a symlinkif (!fs.lstatSync(configPath).isSymbolicLink()) {    // Write out id and name to config.xml; set version to 1.0.0 (to match package.json default version)    var conf = new ConfigParser(configPath);    if (cfg.id) conf.setPackageName(cfg.id);    if (cfg.name) conf.setName(cfg.name);    conf.setVersion(‘1.0.0‘);    conf.write();}

項目建立成功之後我們將得到如下目錄結構

hello/|-- config.xml      #項目設定檔|-- hooks/          #存放Cordova 的鉤子|-- node_modules/|-- res/            #存放一些各平台的icon或者首屏圖等資源|-- www/            #靜態網頁資源|-- platforms/      #各平台存放目錄|-- plugins/        #外掛程式目錄|-- package.json

添加 Android 平台及外掛程式

初始化項目有了，接下來就是添加我們需要支援的平台了，例如：Android 、 iOS 這裡以 Android 為例

# 切換到項目目錄下$ cd hello# 添加Android平台$ cordova platform add android --save# 添加網路攝影機外掛程式$ cordova plugin add cordova-plugin-camera

cordova platform add、cordova plugin add 原理其實和cordova create 都差不多，cordova cli 的模板檔案夾如下：感興趣的童鞋可以深究下！

Cordova 編譯打包 Android APP 產生APK安裝包

經過上面對cordova cli 的分析來看，cordova cli 只是一個命令列工具，它不具備任何環境的能力，所以，要編譯android 的APK檔案首先我們要安裝android的環境

在安裝環境之前先說下我遇到的坑！引用官方的話：“自[email protected]起,Cordova為Android項目使用 Gradle構建。”坑的是Grable安裝不上，即使安裝上之後在cordova編譯的時候也會報Grable安裝錯誤！最終成功安裝的結論為：“幹掉cordova在編譯時間從google下載Gradle”。以 linux 系統為例安裝Gradle步驟如下：

下載Gradle安裝包並安裝（別試圖從官網下載，除非你有梯子）

$ wget https://code.aliyun.com/shuoer/soft/raw/master/gradle-4.1-bin.zip#解壓Gradle安裝包到你指定的目錄，我以${HOME}/.zs-tools/為例$ unzip gradle-4.1-bin.zip -d ${HOME}/.zs-tools/#添加Gradle的環境變數，讓系統能識別Gradle命令echo ‘export PATH=${HOME}/.zs-tools/gradle-4.1/bin:${PATH}‘ >> ${HOME}/.bashrc#幹掉cordova在編譯時間從google下載Gradle編譯工具#如果沒有這條命令，你休想cordova能編譯成功，除非你有梯子echo ‘export CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL=https://code.aliyun.com/shuoer/soft/raw/master/gradle-4.1-all.zip‘ >> ${HOME}/.bashrc#使配置生效$ source ${HOME}/.bashrc

Android環境的安裝

Android環境的安裝需要依賴java環境，而java環境的安裝其實百度上都可以查的到！沒什麼複雜的步驟，而且開發人員基本都有了，java就不多廢話了！

對於一個前端開發人員來說，我只需要android sdk 就可以了，不需要非安裝android studio，如果你從事android開發或者你想給cordova 開發一個android的外掛程式的時候才可能用的到android studio！所以我選擇只安裝android SDK，以 linux 系統 shell 環境為 bash 為例步驟如下：

#下載android sdk for linux 包$ wget https://code.aliyun.com/shuoer/soft/raw/master/android-sdk_r24.4.1-linux.tgz#解壓 android-sdk 包到你指定的目錄，我以${HOME}/.zs-tools/為例$ tar zxvf android-sdk_r24.4.1-linux.tgz -C ${HOME}/.zs-tools/#添加 ANDROID_HOME 的環境變數$ echo "export ANDROID_HOME=${HOME}/.zs-tools/android-sdk-linux" >> "${HOME}/.bashrc"#添加 android tools 和 platform-tools 的環境變數$  echo ‘export PATH=${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools:${PATH}‘ >> "${HOME}/.bashrc"#使設定檔生效$ source ${HOME}/.bashrc#建立 repositories.cfg 如果有該檔案可跳過該步，主要解決 Android SDK Manager無法升級$ touch ${HOME}/.android/repositories.cfg#升級 android 所需要的tools和api（該命令耗時較長務必耐心等待）# -a 表示升級所有 --no-ui 不要ui介面 --filter 只安裝我指定的部分$ echo y | android update sdk -a --no-ui --filter tools,platform-tools,android-26,build-tools-26.0.2

問：為什麼你總是喜歡用${HOME}/.zs-tools/檔案夾儲存所有的環境檔案

答：其實很簡單，就因為我“懶”！為什麼說懶呢？如果您當前登入的使用者是root，那您將環境安裝檔案放到哪裡都沒問題，但是對於非root使用者來說，放到任何非目前使用者的目錄下比如：/opt、/usr/share下時，當您在下載、解壓或者在執行 android 命令時需要在命令前加sudo！這是因為目前使用者沒有目標目錄的寫入許可權！所以為避免不必要的許可權麻煩，我選擇將檔案放在使用者目錄下！

另外在linux 系統中以 . 點開頭的檔案或檔案夾都是隱藏的！只要自己管理好不會顯得很亂

編譯android的APK安裝包

雖然cordova 官網說明了cordova在編譯android的時候用的是grable，但是cordova cli 都幫我們處理，編譯一個debug版本的APK安裝包只需要執行如下：

#編譯一個可調試的安裝包(第一次編譯用時較長務必耐心等待)$ cordova build android

編譯一個release版本的APK安裝包

$ cordova build android --release

說明

如果將以上技術棧描述清楚需要不小的篇幅，所以我會將文章進行拆分：

1. Hybrid App 開發實踐總結 ~開篇2. cordova的環境配置和建立第一個android App （本文）3. 伺服器端docker的安裝，nginx、jenkins、git服務的架設4. 伺服器端code-push-server、mysql服務的架設5. 用戶端code-push外掛程式的引入及code-push-cli的使用7. 如何使用純shell編寫一個快速搭建開發人員環境的命令列工具和安卓端真機調試

使用Cordova建立第一個App和Cordova構建環境的配置