1. 程式人生 > >使用Cordova進行iOS開發 (環境配置及基本用法)

使用Cordova進行iOS開發 (環境配置及基本用法)

以上如果有錯,試試下邊的

1、安裝nodejs(自動包含npm)

2、在命令列中通過npm語句npm install -g cordova 安裝cordova(如果提示網路連線失敗,需要設定網路代理,搭理網址:npm config --global set registry http://registry.cnpmjs.org)

3、在命令列裡通過安裝成功的cordova,建立一個混合專案,建立語句:

cordova create CordovaDemo com.first.helloworld HelloWorld

CordovaDemo:專案資料夾名

com.first.helloworld

:專案包名

Helloworld:專案 名

4、通過cd CordovaDemo 命令進入到資料夾內,通過以下命令cordova platform add android

為你的建立的專案新增安卓執行平臺(ios平臺新增也一樣)

5、執行平臺新增成功以後,還需要新增呼叫手機底層控制元件

cordova plugin add cordova-plugin-device

cordova-plugin-device 基本裝置資訊
cordova-plugin-network-information 網路連線資訊
cordova-plugin-battery-status 電池狀態資訊
cordova-plugin-device-motion 加速度資訊


cordova-plugin-device-orientation 指南針資訊
cordova-plugin-geolocation 定位資料
cordova-plugin-camera 相機
cordova-plugin-media-capture 媒體捕獲
cordova-plugin-media 媒體播放器
cordova-plugin-file 訪問檔案
cordova-plugin-file-transfer 檔案傳遞
cordova-plugin-dialogs 訊息提示對話方塊
cordova-plugin-vibration 振動提醒
cordova-plugin-contacts 聯絡人
cordova-plugin-globalization 全球化

cordova-plugin-splashscreen 閃屏(啟動畫面)
cordova-plugin-inappbrower 瀏覽器
cordova-plugin-console 控制檯
cordova-plugin-statusbar 狀態列

新增外掛,有選擇性的安裝,沒必要都安裝...

6、專案建立成功,用開發工具匯入你建立的專案。如果用的是Eclipse開發工具,匯入專案以後需要注意調整你的sdk版本為5.1以上,並且,把你同時匯入的jar包和專案關聯起來

7、此時專案可以正常執行。專案結構中,需要注意的是assets資料夾,這個資料夾包含了以後專案開發需要維護、修改的全部檔案。

8、在assets中的index.html頁面是專案啟動以後的首頁。專案開發要從他開始。

9、想要實現OnsenUI和AngularJs協作的混合專案,還需要進行以下的簡單配置。因為專案是單頁面專案(SPA),所以專案執行期間用到的CSS和js檔案,需要全部宣告在index.html頁面。

(1)引用必須要引入的兩個css檔案:

  onsenui.css (元件)和 onsen-css-components-blue-basic-theme.css(主題)

 (2)引入幾個必須引入的js檔案,

   angular.js

   onsenui.js

   cordova_plugins.js

   cordova.js

  和自定義的app_model.js,

  注意:cordova.js和cordova_plugins.js只用在呼叫手機底層功能的時候才有用。所以在瀏覽器執行專案的時候,需要遮蔽這兩個js檔案,另外,app_modal.js裡的內容只寫一   句即可:

   var app = angular.module('app',['onsen']);

 10、在index.html頁面的html標籤裡引用在app_modal裡宣告的模組。

    <html lang="en" ng-app="app" ng-csp>

 11、 這時候,建立的專案可以正確的執行onsenui前端框架提供的任何元件。但是需要注意的是:onsenui裡的元件需要放在<ons-page>標籤裡面,而且  不要直接在<ons-page>標籤內書寫純文字資訊。

  12、在index.html頁面中,需要注意的是,<ons-page>標籤推薦寫在<ons-navigator>標籤裡,以方便頁面的跳轉。

  13、然後就可以在index的<ons-page>標籤內對onsenui提供的各種元件進行顯示效果的測試了。

  14、等熟悉了onsenui提供的各種元件的顯示效果之後,就可以通過angularjs的配合實現資料的填充。