基於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的新版本,已經提供了目前須要的足夠多的功能.

我不清楚這個系列能寫多少篇博客,但願不會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

請在開發環境中肯定好它們的路徑,以避免編輯到錯誤的位置.

這裏放兩張成功執行的截圖,順便劇透了前端部分計劃: