天天看點

Cordova 開發記錄(Windows 環境)

目錄

          • 一、Cordova 定義
          • 二、Cordova 開發環境配置
            • 1. NodeJS 環境配置
            • 2. 平台環境配置
            • 3. git 安裝
            • 4. Cordova 安裝
          • 三、Cordova 項目
            • 1. 建立應用程式
            • 2. 添加平台
            • 3. 建構和運作
            • 4. 調試
            • 5. config.xml 配置檔案
          • 四、Cordova 更新
            • 1. Cordova 工具更新
            • 2. 平台更新
          • 參考連結
一、Cordova 定義

Cordova 是使用 HTML,CSS 和 JavaScript 建構的混合移動應用程式平台。

官方定義: “Apache Cordova是一個開源移動開發架構,它允許您使用标準的Web技術,如HTML5,CSS3和JavaScript進行跨平台開發,避免每個移動平台本機開發語言。應用程式在針對每個平台的包裝内執行,并依靠符合标準的API綁定來通路每個裝置的傳感器,資料和網絡狀态。"

Cordova 開發有兩種模式:

  • 一種是單純 Cordova 開發,不依賴原生平台;
  • 一種是原生平台混合 Cordova 開發;

本文隻記錄單純 Cordova 開發的開發步驟。

二、Cordova 開發環境配置

1. NodeJS 環境配置

NodeJS Downloads

2. 平台環境配置

iOS Platform Guide(官方)

iOS 環境配置

Android Platform Guide(官方)

Android 環境配置

3. git 安裝

git Downloads

Windows 安裝包下載下傳

git 安裝

4. Cordova 安裝

在 Windows 指令提示符中輸入如下指令進行安裝:

C:\>npm install -g cordova
           

檢視版本号:

C:\>cordova -v
           
三、Cordova 項目

1. 建立應用程式

打開 Windows 指令提示符視窗,在目标應用程式目錄下輸入:

D:\Program File\WebApp\project>cordova create MyProject com.cordova.hello HelloWorld
           

其中有三個名稱要關注:

  • MyProject 是所建立應用程式的目錄名稱
  • com.cordova.hello 是反向域名,項目的 id
  • HelloWorld 是所要建立應用的主題,項目的 name

2. 添加平台

打開 Windows 指令提示符視窗,在項目目錄下添加平台:

D:\Program File\WebApp\project\MyProject>cordova platform add android
           

在項目目錄下删除平台:

D:\Program File\WebApp\project\MyProject>cordova platform rm android
           

檢視添加的平台:

D:\Program File\WebApp\project\MyProject>cordova platform ls
           

3. 建構和運作

建構之前檢查各平台的環境要求:

D:\Program File\WebApp\project\MyProject>cordova requirements
           

平台環境沒有問題,就可以進行建構對應的平台項目:

D:\Program File\WebApp\project\MyProject>cordova build android
           

使用預設模拟器,運作應用程式:

D:\Program File\WebApp\project\MyProject>cordova emulate android
           

使用外部模拟器或真實裝置,運作應用程式:

D:\Program File\WebApp\project\MyProject>cordova run android
           

檢視可用于運作此程式的所有連接配接裝置和可用模拟器:

D:\Program File\WebApp\project\MyProject>cordova run android --list
           

4. 調試

  • 編輯

    www

    檔案夾中的代碼
  • 建構指令

    cordova build

  • 運作指令

    cordova run

5. config.xml 配置檔案

在建立應用程式時,config.xml 配置檔案同時被建立,下表列出了其中的元素及描述:

元 素 描 述
widget 反向域名
name 應用程式名稱
description 應用程式描述
author 作者
content 起始頁
plugin 已安裝插件
access 控制對外部域的通路,預設*為不受限
allow-intent 可以通路到的域名
platform 建構應用程式的平台
四、Cordova 更新

1. Cordova 工具更新

打開 Windows 指令提示符視窗,更新 Cordova :

C:\>npm update -g cordova
           

檢視版本号:

C:\>cordova -v
           

檢視最新的 Cordova 版本:

C:\>npm info cordova version
           

2. 平台更新

打開 Windows 指令提示符視窗,更新指定平台配置:

C:\>cordova platform update android --save
C:\>cordova platform update ios --save
           
參考連結

CORDOVA 官網

W3Cschool Cordova 教程

Cordova開發指南