1 cordova 簡介
Apache Cordova (phonegap的核心)是一套開發(fā)跨平臺移動應(yīng)用的框架。提供了一組設(shè)備相關(guān)的API,通過這組API,移動應(yīng)用能夠以JavaScript 訪問原生的設(shè)備功能,如攝像頭、麥克風(fēng)等。
Cordova還提供了一組統(tǒng)一的JavaScript類庫,以及為這些類庫所用的設(shè)備相關(guān)的原生后臺代碼
cordova官網(wǎng)
二 ionic簡介
Ionic 是一個(gè)用HTML, CSS 跟JS 開發(fā)的一個(gè)用于移動設(shè)備的web app 前端開發(fā)框架,采用 Sass與AngularJS 開發(fā)。提供了一系列的UI組件,提供數(shù)據(jù)的雙向綁定,(基于cordova之上)
步驟建立項(xiàng)目請參考官網(wǎng),具體UI控件使用等詳情請參考教程
官網(wǎng) http://ionicframework.com/getting-started/
教程 http://www.runoob.com/ionic/ionic-tutorial.html
雙向綁定:即從界面的操作能實(shí)時(shí)反映到數(shù)據(jù),數(shù)據(jù)的變更能實(shí)時(shí)展現(xiàn)到界面。 Angularjs采用的模式,MVVM框架結(jié)構(gòu)中的view和viewmodel。
例子
<div ng-controller="CounterCtrl">
<span ng-bind="counter"></span>
<button ng-click="counter++">increase</button>
</div>
function CounterCtrl($scope) {
$scope.counter = 1;
}
三. 項(xiàng)目結(jié)構(gòu)
具體js
(1)config.xml
cordova的應(yīng)用程序都依賴于一個(gè)共同的 config.xml 文件,提供有關(guān)應(yīng)用程式的信息,并制定參數(shù)影響它如何工作
以下的配置元素出現(xiàn)在頂級config.xml類,并在所有受支援的cordova平臺支援:
- <widget>元素的 id 屬性提供了應(yīng)用程式的反向域識別碼和version主要/次要/修補(bǔ)程式符號表示其完整版本號。小部件標(biāo)記也可以指定替代版本,即 versionCode 為安卓系統(tǒng)和CFBundleVersion 的 iOS 的屬性。
- <name>元素指定應(yīng)用程式的正式名稱,它出現(xiàn)在設(shè)備的主畫面上和在應(yīng)程式商店頁面內(nèi)。
- <description>和 <author> 的元素指定的詳細(xì)資料和聯(lián)系信息,
- 可選的 <content>元素在頂級 web 目錄中定義應(yīng)用程序的起始頁。默認(rèn)是 index.html ,其中通常出現(xiàn)在一個(gè)專案中的頂級www目錄。
- <access>元素定義應(yīng)用程序能夠與之進(jìn)行通信的外部域的集。如上圖所示的默認(rèn)值允許訪問任何服務(wù)器。如果白名單文件做修改的話可以限制網(wǎng)站
(2)Plugin 插件/外掛機(jī)制
插件是代碼的一個(gè)套裝軟體注入,允許在應(yīng)用程序呈現(xiàn)能在本機(jī)平臺運(yùn)行通信的cordova web 視圖。 插件提供對基于 web 應(yīng)用通常不可用的設(shè)備和平臺功能的訪問。
cordova API 的所有主要功能基本都是使用插件機(jī)制實(shí)現(xiàn)的。
插件包括一個(gè)單一的的 JavaScript 文件和每個(gè)支持的平臺上相應(yīng)的本機(jī)代碼文件。
添加已有的插件
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git
添加自定義的插件
cordova plugin add 插件文件夾目錄
(3)cli 命令行舉例
Prepare 命令
cordova prepare platform_name
prepare命令把www文件夾中所有文件復(fù)制到平臺文件夾的合適位置中,這里指Android的assets/www文件夾和ios的www文件夾。config.xml文件夾內(nèi)容覆蓋平臺相關(guān)的config.xml文件。
詳細(xì)命令 terminal輸入cordova或者cordova help獲取,ionic類似
注意事項(xiàng):
- 調(diào)用 cordova JavaScript 函數(shù)從一個(gè)遠(yuǎn)端載入HTML 頁面 (不存儲在本機(jī)上的的 HTML 頁面) 是一種不受支持的配置,如果想遠(yuǎn)端載入html使用cordova的 InAppBrowser (插件) 。
- cordova項(xiàng)目中應(yīng)用的為3.9.X版本,4.0以上不支持ios7
- ios平臺的 congfig.xml中的name元素不顯示到設(shè)備應(yīng)用程序名稱,所以name的值不應(yīng)該為中文,用以解決cordova編譯時(shí)提示更新版本的錯誤;安卓的name值對應(yīng)顯示到設(shè)備應(yīng)用,應(yīng)該保持一致。
已有項(xiàng)目移植cordova步驟 請參考http://www.lxweimin.com/p/5e15e34ea336