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

2021-02-09

673
0
Cordova

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

前言

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

取回 Cordova platform 及 plugin

執行 cordova prepare 將 platform 及 plugin 復原，並將 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

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

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

cordova

回首頁

搞搞就懂

不懂就搞搞過就懂所以邊搞邊紀錄就對了...