使用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的配合實現資料的填充。