Sencha Touch 2 入門 Demo 之一：搭建 Sencha Touch 2 的運(yùn)行環(huán)境
Posted on 2012-03-23 08:06 隨它去吧 閱讀(15975) 評(píng)論(6) 收藏 舉報(bào)| 前言： |
前段時(shí)間不才翻譯了關(guān)于Sencha Touch 2 MVC架構(gòu)的一系列文章，大家的認(rèn)可讓我備受鼓舞，也堅(jiān)定了繼續(xù)分享自己學(xué)習(xí)Sencha Touch（下文簡(jiǎn)稱ST）過程和經(jīng)驗(yàn)的決心。
在跟大家交流的過程中，發(fā)現(xiàn)很多入門者反映，學(xué)習(xí)ST最大的障礙有兩個(gè)：1、官方文檔跟進(jìn)速度不夠；2、官方sample集成程度較高，典型性不足。
我認(rèn)同大家的觀點(diǎn)：由于前期ST2版本更新極快，一個(gè)多月的時(shí)間從Beta到RC再到正式版，這期間小變動(dòng)相當(dāng)多，開發(fā)組的瘋狂精神固然值得欽佩，可是截至目前為止，仍有一些地方未作詳盡說明，而這對(duì)于剛接觸ST的朋友來講的確很困難。關(guān)于官方提供的sample集成度過高的問題，我覺得對(duì)從未接觸過Ext產(chǎn)品系的朋友來說，這一點(diǎn)也的確棘手。
所以這一階段我的打算是通過demo的方式，為剛開始學(xué)習(xí)的朋友們提供一些更具有典型性的實(shí)例，同時(shí)也嘗試對(duì)官方說明不夠的地方進(jìn)行一下講解，希望對(duì)大家有幫助。
Sencha Touch 交流 QQ 群 213119459 歡迎您的加入。
| 本節(jié)目標(biāo)：加載 ST2 到你的網(wǎng)頁(yè)，搭建運(yùn)行環(huán)境 |
這一節(jié)的內(nèi)容其實(shí)剛好可以對(duì)應(yīng)官方文檔的《Getting Started with Sencha Touch 2》http://docs.sencha.com/touch/2-0/#!/guide/getting_started
為什么我前面一直沒有翻譯這一章節(jié)，原因也在這里，對(duì)于ST2來講，官方的這篇文檔顯然缺乏誠(chéng)意，雖然它可以指點(diǎn)你寫出一個(gè)hello world，但是對(duì)ST2運(yùn)行環(huán)境的搭建細(xì)節(jié)說明不夠，剛好今天我可以用一個(gè)完整的Demo來做一個(gè)詳細(xì)說明。
ST1的時(shí)候，搭建基于ST的網(wǎng)頁(yè)運(yùn)行環(huán)境的確非常簡(jiǎn)單，如官方這篇文檔所述已經(jīng)足夠（這也是我認(rèn)為誠(chéng)意不夠的原因，為嘛不緊跟ST2的步伐呢）。
但是從ST2 Beta版開始，開發(fā)組提供了sencha-touch-all.js和sencha-touch.js兩個(gè)js文件，其目的是允許開發(fā)人員選擇ST框架是采用“一次性加載全部”的方式（簡(jiǎn)稱all方式）還是“首次運(yùn)行只加載核心代碼，隨后按需加載”的方式（簡(jiǎn)稱core方式），在ST2的最終發(fā)布版中，core方式只有91k，而all方式有568k，這還都是壓縮后的大小，這樣的尺寸對(duì)比在mobile設(shè)備上意味著用戶體驗(yàn)可能出現(xiàn)巨大差別，因此根據(jù)自身需求來選擇加載模式還是很有必要的。
其實(shí)ST2的正式版發(fā)布后，很多人就開始頭疼，因?yàn)榇蠹野l(fā)現(xiàn)下載的sdk包解壓縮后，里面的例子無法直接雙擊在Chrome里運(yùn)行，這還不算完，ST官方網(wǎng)站上提供的sample源碼竟然也變得失去了可讀性，沒有了css文件的引入，沒有了app.js的引入，只是html頁(yè)面中被加入了一段壓縮混淆后的js代碼，很多人想不通，其實(shí)我當(dāng)時(shí)也想不通:-）。
事情的真相是，正式版使用的那段混淆腳本叫做microloader，它通過異步加載一個(gè)app.json文件（這個(gè)文件也是正式版才出現(xiàn)的）來讀取對(duì)運(yùn)行環(huán)境的初始化設(shè)定，然后根據(jù)app.json中的設(shè)定再去加載相應(yīng)的css和js文件，甚至于設(shè)定app緩存等等（還有很多至今搞不清楚的設(shè)定），也就是說，采用此種方式，要調(diào)用的js和css文件被隱藏了，顯而易見，這種方式非常有助于保護(hù)你的源碼，當(dāng)然也不是絕對(duì)安全的js源碼保護(hù)方式，但至少還是比什么都不做要強(qiáng)得多。
于是，ST2的正式版最終得以支持兩種模式下的四種手段來實(shí)現(xiàn)ST2框架文件的加載。而這也是本節(jié)的demo所要說明的。
| 開發(fā)環(huán)境說明 |
ST的開發(fā)說到底還是web開發(fā)，因此它對(duì)開發(fā)環(huán)境和開發(fā)工具其實(shí)并不挑剔，小到notepad，中到notepad++/editplus，大到eclipse/visual studio都可以，當(dāng)然如果考慮到方便性的話，最好還是有自動(dòng)格式、關(guān)鍵字高亮、自動(dòng)補(bǔ)齊功能，但無論怎樣，目前似乎還沒有可以像Aptana通過插件來支持jQuery那樣完全支持ST的開發(fā)工具，我們期盼以后eclipse或者visual studio出現(xiàn)相應(yīng)的插件吧。
對(duì)于普通開發(fā)者而言，我推薦notepad++，輕便的同時(shí)功能還算強(qiáng)大，如果你不怕塊頭大，Aptana和eclipse也是不錯(cuò)的選擇。不過我用的是Visual Studio 2010，因?yàn)殡娔X上就有，無需安裝了。
| Demo代碼完整結(jié)構(gòu) |
下面對(duì)上述結(jié)構(gòu)做一詳細(xì)說明：
最頂級(jí)是Demo和SenchaTouch兩個(gè)文件夾，分別用來放置Demo程序代碼和ST框架代碼：
SenchaTouch文件夾下面的2.0.0文件夾表明當(dāng)前ST框架的版本號(hào)，再下面就是ST2框架的所有相關(guān)資源文件；
- 以sencha-touch開頭的4個(gè)js文件分別是ST2框架的all版和core版及其各自的debug版；
- css里面放置了ST2的幾套皮膚樣式文件；
- src文件夾下是ST2的所有源文件代碼，該文件夾內(nèi)文件主要供core加載方式調(diào)用；
- 還有一個(gè)microloader文件夾，里面提供了剛才我們前面提到過的ST2正式版所采用最新加載方式所需js文件。
Demo文件夾下就是我們此次編寫的全部代碼文件：
- 1.LoadSenchaTouchDirectly文件夾下面有兩個(gè)html頁(yè)面和各自匹配的js文件，分別對(duì)ST傳統(tǒng)的主頁(yè)面直接嵌入js和css模式下，如何采用all和core兩種手段載入框架文件進(jìn)行了示范；
- 2.LoadSenchaTouchWithMicroloader文件夾下有兩個(gè)html頁(yè)面、一個(gè)app.js外加一個(gè)app.json文件，演示了如何在html頁(yè)面中通過inline或者code-behind方式引用microloader實(shí)現(xiàn)ST的設(shè)定和加載。
| Demo所實(shí)現(xiàn)的效果：文本框與Picker結(jié)合實(shí)例 |
雖然本文目的是分別演示不同模式不同手段來加載ST2所需框架，但頁(yè)面上若只寫一個(gè)干巴巴的Hello World還是有些對(duì)不起觀眾，所以這里我實(shí)現(xiàn)了一個(gè)比較有實(shí)際使用價(jià)值的效果，那就是一個(gè)不可編輯文本框，該文本框的值只能通過一個(gè)Picker來選擇。效果圖如下：
下面開始一一介紹四種加載方式：
| A.直接加載完整框架文件（all方式） |
這種加載方式跟ST1開始的方式是一樣的，即在html頁(yè)面中明確引入sencha-touch的完整框架js文件、css文件以及應(yīng)用程序代碼。
sencha-touch-all.html代碼:
暈死！博客園將我的相對(duì)路徑都自動(dòng)轉(zhuǎn)成了站內(nèi)絕對(duì)路徑，請(qǐng)自行將后面所有代碼中的"http://www.rzrgm.cn/"改成"。。/。。/"（。換成.）
<!DOCTYPE html>
<html>
<head>
<title>Hello Mobile</title>
<link rel="stylesheet" href="http://www.rzrgm.cn/SenchaTouch/2.0.0/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="http://www.rzrgm.cn/SenchaTouch/2.0.0/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>
app-all.js代碼（代碼邏輯很簡(jiǎn)單，看注釋即可）：
Ext.application({
name: 'Demo',
viewport: {
autoMaximize: true // 該屬性可以設(shè)置頁(yè)面自動(dòng)最大化（隱藏地址欄）
},
launch: function () {
Ext.create("Ext.Panel", {
fullscreen: true,
items: [
{
xtype: 'fieldset',
margin: 10,
title: '文本框與Picker結(jié)合實(shí)例',
items: [
{
xtype: 'textfield',
name: 'aTextField',
id: 'aTextField',
readOnly: true, // 把文本框設(shè)為只讀，禁止輸入
label: '取值結(jié)果',
clearIcon: true,
listeners: {
// 偵聽文本框的focus事件，獲取到焦點(diǎn)時(shí)觸發(fā)
focus: function () {
this.disable(); // 先禁用文本框，防止系統(tǒng)調(diào)出軟鍵盤
Ext.getCmp('aPicker').show(); // 然后顯示用來選擇內(nèi)容的Picker
}
}
}
]
}
]
});
// 定義一個(gè)Picker供文本框聯(lián)動(dòng)
aPicker = Ext.create('Ext.Picker', {
name: 'aPicker',
id: 'aPicker',
hidden: true,
listeners: {
// 偵聽change事件，Picker的值改變同時(shí)也設(shè)定文本框的值
change: function () {
Ext.getCmp('aTextField').setValue(aPicker.getValue().question);
},
// 偵聽hide事件，當(dāng)Picker消失時(shí)將文本框狀態(tài)恢復(fù)為enable
hide: function () {
Ext.getCmp('aTextField').enable();
}
},
slots: [
{
name: 'question',
data: [
{
text: '無',
value: ''
},
{
text: '最喜歡的顏色',
value: 'color'
},
{
text: '最喜歡的運(yùn)動(dòng)',
value: 'sport'
},
{
text: '最喜歡的明星',
value: 'star'
}
]
}
]
});
// 前面定義的Picker控件必須顯式加入Viewport，否則無法被調(diào)用顯示
// Ext.Viewport是Sencha Touch自動(dòng)創(chuàng)建的一個(gè)頂級(jí)容器
Ext.Viewport.add(aPicker);
}
});
| B.先加載核心框架文件，然后按需加載其他組件（core方式） |
此種加載方式是ST2新增的，他為我們提供了更多地選擇，避免每個(gè)app都要加載巨大的sencha-touch-all.js。
不過具體使用的時(shí)候你會(huì)發(fā)現(xiàn)，這種core方式雖然相比all方式需要下載的文件小了，但同樣存在一些弊端：
- 單頁(yè)面加載文件的個(gè)數(shù)大大增加，這毫無疑問會(huì)加大服務(wù)器的并發(fā)壓力；
- 按需加載方式還將導(dǎo)致頁(yè)面渲染時(shí)間（指頁(yè)面所需文件下載完成到頁(yè)面渲染完成中間這段頁(yè)面顯示白屏的時(shí)長(zhǎng)）變長(zhǎng)，用戶體驗(yàn)未見明顯提升。
所以最終選擇哪中方式，還要經(jīng)過你自己仔細(xì)測(cè)算和評(píng)估自身需求而定。
sencha-touch-core.html代碼（相比A所采用的all方式，僅僅改變了對(duì)應(yīng)用程序代碼文件（app-core.js取代了app-all.js）和框架js文件（sencha-touch-debug.js文件取代sencha-touch-all-debug.js文件）的引用：
<!DOCTYPE html>
<html>
<head>
<title>Hello Mobile</title>
<link rel="stylesheet" href="http://www.rzrgm.cn/SenchaTouch/2.0.0/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="http://www.rzrgm.cn/SenchaTouch/2.0.0/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app-core.js"></script>
</head>
<body></body>
</html>
app-core.js代碼（著重觀察開始的部分，后面的代碼與all方式?jīng)]有區(qū)別）：
// 第一件事就是給src這個(gè)源文件目錄指定一個(gè)命名空間（具體參見官方文檔翻譯中的External Dependencies，即外部依賴）
Ext.Loader.setPath({
'Ext': 'http://www.rzrgm.cn/SenchaTouch/2.0.0/src'
});
// 然后根據(jù)application用到的控件來添加對(duì)以下組件的引用（有人說Ext.TitleBar沒用到啊，其實(shí)用到了，在Picker里面）
// 大家請(qǐng)注意，其實(shí)這里的Ext命名空間指的就是上面Ext.Loader.setPath方法中指定的外部依賴命名空間
Ext.require(['Ext.form.FieldSet', 'Ext.picker.Picker', 'Ext.TitleBar']);
// 下面的代碼部分跟all方式完全保持了一致，故省略……
Ext.application({
name: 'Demo',
……
注意：A和B兩種方式由于對(duì)js和css文件采用了相對(duì)路徑的直接引用，所以直接在資源管理器雙擊運(yùn)行就可以看到效果。
| C.通過Microloader加載ST框架（Code-behind方式） |
前文說過，Microloader是ST2正式版加入的新功能，通過這種模式加載ST2框架的話，在Chrome瀏覽器里無法直接查看效果，Safari可以。
采用Microloader模式又可以細(xì)分為Code-Inline和Code-behind兩種方式，Code-inline指的是把js腳本直接寫在html頁(yè)面里，Code-behind指的是鏈接外部js文件來實(shí)現(xiàn)。先看第一種（這也是官方sdk例子當(dāng)中采用的方式）：
JsCodeBehind.html代碼（簡(jiǎn)單的不能再簡(jiǎn)單了，只引用了microloader文件夾下的development.js文件，經(jīng)測(cè)試，其他兩個(gè)文件均無效，注意這里給script加了一個(gè)id）：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Microloader</title>
<script id="microloader" type="text/javascript" src="http://www.rzrgm.cn/SenchaTouch/2.0.0/microloader/development.js"></script>
</head>
<body>
</body>
</html>
我們知道這個(gè)microloader的功能是加載并讀取app.json文件里的設(shè)置，那么當(dāng)然有必要看一下app.json代碼：
{
"name": "Demo", // app名稱
"js": [
{
"path": "http://www.rzrgm.cn/SenchaTouch/2.0.0/sencha-touch-all-debug.js" // 引用的ST框架文件，這里我們選用all模式
},
{
"path": "app.js", // 引用的應(yīng)用程序代碼文件
"update": "delta"
}
],
"css": [
{
"path": "http://www.rzrgm.cn/SenchaTouch/2.0.0/css/sencha-touch.css", // 引用的css文件
"update": "delta"
}
],
"appCache": {
"cache": [
"JsCodeBehind.html",
"JsCodeInline.html"
],
"network": [
"*"
],
"fallback": []
},
"extras": [
],
"archivePath": "archive",
"buildPaths": {
"testing": "http://www.rzrgm.cn/deploy/testing/Demo",
"production": "http://www.rzrgm.cn/deploy/production/Demo",
"package": "http://www.rzrgm.cn/deploy/package/Demo",
"native": "http://www.rzrgm.cn/deploy/native/Demo"
},
"buildOptions": {
"product": "touch",
"minVersion": 3,
"debug": false,
"logger": "no"
},
"id": "3a867610-670a-11e1-a90e-4318029d18bb"
}
由于官方尚未對(duì)app.json文件中的其他配置做詳細(xì)說明，因此我們?cè)谶@里只關(guān)注前面3個(gè)配置，這些已經(jīng)足夠我們正常運(yùn)行ST應(yīng)用程序了。為了方便起見，該文件中指定了調(diào)用的ST框架文件是sencha-touch-all-debug.js（all方式），應(yīng)用程序代碼文件是app.js，它的代碼跟A中的沒有任何區(qū)別，這里就不再貼了。
| D.通過Microloader加載ST框架（Code-inline方式） |
Code-inline方式，顧名思義，把js代碼直接寫在html文件里，這是目前ST官網(wǎng)實(shí)例中所采用的方式（您可能已經(jīng)注意到了，官方的例子與提供下載的sdk包中同一個(gè)例子所采取的方式并不相同）！
我們先隨便找一個(gè)官網(wǎng)部署的例子來看一下它的代碼（這里選擇的是正式版新增的例子TouchStylehttp://dev.sencha.com/deploy/touch/examples/production/touchstyle/index.html）：
<!DOCTYPE HTML>
<html manifest="cache.manifest" lang="en-US">
<head>
<meta charset="UTF-8">
<title>TouchStyle</title>
<script type="text/javascript">(function(n){function r(a){function b(a,j){var c=a.length,b,e;for(b=0;b<c;b++){e=a[b];var d=a,J=b,k=void 0;"string"==typeof e&&(e={path:e});e.shared?(e.version=e.shared,k=e.shared+e.path):(y.href=e.path,k=y.href);e.uri=k;e.key=g+"-"+k;f[k]=e;d[J]=e;e.type=j;e.index=b;e.collection=a;e.ready=!1;e.evaluated=!1}return a}var c;"string"==typeof a?(c=a,a=z(c)):c=JSON.stringify(a);var g=a.id,d=g+"-"+A+o,f={};this.key=d;this.css=b(a.css,"css");this.js=b(a.js,"js");this.assets=this.css.concat(this.js);this.getAsset=
function(a){return f[a]};this.store=function(){s(d,c)}}function v(a,b){i.write('<meta name="'+a+'" content="'+b+'">')}function p(a,b,c){var g=new XMLHttpRequest,d,c=c||B;try{g.open("GET",a,!0),g.onreadystatechange=function(){4==g.readyState&&(d=g.status,200==d||304==d||0==d?b(g.responseText):c())},g.send(null)}catch(f){c()}}function K(a,b){var c=i.createElement("iframe");m.push({iframe:c,callback:b});c.src=a+".html";c.style.cssText="width:0;height:0;border:0;position:absolute;z-index:-999;visibility:hidden";
i.body.appendChild(c)}function C(a,b,c){var g=!!a.shared;if(!g)var d=b,f=a.version,h,b=function(j){h=j.substring(0,f.length+4);h!=="/*"+f+"*/"?confirm("Requested: '"+a.uri+"' with checksum: "+f+" but received: "+h.substring(2,f.length)+"instead. Attemp to refresh the application?")&&L():d(j)};(g?K:p)(a.uri,b,c)}function D(a){var b=a.data,a=a.source.window,c,g,d,f;for(c=0,g=m.length;c<g;c++)if(d=m[c],f=d.iframe,f.contentWindow===a){d.callback(b);i.body.removeChild(f);m.splice(c,1);break}}function E(a){"undefined"!=
typeof console&&(console.error||console.log).call(console,a)}function s(a,b){try{l.setItem(a,b)}catch(c){if(c.code==c.QUOTA_EXCEEDED_ERR){var g=t.assets.map(function(a){return a.key}),d=0,f=l.length,h=!1,j;for(g.push(t.key);d<=f-1;)j=l.key(d),-1==g.indexOf(j)?(l.removeItem(j),h=!0,f--):d++;h&&s(a,b)}}}function u(a){try{return l.getItem(a)}catch(b){return null}}function L(){F||(F=!0,p(o,function(a){(new r(a)).store();n.location.reload()}))}function G(a){function b(a,b){var d=a.collection,e=a.index,
g=d.length,f;a.ready=!0;a.content=b;for(f=e-1;0<=f;f--)if(a=d[f],!a.ready||!a.evaluated)return;for(f=e;f<g;f++)if(a=d[f],a.ready)a.evaluated||c(a);else break}function c(a){a.evaluated=!0;if("js"==a.type)try{eval(a.content)}catch(b){E("Error evaluating "+a.uri+" with message: "+b)}else{var c=i.createElement("style"),e;c.type="text/css";c.textContent=a.content;"id"in a&&(c.id=a.id);"disabled"in a&&(c.disabled=a.disabled);e=document.createElement("base");e.href=a.path.replace(/\/[^\/]*$/,"/");w.appendChild(e);
w.appendChild(c);w.removeChild(e)}delete a.content;0==--f&&g()}function g(){function c(){d&&b()}function b(){var a=q.onUpdated||B;if("onSetup"in q)q.onSetup(a);else a()}function f(){l.store();e.forEach(function(a){s(a.key,a.content)});b()}var e=[],d=!1,g=!1,k=function(){g=!0},i=function(){h.swapCache();d=!0;k()},m;n.removeEventListener("message",D,!1);h.status==h.UPDATEREADY?i():h.status==h.CHECKING||h.status==h.DOWNLOADING?(h.onupdateready=i,h.onnoupdate=h.onobsolete=k):k();!1!==navigator.onLine&&
p(o,function(b){t=l=new r(b);var d;l.assets.forEach(function(b){d=a.getAsset(b.uri);(!d||b.version!==d.version)&&e.push(b)});m=e.length;0==m?g?c():k=c:e.forEach(function(b){function c(){C(b,function(a){b.content=a;0==--m&&(g?f():k=f)})}var d=a.getAsset(b.uri),e=b.path,h=b.update;!d||!h||null===u(b.key)||"delta"!=h?c():p("deltas/"+e+"/"+d.version+".json",function(a){try{var c=b,d;var e=u(b.key),h=z(a),a=[],j,i,l;if(0===h.length)d=e;else{for(i=0,l=h.length;i<l;i++)j=h[i],"number"===typeof j?a.push(e.substring(j,
j+h[++i])):a.push(j);d=a.join("")}c.content=d;0==--m&&(g?f():k=f)}catch(n){E("Malformed delta content received for "+b.uri)}},c)})})}var d=a.assets,f=d.length,l;t=a;H("message",D,!1);0==f?g():d.forEach(function(a){var c=u(a.key);null===c?C(a,function(c){s(a.key,c);b(a,c)},function(){b(a,"")}):b(a,c)})}function I(a){null!==i.readyState.match(/interactive|complete|loaded/)?G(a):H("DOMContentLoaded",function(){G(a)},!1)}var B=function(){},m=[],i=n.document,w=i.head,H=n.addEventListener,l=n.localStorage,
h=n.applicationCache,z=JSON.parse,y=i.createElement("a"),x=i.location,A=x.origin+x.pathname+x.search,o="app.json",F=!1,t;if("undefined"===typeof q)var q=n.Ext={};q.blink=function(a){var b=u(a.id+"-"+A+o);v("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");v("apple-mobile-web-app-capable","yes");v("apple-touch-fullscreen","yes");b?(a=new r(b),I(a)):p(o,function(b){a=new r(b);a.store();I(a)})}})(this);
;Ext.blink({"id":"3a867610-670a-11e1-a90e-4318029d18bb"})</script>
</head>
<body>
</body>
</html>
雖然只是經(jīng)過了簡(jiǎn)單混淆，可還是看得人很凌亂，不過我們可以輕易地找到app.json這個(gè)字符串。
對(duì)比之后，你會(huì)發(fā)現(xiàn)官網(wǎng)部署的幾乎所有例子都采用了這一段代碼，而且沒有一點(diǎn)的區(qū)別。那么理論上這段代碼就應(yīng)該是通用的，所以我嘗試在自己的頁(yè)面中同樣拷貝加入這一段代碼，但可悲的事實(shí)告訴我NO！想不通啊想不通……
當(dāng)然活人不能被尿憋死，這段代碼不行我就把microloader文件夾下三個(gè)js文件中的代碼依次拷貝過來測(cè)試，最后只有development.js這個(gè)文件中的代碼有效（因?yàn)镃ode-behind模式就只有它能行，所以這個(gè)結(jié)果是顯而易見的），于是最終的JsCodeInline.html代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Microloader</title>
<script type="text/javascript">
(function () {
function write(content) {
document.write(content);
}
function meta(name, content) {
write('<meta name="' + name + '" content="' + content + '">');
}
var xhr = new XMLHttpRequest();
xhr.open('GET', 'app.json', false);
xhr.send(null);
var options = eval("(" + xhr.responseText + ")"), scripts = options.js || [], styleSheets = options.css || [], i, ln, path;
meta('viewport', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no');
meta('apple-mobile-web-app-capable', 'yes');
meta('apple-touch-fullscreen', 'yes');
for (i = 0, ln = styleSheets.length; i < ln; i++) {
path = styleSheets[i];
if (typeof path != 'string') {
path = path.path;
}
write('<link rel="stylesheet" href="' + path + '">');
}
for (i = 0, ln = scripts.length; i < ln; i++) {
path = scripts[i];
if (typeof path != 'string') {
path = path.path;
}
write('<script src="' + path + '"></' + 'script>');
}
})();
</script>
</head>
<body>
</body>
</html>
當(dāng)然了，app.json和app.js文件沒有任何不同，最終測(cè)試效果也完全一致。
| 結(jié)語： |
到這里，我們完整解析了全部的ST2框架加載模式和手段，希望通過這篇文章可以幫助你理解ST2帶來的新功能。
為了方便大家自己調(diào)試，在這里奉上此Demo的全部源碼：猛擊這里下載
注意：此系列文章屬博主原創(chuàng)，轉(zhuǎn)載請(qǐng)注明作者信息和原始鏈接，謝謝合作。
Sencha Touch 交流 QQ 群 213119459 歡迎您的加入。
浙公網(wǎng)安備 33010602011771號(hào)