首先選擇必要的 library
Sencha Touch 專案預設是用 micro-loader 載入設定在 app.json 的 js / css 檔,不過檔案太零碎需要發很多 request,若透過 internet 會拖慢速度,SDK 內同時也有提供整合的版本:- sencha-touch.js 131KB
- sencha-touch-debug.js 514KB
- sencha-touch-all.js 671KB
- sencha-touch-all-debug.js 2.7M
各版本的用途可以參考 Using and Creating Builds,由於我需要使用到 widget,所以要選 all 的版本,sencha-touch-all.js (671KB) 雖然壓縮過了還是好肥大...
CSS 的部分,SDK 內也提供不同組的 theme 可以套:
- base.css 230KB
- bb10.css 184KB BlackBerry
- sencha-touch.css 258KB
- wp.css 194KB Windows Phone
尋找 Host Javascript / CSS 的主機
CDN 有下面幾種選擇- Github page 具版本控管,速度OK,但有個缺點就是 file commit 後要10分鐘才能 access 到
- Google drive 最方便,放 html、js、css 都 OK
- Dropbox 速度慢,有時候還會載入失敗
- Google code host js file 會載入失敗
把資源整合進 Codepen,然後開始寫 code 啦!
Codepen 是個線上網頁編輯器,編輯後可以即時看到,支援的語言也很多 CoffeeScript、SCSS/Sass。我覺得比 jsfiddle 好用,jsfiddle 沒有支援 SCSS,theme 也沒有 codepen好看,比較討厭的是 jsfiddle 儲存後就強迫開一個新的版本,若 blog 想 link 到最新版本還要手動更新。在 Codepen 編輯 Sencha Touch 的程式碼後,選擇下方的 embedded codepen,可以取得 embedded 的 HTML,就可以嵌在自己的 blog 啦,而且未來若有更新,blog 這邊也可以看到,因為是同一個版本。
預覽如下
沒有留言:
張貼留言