挪动web开发学习一：jquery mobile 和 scrollview的整合 _Web前端

移动web开发学习一：jquery mobile 和 scrollview的整合
最近有一项目，需要分别开发安卓和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 = '&nbsp;人气:&nbsp;' + item.allVisiteCount + '&nbsp;&nbsp;&nbsp;&nbsp;城市：&nbsp;' + item.nowCity + '&nbsp;&nbsp;&nbsp;&nbsp;星座:&nbsp; ' + 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，过两天写一篇吧

1 楼 woshifeixiaochuan 2012-01-10

很好了，很适合我，谢谢了

2 楼陈文景 2012-02-28

楼主你好想请教一下你在做这个demo的时候会不会遇到上下滚动屏幕时 header和footer会消失的问题呢。。。