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的配合實現數據的填充。