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