最近有一项目，需要分别开发安卓和IOS版本，原计划是招两个开发组，并行开发，但成本太高，而且时间上也来不及，就想试用用PHONEGAP打包WEB应用。
现在用的比较多的是jquery mobile和sencha，一个是jquery，一个是 ext，从难易度来说，jquery很容易上手，ext基本上全是JS，代码量很大。
本章主要讲解jquery mobile的应用，一个小DEMO，网站
界面如下：
http://www.8757.com/mobile/
代码上，其实就三个文件，一个html文件，两个JS文件，数据从云服务器上获取JSON，然后进行解析。
先来看一下index.html的代码
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="utf-8">
<title>佰奇网</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="http://www.8757.com/assets/images/favicon.png" />
<link type="image/x-icon" rel="shortcut icon" href="http://www.8757.com/assets/images/favicon.png" />
<link rel="stylesheet" href="assets/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="assets/jquery.mobile.scrollview.css" />
<link rel="stylesheet" href="assets/css.css" />
<script src="assets/jquery-1.6.4.min.js"></script>
<script src="assets/jquery.mobile-1.0.min.js"></script>
<script src="assets/jquery.mobile.scrollview.js"></script>
<script src="assets/jquery.easing.1.3.js"></script>
<script src="assets/scrollview.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = 'none'
$.mobile.loadingMessage = '加载中...'
$.mobile.page.prototype.options.backBtnText = '后退'
$.mobile.page.prototype.options.addBackBtn= true
});
</script>
<script src="/phonegap.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="index" class="type-interior" >
<div data-role="header" data-theme="b" data-nobackbtn="true" data-position="fixed">
<a href="login.html" data-rel="dialog">登录</a>
<h1>佰奇网</h1>
<a href="reg.html" data-rel="dialog">注册</a>
</div>
<div data-role="content" data-inset="true" class="ui-scrolllistview" id="scroller" style="padding:0px; ">
<select name="type" id="select_type" data-native-menu="false">
<option value="1" selected>推荐宝贝</option>
<option value="2">人气宝贝</option>
<option value="3">最新加入</option>
</select>
<ul data-role="listview" style="margin:0px;">
</ul>
<div style="text-align:center" id="div_loading">
<img src="assets/images/ajax-loader.png"/>
</div>
<div id="getMore">更多...</div>
<!--<a href='#' id='listmore' data-role='button'>更多...</a> -->
</div>
<div data-role="footer" id="footer" data-position="fixed">
<div data-role="navbar" data-theme="a" >
<ul>
<li><a href="#" data-icon="home" class="ui-btn-active" data-iconpos="top" data-theme="b">宝贝导航</a></li>
<li><a href="siteNav.html" data-icon="search" data-iconpos="top" data-theme="b">站点导航</a></li>
<li><a href="#" data-icon="grid" data-iconpos="top" data-theme="b">音频导航</a></li>
<li><a href="#" data-icon="star" data-iconpos="top" data-theme="b">宝贝收藏</a></li>
<li><a href="#" data-icon="info" data-iconpos="top" data-theme="b">我的资料</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="js/8757.core.js"></script>
<script type="text/javascript" src="js/8757.app.js"></script>
</body>
</html>
稍为讲解一下：
<!DOCTYPE html>
<html manifest="cache.manifest">
其中cache.manifest表明页面将缓存，缓存配置在cache.manifest文件里，有兴趣的同学可下载附近自行研究。
接下来就是JS文件和样式文件的引用了，估计都能看的懂
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = 'none'
$.mobile.loadingMessage = '加载中...'
$.mobile.page.prototype.options.backBtnText = '后退'
$.mobile.page.prototype.options.addBackBtn= true
});
</script>
这是jquery mobile的配置，关于这方面的资料，大家看这里，会更清楚了
http://www.jqmapi.com/
接着就是jqm的page，page里分别是head,content,foot，先来看head
<div data-role="header" data-theme="b" data-nobackbtn="true" data-position="fixed">
<a href="login.html" data-rel="dialog">登录</a>
<h1>佰奇网</h1>
<a href="reg.html" data-rel="dialog">注册</a>
</div>
一个标题，加两个按钮，这个按钮链接的方式是窗口弹出式。
接着content
<div data-role="content" data-inset="true" class="ui-scrolllistview" id="scroller" style="padding:0px; ">
<select name="type" id="select_type" data-native-menu="false">
<option value="1" selected>推荐宝贝</option>
<option value="2">人气宝贝</option>
<option value="3">最新加入</option>
</select>
<ul data-role="listview" style="margin:0px;">
</ul>
<div style="text-align:center" id="div_loading">
<img src="assets/images/ajax-loader.png"/>
</div>
<div id="getMore">更多...</div>
</div>
content里有三个部分，一个是select，后面讲js时会讲到他的作用，接着是listview，这里用scrollview，有很多同学问怎么使用scrollview,其实很简单，在头文件里引用这些文件即可
<link rel="stylesheet" href="assets/jquery.mobile.scrollview.css" />
<script src="assets/jquery.mobile.scrollview.js"></script>
<script src="assets/jquery.easing.1.3.js"></script>
<script src="assets/scrollview.js"></script>
这样，就可以固定底部，然后用手拖放可以滚动中间的listview，类似于微博效果了。
接下来是foot
<div data-role="footer" id="footer" data-position="fixed">
<div data-role="navbar" data-theme="a" >
<ul>
<li><a href="#" data-icon="home" class="ui-btn-active" data-iconpos="top" data-theme="b">宝贝导航</a></li>
<li><a href="siteNav.html" data-icon="search" data-iconpos="top" data-theme="b">站点导航</a></li>
<li><a href="#" data-icon="grid" data-iconpos="top" data-theme="b">音频导航</a></li>
<li><a href="#" data-icon="star" data-iconpos="top" data-theme="b">宝贝收藏</a></li>
<li><a href="#" data-icon="info" data-iconpos="top" data-theme="b">我的资料</a></li>
</ul>
</div>
</div>
底部代码也很明白，navbar表明这是个菜单，需要说明的是，navbar一行最多只能显示5个，5个后，jqm 会自动进行换行。
最后来看一下，数据渲染这块，也就是两个js文件
<script type="text/javascript" src="js/8757.core.js"></script>
<script type="text/javascript" src="js/8757.app.js"></script>
其中8757.core.js代码如下
// 全局命名空间
var convage_mobile = {
author : 'Convage Inc.',
version: '1.0',
website: 'http://www.8757.com'
}
// 工具包
convage_mobile.utils = {
setParam : function (name,value){
localStorage.setItem(name,value)
},
getParam : function(name){
return localStorage.getItem(name)
},
uuUrlGen: function (url){
var uuUrl;
var xcharset = document.all?"GBK":"UTF-8";
if (url.indexOf("?") >= 0){
uuUrl = url + "&xcharset=" + xcharset + "&ran=" + Math.random();
}else{
uuUrl = url + "?xcharset=" + xcharset + "&ran=" + Math.random();
}
return uuUrl;
}
}
// 业务控制中心，需应用实现
convage_mobile.controllers = {}
// 事件注册
convage_mobile.run = function(pages){
var pages = pages,
count = pages.length;
for(var i=0;i<count;i++){
var page = pages[i],
id = page.id
e_array = page.event.split(',')
for(var j=0; j <e_array.length;j++){
var e = e_array[j]
if($.trim(e).length == 0)
continue
$('#'+id).live(e, convage_mobile.controllers[id][e])
}
}
}
这里不是业务代码，基本上就是定义了一些函数。
8757.app.js
// 本地化命名空间
var utils = convage_mobile.utils,
controllers = convage_mobile.controllers,
website = convage_mobile.website,
cpage = 1
// 模板
function tplMmInfo(array, items){
for(var i in items){
var item = items[i]
var memo = ' 人气: ' + item.allVisiteCount + ' 城市： ' + item.nowCity + ' 星座: ' + item.constellation
var li = '<li data-icon="false"><a href="#discussion" data-id="'+ item.userId +'"><img src="'+ website + item.headPic +'"/><h3>' + item.nick + '</h3><p>'+ memo +'</p></a></li>'
array.push(li)
}
}
var refreshList = function(clear_flag){
var $listview = $('#index').find('ul[data-role="listview"]')
$('#div_loading').css('display', 'block')
if(clear_flag){
$listview.html('')
}
$.getJSON(
utils.uuUrlGen(website + '/mclient/m!mmList.jhtml?callback=?'),
{
cpage: cpage,
type: $('#select_type').val()
},
function(data) {
var json = data[0]
var li_array = []
tplMmInfo(li_array, json.result)
if(clear_flag){
$listview.html(li_array.join(''))
}else{
$listview.append(li_array.join(''))
}
$listview.listview('refresh')
cpage ++
$('#div_loading').css('display', 'none')
}
);
}
controllers.index = {
pagecreate : function(event){
refreshList();
$("#getMore").bind( "click", function(event, ui) {
refreshList(false);
});
$("#select_type").bind( "change", function(event, ui) {
cpage = 1;
refreshList(true);
});
}
}
var pages = [
{id: 'index', event:'pagecreate'}
]
convage_mobile.run(pages)
看代码，一般都是倒退，前面的var定义暂且忽略，最后一行
convage_mobile.run(pages)
是调用了core.js的run方法，然后回到这个文件研究一下这个方法，发现就是从pages里面一个个去注册事件，因为只是个DEMO，就写了index这个页面的渲染过程，发现他的event是pagecreate,就是当页面进入之时，要执行的方法，更多说明见：
http://www.jqmapi.com/api/events.html
注册的是这个事件
controllers.index = {
pagecreate : function(event){
refreshList(true);
$("#getMore").bind( "click", function(event, ui) {
refreshList(false);
});
$("#select_type").bind( "change", function(event, ui) {
cpage = 1;
refreshList(true);
});
}
}
第一步是刷新列表refreshList();然后又定义了两个事件监听，第一个是点“更多”时再刷新一次，第二个是选择select时刷新列表，分别对应content 里的三个部分。refreshList带了一个参数，我们来看一下代码
var refreshList = function(clear_flag){
var $listview = $('#index').find('ul[data-role="listview"]')
$('#div_loading').css('display', 'block')
if(clear_flag){
$listview.html('')
}
$.getJSON(
utils.uuUrlGen(website + '/mclient/m!mmList.jhtml?callback=?'),
{
cpage: cpage,
type: $('#select_type').val()
},
function(data) {
var json = data[0]
var li_array = []
tplMmInfo(li_array, json.result)
if(clear_flag){
$listview.html(li_array.join(''))
}else{
$listview.append(li_array.join(''))
}
$listview.listview('refresh')
cpage ++
$('#div_loading').css('display', 'none')
}
);
}
参数clear_flag发现是有两个用途，如果为true,listview清空，然后在getJson后，判断，如果为tue，则直接html，意思是替换listview代码，如果是false，则插入从云服务器上获取的数据，在业务上即分别对应了两个按钮，需要清空的是选择select，需要添加的是"更多..."
if(clear_flag){
$listview.html(li_array.join(''))
}else{
$listview.append(li_array.join(''))
}
剩下的JS代码就是解析 JSON了，多说无益了。我上传了附件，附件里包含了源代码，及已经打包好的APK，大家可自行研究。
另外要研究打包的，可看下面文章
http://www.html5mobi.com/discussion/167/phonegap-web-android
最后评价一下jqm吧，入门容易，但如果要开发的是app应用，真不行，速度是真慢，所以准备放弃jqm，转去研究sencha，过两天写一篇吧
- 大小: 38.9 KB
分享到：
相关推荐
微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信...
- **事件驱动**：jQuery Mobile 使用了大量的触控和页面事件，如`pagecreate`、`pageshow`和`swipe`等，来处理用户交互。 - **数据属性（data-attributes）**：通过添加特定的"data-"前缀的HTML属性，可以轻松地对...
在Cocos2d-x游戏开发框架中，ScrollView组件是一个非常重要的UI控件，它允许用户在有限的显示区域内滚动查看超出范围的内容。ScrollView通常用于显示大量数据或内容，如列表、菜单或者长文本。本教程将详细介绍如何...
jQuery提供了一些插件，如`iScroll`或`jQuery Mobile Scrollview`，能够实现平滑的滚动效果，并且可以控制滚动速度和方向，提升用户感知的质量。 4. **Ajax加载**：为了减少页面加载时间并提供无缝的浏览体验，...
在这个“微信小程序学习demo：视图控件View、ScrollView、Swiper.zip”中，我们将深入探讨微信小程序中的三个重要视图组件——View、ScrollView和Swiper，以及如何通过它们来构建用户界面。 首先，View是微信小程序...
jQuery Mobile Scroll 是一个专为移动设备优化的滚动插件，旨在提供流畅且具有吸引力的滚动体验，尤其适用于触摸屏设备，如 iPhone、iPad 和其他基于 WebKit 的智能设备，同时也支持非触摸屏设备如个人电脑。...
本文将深入探讨如何将ListView和ScrollView进行整合，以及在实际开发中可能遇到的问题和解决方案。 首先，我们要理解为什么有时需要将两者结合。ListView的优点在于它可以高效地处理大量数据，通过复用视图...
在这个"微信小程序学习demo：视图控件View、ScrollView、Swiper.rar"压缩包中，包含了一系列关于微信小程序中三个重要视图组件的学习示例：View、ScrollView和Swiper。接下来，我们将深入探讨这三个组件的特点和用法...
在Android开发中，有时我们需要在一个布局中同时使用ViewPager和ScrollView，以实现丰富的滑动和滚动交互效果。"viewpager和scrollview共存 悬浮条显示"这个话题就是关于如何在这样的场景下处理两者之间的冲突，并...
总结来说，TableLayout和ScrollView是Android开发中用于构建复杂界面的两种重要布局工具。TableLayout提供了表格化的布局方式，方便组织数据和控件，而ScrollView则保证了内容的可滚动性，确保所有内容都能被用户...
ScrollView是移动应用开发中的一个关键组件，特别是在 Titanium 框架中。Titanium 是一个开源的 JavaScript 框架，允许开发者使用 JavaScript 来构建原生的 iOS 和 Android 应用程序。ScrollView 是一个可滚动的视图...
在cocos2d-x这个流行的跨平台2D游戏开发框架中，`ScrollView`是一个非常重要的组件，它允许用户在屏幕内滚动查看超出可视区域的内容。`ScrollView`在各种界面设计中都发挥着关键作用，例如长列表、滚动菜单或者图片...
在cocos2d-x游戏开发框架中，ScrollView是一个非常重要的组件，它允许用户在有限的显示区域内滚动查看超出范围的内容。ScrollView通常用于实现列表、菜单或者长内容的滚动浏览，对于移动设备尤其常见，因为屏幕空间...
Unity是游戏开发领域广泛使用的3D和2D游戏引擎，其UGUI系统为开发者提供了丰富的界面元素和交互设计工具。在Unity中，ScrollView组件（ScrollRect）是实现滚动列表的关键，它允许用户在超出屏幕范围的内容中进行滚动...
在Android开发中，RecyclerView和ScrollView是两种常用的布局组件。RecyclerView以其高效的列表滚动性能和灵活的适配器机制，成为处理大数据列表的首选。而ScrollView则适用于需要全屏滚动的场景。然而，当两者同时...
jQuery Mobile（jqMobile）是jQuery库的一个扩展，专门用于构建响应式和触控友好的移动Web应用程序。它提供了一套完整的UI组件和交互模式，使得开发者能够快速地创建跨平台的移动应用，无需深入学习原生平台的开发...
在Android开发中，ScrollView是一个非常常见的布局控件，它允许用户滚动其内容，特别是当内容超过屏幕大小时。ScrollView滑动悬停效果是指在ScrollView滚动过程中，某个特定视图（如一个按钮或图像）始终保持在屏幕...
Cocos2d-x是一款流行的开源游戏开发框架，广泛用于创建2D游戏、应用程序以及互动内容。在cocos2d-x中，ScrollView是一个重要的组件，它允许用户在屏幕内滚动查看超出可视区域的内容，这对于长列表或者大图像的展示...
在Android开发中，有时我们需要在一个布局中展示大量的内容，这时我们可能会使用到ScrollView。ScrollView是一个可以垂直滚动的容器，它可以包含一个直接子视图，并确保该子视图完全可见。然而，当我们在ScrollView...