基於cordova如何構建跨平台的nulltouch架構

早有想法實現一個基於cordova跨平台架構.

妄稱架構,當然要有一套較完善的構建思路和一個比較清晰的設計目標.

設計目標:

使用純前端代碼(html+css+js)跨平台編譯成原生應用。不過,目標是需要逐步實現的,所以這裡設定一個大致的構建思路:

1.前端控制項的實現(布局 樣式等),使用成熟的前端組件(bootstrap jquery zepto等),中介層的js封裝,最終產出的結果應該是一個網站形式的前端檔案(*.html,*.css,*.js).

2.native代碼的開發和cordova外掛程式的使用.雖然,cordova支援多個平台,但由於種種說不清道不明的原因,暫時計劃僅支援android和ios平台,另外,本人屌絲,買不起mac裝置,所以,ios部分可能會落後於android.

3.實現一個調試的工具,可以訪問並調試第一步的產物.同時內建一些調用的樣本.

4.實現自動化編譯,等前面兩部分做的足夠強大時,才會考慮這部分.幸運的是,cordova的新版本,已經提供了目前需要的足夠多的功能.

返回欄目頁：http://www.bianceng.cnhttp://www.bianceng.cn/OS/extra/

我不清楚這個系列能寫多少篇部落格,希望不會TJ吧,另外,當第一步有一定的成果,至少要達到前端控制項和樣式能符合移動端的基本特徵(例如移動端的布局,列表,基本控制項)之後,就會開源.

本系列假定讀者們已經瞭解:

1.前端基本知識(html,js,css)

2.cordova基本原理

3.android和ios的相關知識

4.nodejs,npm,git的使用

這裡就不再介紹開發環境的搭建了,不過要順帶提一下cordova的安裝與建立相應工程:

android:

npm install -g cordova

cordova create lzw com.lzw.nulltouch LZW

cd lzw

cordova platform add android

ios:

npm install -g cordova

cordova create lzw com.lzw.nulltouch LZW

cd lzw

cordova platform add ios               //可以使用android建立的項目,cd進相應的路徑 執行這句即可

android平台的資源檔儲存在./platforms/android/assets/www

ios平台的資源檔儲存在./platforms/ios/www

所有的頁面 表徵圖 js檔案均儲存在以上兩個路徑,注意,不是工程裡的www,當然,手動設定專案檔可以直接在工程裡開啟.

android項目可以使用eclipse的匯入功能,而ios則可以在platfoms/ios/下找到.xcodeproj檔案直接啟動.

這裡要注意的是:項目的資源檔(html,js,css)路徑:

android在./platforms/android/assets/www

ios在./platforms/ios/www