[cordova] 從版控取回代碼後如何重建 platform 及 plugin 環境

從版控取回代碼後如何重建 platform 及 plugin 環境。

前言


在預設的版控設置下是不會將 platformplugin 存入版控中,也就表示若從版控取回 cordova 專案後需要將 platformplugin 復原,而前幾天文章中若是手動在 platformplugin 動手腳的行為將會消失,因此本篇文章說明如何進行設置。

 

 

取回 Cordova platform 及 plugin


執行 cordova prepareplatformplugin 復原,並將 plugin 加入到 platform  中。

$ cordova prepare

 

 

安裝 vue 專案套件與建置


另外在 cordova 專案中的 toolset vue 專案要使用 npm i 來安裝相關套件,並建置 build 出新的 app 內容到 www 資料夾後,再將目錄切回 Cordova 專案下。

$ cd toolset
$ npm i
$ npm run build
$ cd ..

 

 

建置 cordova 專案輸出至模擬器

接著執行 cordova build 建置出 ios app ( www 資料夾中的 vue 頁面透過 cordova 包裝成 app )

$ cordova build ios

 

跟上一篇文章建置時發生錯誤一樣 (Cannot build iOS app - 'openSettingsURLString' has been renamed to 'UIApplicationOpenSettingsURLString),所以必須重新執行以下指令來修正 plugin 中不相容的 swift 語法。

$ find . -type f -name "*.swift" -print0 | xargs -0 sed -i '' -e 's/UIApplication.openSettingsURLString/UIApplicationOpenSettingsURLString/g'

 

最後就可以透過以下指令將 app 放到模擬器上面執行。

$ cordova emulate ios

 

 

建置 cordova 專案輸出至手機


使用以下指令把 app 放到手機上。

$ cordova run ios --device

 

此時發生 error: Signing for "toolset" requires a development team. Select a development team in the Signing & Capabilities editor. (in target 'toolset' from project 'toolset') 錯誤,這不意外因為先前已經有發生過了,而當時我們的解決方式是用 xcode 開啟專案並設定 team 資訊, 但這樣是表示每個人都要「手動」用 xcode 開啟專案後重設嗎?當然不行啊!

 

我們可依照 cordova 規範在專案跟目錄建立 build.json 檔案,提供 development team 資訊。

{
    "ios": {
        "debug": {
            "codeSignIdentity": "Apple Development",
            "developmentTeam": "T44NT2ZG43",
            "packageType": "development",
            "automaticProvisioning": true,
            "buildFlag": [
                "EMBEDDED_CONTENT_CONTAINS_SWIFT = YES",
                "ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES=NO",
                "LD_RUNPATH_SEARCH_PATHS = \"@executable_path/Frameworks\""
            ]
        },
        "release": {
            "codeSignIdentity": "Apple Development",
            "developmentTeam": "T44NT2ZG43",
            "packageType": "app-store",
            "automaticProvisioning": true,
            "buildFlag": [
                "EMBEDDED_CONTENT_CONTAINS_SWIFT = YES",
                "ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES=NO",
                "LD_RUNPATH_SEARCH_PATHS = \"@executable_path/Frameworks\""
            ]
        }
    }
}

 

這時候建置時預設會自動取用根目錄下的 build.json 設定的建置參數;如果你的 build.json 不放在根目錄時,可透過 --buildConfig 參數指定讀取的 build.json 位置。

$ cordova build ios 

 

接著 app 就可以順利放到手機上面運行了。

$ cordova run ios --device

 

 

整理語法


我們可以建立 init.sh,只要從 git 取回的專案執行這隻初始專案。

#!/bin/bash

# get platforms, plugins and add plugins to platforms
cordova prepare

# install vue web plugins and build
cd toolset
npm install
npm run build
cd ..

# fix cordova-plugin-qrscanner bug, Change UIApplication.openSettingsURLString to UIApplicationOpenSettingsURLString
find . -type f -name "*.swift" -print0 | xargs -0 sed -i '' -e 's/UIApplication.openSettingsURLString/UIApplicationOpenSettingsURLString/g'

 

然後每次修改程式想要放到手機上就執行 buildToDevice.sh 就好。

#!/bin/bash

# build vue web
cd toolset
npm run build
cd ..

# build cordova - ios
cordova build ios

# deploy ios app to connected device
cordova run ios --device

 

 

 


希望此篇文章可以幫助到需要的人

若內容有誤或有其他建議請不吝留言給筆者喔 !