Titanium視頻教程：使用Ti+jQuery Mobile開發(fā)
下面為視頻
前段時(shí)間在群里討論titanium的時(shí)候提到了titanium能不能結(jié)合jquerymobile進(jìn)行混合開發(fā)應(yīng)用程序，當(dāng)時(shí)我說(shuō)是可以的，因?yàn)閠itanium可以使用webview組件。 但是titanium并不提倡使用外部的UI，因?yàn)檫@將導(dǎo)致性能的下降，而titanium鼓吹的就是性能至上，但有的時(shí)候我們還是需要基于HTML/CSS的UI，
在本節(jié)課我們將展示如何使用titanium+jquerymobile開發(fā)混合應(yīng)用
一、創(chuàng)建一個(gè)titaniummobile工程
把a(bǔ)pp.js里的代碼全部刪掉?。?/p>
加入以下代碼：
//創(chuàng)建窗口
varwin=Ti.UI.createWindow();
//創(chuàng)建webview
varwebView=Ti.UI.createWebView({
url:'/index.html'//鏈接到你的HTML首頁(yè)
});
//添加到webview到窗口
win.add(webView);
//打開窗口
win.open();
二、下載好jquerymobile框架并復(fù)制到工程Resource目錄下
三、創(chuàng)建index.html(注意導(dǎo)入的JQM框架文件路徑??！)
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>開發(fā)jQuery Mobile和Titanium混合應(yīng)用</title>
- <link rel="stylesheet" href="./jquery.mobile-1.0.min.css" />
- <script src="./jquery-1.6.4.js"></script>
- <script src="./jquery.mobile-1.0.min.js"></script>
- </head>
- <body>
- <div data-role="page">
- <div data-role="header">
- <h1>標(biāo)題</h1>
- </div>
- <div data-role="content">
- 正文
- </div>
- <div data-role="footer">
- <h3>腳注</h3>
- </div>
- </div>
- </body>
- </html>
四、還有一步?。。?nbsp;
在tiapp.xml里添加下面一段代碼
- <property name="ti.android.compilejs" type="bool">false</property>
如圖
OK！***運(yùn)行程序！看效果吧！
注意：在真機(jī)魅族M9中調(diào)試后校長(zhǎng)發(fā)現(xiàn)jquerymobile在頁(yè)面跳轉(zhuǎn)后依然會(huì)閃屏所以.......jquerymobile在android中的效果依然....不過(guò)好似有方法解決該問(wèn)題--修改CSS代碼，取消頁(yè)面切換的特效，不過(guò)校長(zhǎng)現(xiàn)在扎堆于titanium，無(wú)暇顧及jquerymobile，具體的解決方法請(qǐng)google吧！有誰(shuí)知道解決方案請(qǐng)留言！
