Titanium視頻教程：使用Ti+jQuery Mobile開發

作者：校長阿四 2012-04-19 16:55:48

前段時間在群里討論titanium的時候提到了titanium能不能結合jquery mobile進行混合開發應用程序，當時我說是可以的，因為titanium可以使用webview組件。

下面為視頻

前段時間在群里討論titanium的時候提到了titanium能不能結合jquerymobile進行混合開發應用程序，當時我說是可以的，因為titanium可以使用webview組件。但是titanium并不提倡使用外部的UI，因為這將導致性能的下降，而titanium鼓吹的就是性能至上，但有的時候我們還是需要基于HTML/CSS的UI，

在本節課我們將展示如何使用titanium+jquerymobile開發混合應用

一、創建一個titaniummobile工程

把app.js里的代碼全部刪掉！！

加入以下代碼：

//創建窗口

varwin=Ti.UI.createWindow();

//創建webview

varwebView=Ti.UI.createWebView({

url:'/index.html'//鏈接到你的HTML首頁

});

//添加到webview到窗口

win.add(webView);

//打開窗口

win.open();

二、下載好jquerymobile框架并復制到工程Resource目錄下

三、創建index.html(注意導入的JQM框架文件路徑！！)

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title>開發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中調試后校長發現jquerymobile在頁面跳轉后依然會閃屏所以.......jquerymobile在android中的效果依然....不過好似有方法解決該問題--修改CSS代碼，取消頁面切換的特效，不過校長現在扎堆于titanium，無暇顧及jquerymobile，具體的解決方法請google吧！有誰知道解決方案請留言！

責任編輯：佚名來源：移動web開發社區

Titanium 視頻 jQuery Mobile