Titanium视频教程:使用Ti+jQuery Mobile开发

移动开发
前段时间在群里讨论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框架文件路径!!)

  1. <!DOCTYPE html> 
  2.  
  3. <html> 
  4.  
  5. <head> 
  6.  
  7. <meta charset="utf-8"> 
  8.  
  9. <meta name="viewport" content="width=device-width, initial-scale=1"> 
  10.  
  11. <title>开发jQuery Mobile和Titanium混合应用</title> 
  12.  
  13. <link rel="stylesheet"  href="./jquery.mobile-1.0.min.css" /> 
  14.  
  15. <script src="./jquery-1.6.4.js"></script> 
  16.  
  17. <script src="./jquery.mobile-1.0.min.js"></script> 
  18.  
  19. </head>  
  20.  
  21. <body>  
  22.  
  23.   
  24.  
  25. <div data-role="page"> 
  26.  
  27. <div data-role="header"> 
  28.  
  29. <h1>标题</h1> 
  30.  
  31. </div> 
  32.  
  33. <div data-role="content"> 
  34.  
  35. 正文 
  36.  
  37. </div> 
  38.  
  39. <div data-role="footer"> 
  40.  
  41. <h3>脚注</h3> 
  42.  
  43. </div> 
  44.  
  45. </div> 
  46.  
  47.   
  48.  
  49. </body> 
  50.  
  51. </html>  

四、还有一步!!! 

在tiapp.xml里添加下面一段代码

  1. <property name="ti.android.compilejs" type="bool">false</property> 

如图

OK!***运行程序!看效果吧!

注意:在真机魅族M9中调试后校长发现jquerymobile在页面跳转后依然会闪屏所以.......jquerymobile在android中的效果依然....不过好似有方法解决该问题--修改CSS代码,取消页面切换的特效,不过校长现在扎堆于titanium,无暇顾及jquerymobile,具体的解决方法请google吧!有谁知道解决方案请留言!

责任编辑:佚名 来源: 移动web开发社区
相关推荐

2012-04-19 16:33:03

Titanium视频更改默认图片

2012-04-19 16:41:24

Titanium视频实现页面跳转

2012-04-20 13:59:41

Titanium视频window

2012-04-19 16:02:19

Titanium StTitaniumUI Fundamen

2012-02-14 09:33:14

Titanium MoTitaniumUbuntu 10.0

2012-02-09 17:07:50

Titanium MoTitaniumWindows 7

2011-09-05 10:49:14

Sencha ToucjQuery MobiHTML5

2012-05-25 13:12:57

TitaniumMobile WebHTML5

2011-09-02 10:41:51

2011-09-05 16:43:00

jQuery Mobi

2012-04-20 11:07:12

Titanium

2012-02-09 16:45:41

2011-09-06 16:16:48

jQuery Mobi

2012-04-19 12:58:26

TitaniumJSS

2011-09-02 10:59:10

jQuery Mobi

2011-07-21 14:57:34

jQuery Mobi

2012-03-28 09:40:55

安卓开发入门教程视频

2012-05-23 09:46:15

Titanium MoTitanium

2011-07-20 13:37:14

2011-09-02 14:29:20

jQuery Mobi主题
点赞
收藏

51CTO技术栈公众号