cordova的安裝與配置


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

 
 
        

 

 
        

 

 
        
 
        
 
       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM