顯示具有 Cordova 標籤的文章。 顯示所有文章
顯示具有 Cordova 標籤的文章。 顯示所有文章

2019年11月8日 星期五

[morse]使用 Codova 將 Angular 的專案部署(發行)到 Android 或 IOS

首先你須先將 Angular 專案生成

ng new ngProject
cd ngProject
ng build --prod

在專案目錄下會生成 dist 目錄, 這就是 Angular 預設的發行目錄, 在 dist 目錄下就可以找到發內的全部內容。


接著生成 Cordova 專案


1.安裝 Cordova

npm install -g cordova



2.建立 Cordova 專案

cordova create [ProjectName] [網域名] [app名]



3.加入平台

cd [ProjectName]
cordova platform add ios
cordova platform add android




4. 修改 index.html 

在 Cordova 專案中有個 www 目錄, 把 Angular 的 dis t目錄下的發行內容 copy 到 Cordova 專案的 www 目錄

找到 index.html 作以下修改

4.1.
<base href="/">
改為
<base href="./">


4.2.
把 cordova.js 那一行的註釋符號拿掉(如果不存在就把它加在 
index.html)

<script type="text/javascript" src="cordova.js"></script>



5. 發行 Cordova dova 專案

5.1 發行 android

cordova build android

就會生成apk檔




5.2 發行 ios

cordova build android



6.部署到 google

為使用 Google Play 的企業部署應用程式



[morse]Ionic 部署生成 Android、Ios App 的方式

1、在配置好 Node.js 和 npm 的環境後,用 npm 命令安裝最新版本的 cordova 和 Ionic

windows

npm install -g cordova ionic
npm i -g native-run


Mac
sudo npm update -g cordova ionic
sudo npm i -g native-run



2、創建應用

使用ionic官方提供的現成的應用程序模板,或一個空白的項目創建一個ionic應用:

$ ionic start myApp tabs




3、創建 Android 應用

使用ionic tool 創建,測試,運行你的apps

$ cd myApp
$ ionic cordova platform add android
$ ionic cordova build android
$ ionic cordova emulate android



4、創建IOS應用

$ cd myApp
$ ionic cordova platform add ios
$ ionic build ios
$ ionic emulate ios

如果出現"ios-sim was not found."錯誤,可以執行以下命令:
npm install -g ios-sim




5、創建電腦應用

在電腦執行出現異常,提示: cordova_not_available

解法是新增一平台為browser

ionic cordova platform add browser

再以下列指令取代ionic serve即可


ionic cordova run browser

2019年11月1日 星期五

[morse]Cordova 相關

1.visual studio 2019 已經不再提供 cordova 支持, 雖有很多人表達抗議, 但目前是不支持的。

2.自行手動安裝

找到 cordova 官網



Install
 C:\>npm install -g cordova
-g 表示全域安裝



Upgrade
 C:\>npm update -g cordova
檢查版本
 C:\>cordova -v
運行更長的清單,其中包括當前版本以及其他可用的版本編號為npm info命令:
 C:\>npm info cordova 



Create project
cordova create hello com.example.hello HelloWorld



Add platform

切換到專案目錄
  $ cd hello

加入自己需要的平台
$ cordova platform add ios
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos

檢查當前設置的平臺:
    $ cordova platforms ls

刪除特定一個平臺:
    $ cordova platform remove blackberry10
    $ cordova platform rm amazon-fireos
    $ cordova platform rm android

您可能需要確保您的專案資源符合最新的版本要求
    $ cordova platform update android
    $ cordova platform update ios
    ...etc.



Build app

運行以下命令以反覆運算方式生成專案:
    $ cordova build

生成特定于平臺代碼內專案的 platforms 子目錄。你可以選擇限制到特定的平臺每個生成的範圍:
    $ cordova build ios


模擬器
  $ cordova emulate android
或者,可以將手機插入您的電腦和直接測試應用程式:
    $ cordova run android



添加外掛程式的功能

設計您自己的外掛程式介面,請參閱嵌入 WebViews 和外掛程式開發指南的詳細資訊。

當您創建一個專案,科爾多瓦它並沒有存在任何外掛程式。

外掛程式的清單可以在plugins.cordova.io在註冊表中找到。

您可以使用 CLI 要搜索的從這個註冊表外掛程式。 例如,搜索 bar 和 code 產生單個結果相匹配這兩個術語作為子字串不區分大小寫:
    $ cordova plugin search bar code
    com.phonegap.plugins.barcodescanner - Scans Barcodes

cordova plugin add使用 CLI 來向應用程式添加功能的示例:
  • 基本設備資訊 (設備 API):
    $ cordova plugin add cordova-plugin-device
    
  • 網路連接和電池事件:
    $ cordova plugin add cordova-plugin-network-information
    $ cordova plugin add cordova-plugin-battery-status
    
  • 加速度計、 指南針、 和地理定位:
    $ cordova plugin add cordova-plugin-device-motion
    $ cordova plugin add cordova-plugin-device-orientation
    $ cordova plugin add cordova-plugin-geolocation
    
  • 相機、 媒體重播和捕獲:
    $ cordova plugin add cordova-plugin-camera
    $ cordova plugin add cordova-plugin-media-capture
    $ cordova plugin add cordova-plugin-media
    
  • 訪問設備或網路 (檔 API) 上的檔:
    $ cordova plugin add cordova-plugin-file
    $ cordova plugin add cordova-plugin-file-transfer
    
  • 通過對話方塊或振動發出通知:
    $ cordova plugin add cordova-plugin-dialogs
    $ cordova plugin add cordova-plugin-vibration
    
  • 連絡人:
    $ cordova plugin add cordova-plugin-contacts
    
  • 全球化:
    $ cordova plugin add cordova-plugin-globalization
    
  • 閃屏:
    $ cordova plugin add cordova-plugin-splashscreen
    
  • 打開新的瀏覽器視窗 (InAppBrowser):
    $ cordova plugin add cordova-plugin-inappbrowser
    
  • 調試主控台:
    $ cordova plugin add cordova-plugin-console

查看當前已安裝的外掛程式:
    $ cordova plugin ls

刪除一個外掛程式
$ cordova plugin rm cordova-plugin-console
    $ cordova plugin remove cordova-plugin-console    # same

你可以大量刪除或添加的外掛程式通過指定多個參數的每個命令:
    $ cordova plugin add cordova-plugin-console cordova-plugin-device


平臺支援


驗證外掛程式
    $ npm install -g plugman
你需要有效的應用程式的原始目錄中,如頂級 www 目錄包含在預設 CLI 生成專案中所述的命令列介面。 請確保應用程式的 index.html 的主頁引用名稱的外掛程式的 JavaScript 介面,好像它是相同的原始目錄中:
    <script src="myplugin.js"></script>
然後運行以下命令來測試是否能正常載入的 iOS 的依賴關係:
     $ plugman install --platform ios --project /path/to/my/project/www --plugin /path/to/my/plugin
有關的詳細資訊 plugman 選項,請參閱使用 Plugman 管理外掛程式。 有關如何實際調試外掛程式的資訊,請參閱此頁面的底部列出的每個平臺的本機介面。


JavaScript 介面

JavaScript 提供了面向前面的介面,使外掛程式的也許最重要的部分。 您可以結構你的外掛程式的 JavaScript,然而你喜歡,但是你需要調用 cordova.exec 來交流的本機平臺,使用下面的語法:
    cordova.exec(function(winParam) {},
                 function(error) {},
                 "service",
                 "action",
                 ["firstArgument", "secondArgument", 42, false]);
這裡是每個參數的工作原理:
  • function(winParam) {}: 成功回呼函數。假設您 exec 調用成功完成,以及任何您傳遞給它的參數執行此函數。
  • function(error) {}: 錯誤回呼函數。如果該操作未成功完成,此函數執行帶有可選錯誤參數。
  • "service": 要調用的本機一邊的服務名稱。這對應于本機類,為其更多的資料,可在下面列出的本機指南。
  • "action": 要調用的本機一邊的操作名稱。這通常對應于本機類的方法。請參閱下面列出的本機指南。
  • [/* arguments */]: 要傳遞到本機環境中的參數陣列。

示例 JavaScript

此示例演示實現外掛程式的 JavaScript 介面的一種方法:
    window.echo = function(str, callback) {
        cordova.exec(callback, function(err) {
            callback('Nothing to echo.');
        }, "Echo", "echo", [str]);
    };
在此示例中,該外掛程式的重視本身對 window 物件作為 echo 功能,外掛程式使用者會調用,如下所示:
    window.echo("echome", function(echoValue) {
        alert(echoValue == "echome"); // should alert true.
    });
看看的最後三個參數的 cordova.exec 函數。 第一次調用 Echo 的服務,一個類名稱。 第二個請求 echo 行動,該類中的方法。 第三個是一個陣列,包含 echo 字串,該字串參數的 window.echo 函數的第一個參數。
成功回檔傳遞到 exec 是簡單的回呼函數的引用 window.echo 花。 如果本機平臺觸發錯誤回檔,它只是調用的成功回呼函數,並傳遞一個預設字串。

本地介面

一旦你為你的外掛程式定義 JavaScript,你需要補充與至少一個本機實現。 下面,列出每個平臺的詳細資訊和每個生成回聲外掛程式上面的簡單示例:
Tizen 平臺不支援外掛程式。

發佈外掛程式

一旦你開發你的外掛程式,你可能想要發佈並與社區分享它。 你可以將你的外掛程式發佈到任何npmjs-基於註冊表,但推薦的一種NPM 註冊表。 請閱讀我們的新公共管理指南 》 的發佈外掛程式.
:科爾多瓦外掛程式註冊表移動到唯讀狀態。 publish/unpublish命令刪除從plugman,所以你需要使用相應的新公共管理命令。
其他開發人員可以安裝你的外掛程式使用plugman或科爾多瓦 CLI 自動。 (每個發展路徑的詳細資訊,請參閱使用 Plugman 管理外掛程式和命令列介面。)
要將一個外掛程式發佈到故宮註冊表你需要按照以下的步驟:
  • 創建你的外掛程式的package.json檔:
    $ plugman createpackagejson /path/to/your/plugin
    
  • 發佈:
    $ npm adduser # that is if you don't have an account yet
    $ npm publish /path/to/your/plugin
    
就是這個!
運行plugman --help列出其他可用的基於註冊表的命令。