【WebApp】使用jquerymobile制作的HTML5 Web App

前言

0.什么是jquery mobile ?

jQuery Mobile 是创建移动 web 应用程序的框架; 适用于所有流行的智能手机和平板电脑。

1.什么项目?

提供天气查询和公交信息查询的便民服务AppLink

正文


0.按照惯例上图



1.看代码,注释详细到爆炸,happy.php
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--
        	作者:@xiaoping  http://blog.csdn.net/xiaoping0915
        	时间:2017-02-27
        	描述:提供天气查询和公交信息查询的便民服务
        -->
        <!--解决移动设备的适配问题
        -->
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
       
		<title></title>
		<style type="text/css">
			#index,#bus {
				font-family: "微软雅黑";
			}
		</style>
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
		
	</head>
	<body>
		<div data-role="page" id="index">
			<div data-role="header" data-position="fixed">
				<h1>天气查询</h1>
			</div>
			<div data-role="content">
				<div class="ui-field-contain">
					<label>城市</label>
					<p id="tips" style="color: red;" hidden="hidden">填写您所要搜索的城市名</p>
					<input type="text" id="keyword" />
				</div>
				<a id="btnSearch" data-role="button" data-icon="search" data-iconpos="right">搜索</a>
				<div>
					<ul id="result" data-role="listview" data-inset="true">
					</ul>
					<br>
					<table id="table" class="ui-responsive  table-stroke" data-role="table">
						
					</table>
					
				</div>
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li>
							<a href="#index" id="index"  class="ui-btn-active" data-icon="home">查天气</a>
						</li>
						<li>
							<a href="#bus" id="bus"  data-icon="star">查公交</a>
						</li>
						<li>
							<a href="#"  id="share" data-icon="gear">分享</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<div data-role="page" id="bus">
			<div data-role="header" data-position="fixed">
				<h1>公交查询</h1>
			</div>
			<div data-role="content">
				<div class="ui-field-contain">
					<label>城市</label>
					<p id="tip1" style="color: red;" hidden="hidden">填写您所要搜索的城市名</p>
					<input type="text" id="city" /><br />
					<label>线路</label>
					<p id="tip2" style="color: red;" hidden="hidden">填写您所要搜索的路线</p>
					<input type="text" id="road" />
				</div>
				<a id="btnSearchBus" data-role="button" data-icon="search" data-iconpos="right">搜索</a>
				<div>
					<ul id="resultBus" data-role="listview" data-inset="true">
					</ul>
					<br>
					
				</div>
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li>
							<a href="#index" id="index" data-icon="home">查天气</a>
						</li>
						<li>
							<a href="#bus" id="bus" class="ui-btn-active" data-icon="star">查公交</a>
						</li>
						<li>
							<a href="#"  id="share" data-icon="gear">分享</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<script type="text/javascript">
			//服务端获取ip 上线使用
			var client_ip = '<?php echo $_SERVER['REMOTE_ADDR'] ?>';
			//前端测试使用 上线屏蔽
			//var client_ip = '59.172.105.58';
			//cors跨域代理  了解详情 -> http://blog.csdn.net/xiaoping0915/article/details/57557206
			var cors_url = 'http://proxy.e12e.com/?';
			//获取ip接口
			var ip_url = 'http://ip.taobao.com/service/getIpInfo.php?ip=';
			//天气信息接口
			var m_url = 'http://op.juhe.cn/onebox/weather/query?key=3611a1e75f91ff1544fc9f84ec489021&dtype=json&cityname=';
			//公交信息接口
			var bus_url = 'http://op.juhe.cn/189/bus/busline?dtype=&key=1198ca7b9b559f7536b5b824c7fae885&city=';
			//客户所在城市
			var client_city ;
			//在index页面创建前去请求接口拿数据
			$(document).on("pagebeforecreate","#index", function() {
				$.getJSON(cors_url + ip_url + client_ip, function(data, status) {
					//异步调用ip接口获取城市信息
					client_city = data.data.city;
					$('#keyword').val(data.data.city);
					$('#city').val(client_city);
					getCityWeather(data.data.city);
				});
			});
			//在index页面第一次加载完成后执行
			$(document).on('pageinit', "#index", function() {
				//校验input是否合法后搜索天气
				function sw(){
					var $key = $('#keyword').val();
					var $tips = $('#tips');
					if($key === '') {
						$tips.fadeIn();
						return;
					}
					$tips.fadeOut();
					//显示正在加载的图片
					$.mobile.loading("show");
					//查询天气
					getCityWeather($key);
				}
				//绑定按钮点击和回车键按下的事件
				$('#btnSearch').on('click', function() {
					sw();
				});
				$(this).on('keypress',function(even){
					if(even.keyCode === 13){
						sw();
					};
				});
			});
			//在bus页面第一次加载完成后执行
			$(document).on('pageinit','#bus',function(){
				//校验input是否合法后搜索公交路线信息
				function sbus(){
					var $city = $('#city').val();
					var $road = $('#road').val();
					//var $
					var $tip1 = $('#tip1');
					var $tip2 = $('#tip2');
					if($city === '') {
						$tip1.fadeIn();
						return;
					}else if($road === ''){
						$tip2.fadeIn();
						return;
					}
					$tip1.fadeOut();
					$tip2.fadeOut();
					$.mobile.loading("show");
					//查询公交
					getCityBus($city,$road);
				}
				//绑定按钮点击和回车键按下的事件
				$('#btnSearchBus').on('click', function() {
					sbus();
				});
				$(this).on('keypress',function(even){
					if(even.keyCode === 13){
						sbus();
					};
				});
			});
			//天气查询
			function getCityWeather(cityName) {
				//拿到list和table元素并清空
				var $list = $('#result');
				$list.html('');
				var $table = $('#table');
				$table.html('');
				//异步调用查询天气接口
				$.getJSON(cors_url + m_url + cityName, function(data, status) {
					//回调后让加载的小菊花隐藏起来
					$.mobile.loading("hide");
					//JSON对象的操作方式就是 使用 .  的方式链式寻找
					if(data.error_code != 0) {
						//如果返回数据中error_code 不等于 0 则说明调用接口不成功没有得到目标城市的天气信息
						alert(data.reason);
						return;
					}
					//拼接我们所需要的信息
					var $res = '<li><h1>' + data.result.data.realtime.city_name + ' ' + data.result.data.pubdate + ' ' + data.result.data.pubtime + '刷新</h1></li>' +
						'<li>天气  ' + data.result.data.realtime.weather.info + '</li>' +
						'<li>气温  ' + data.result.data.realtime.weather.temperature + '℃</li>' +
						'<li>湿度  ' + data.result.data.realtime.weather.humidity + 'RH</li>' + 
						'<li>风向  ' + data.result.data.realtime.wind.direct + ' ' + data.result.data.realtime.wind.power + '</li>' +
						'<li><h3>PM2.5</h3></li>' +
						'<li>指数  ' + data.result.data.pm25.pm25.pm25 + '  级别  ' + data.result.data.pm25.pm25.level + '  ' + data.result.data.pm25.pm25.quality + '</li>' +
						'<li>详情  ' + data.result.data.pm25.pm25.des + '</li>';
					
					var $tbl = '<thead>' +
							'<tr>'+
								'<th data-priority="6">星期</th>'+
								'<th>天气</th>'+
								'<th data-priority="1">均温</th>'+
								'<th data-priority="2">风向</th>'+
								'<th data-priority="3">风级</th>'+
							'</tr>'+
						'</thead><tbody>' ;
					//遍历一个JsonArray
					$(data.result.data.weather).each(function (index, obj) {
                        $tbl +='<tr>' +
                        	'<td>周'+obj.week+'</td>' + 
                        	'<td>'+obj.info.day[1]+'</td>'+
                        	'<td>'+obj.info.day[2]+'℃</td>' + 
                        	'<td>'+obj.info.day[3]+'</td>' +
                        	'<td>'+obj.info.day[4]+'</td>'+
                        	'<tr/>';
                    });
                    $tbl+='</tbody>';
                    //填充数据并刷新样式
					$list.append($res).listview("refresh");
					$table.append($tbl).table('refresh');
				});
			}
			//查询公交信息
			function getCityBus(cName,roadNum){
				//拿到list元素并清空
				var $list = $('#resultBus');
				$list.html('');
				//异步调用查询公交信息接口
				$.getJSON(cors_url + bus_url + cName + '&bus=' + roadNum,function(data, status){
					//隐藏小菊花
					$.mobile.loading("hide");
					if(data.error_code != 0) {
						alert(data.reason);
						return;
					}
					//获得需要的数据并填充
					var $res = '<li><h1>' + data.result[0].key_name + '路 ' + data.result[0].terminal_name + '~' + data.result[0].front_name + '</h1></li>';
					$(data.result[0].stationdes).each(function (index, obj) {
						$res += '<li> 第' + obj.stationNum + '站: '  + obj.name + '</li>';
					});
					$list.append($res).listview("refresh");
				});
			}
		</script>
		
	</body>

</html>
2.解决的问题
(a)关于移动设备适配问题?
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
(b)关于ajax跨域问题?
使用cors代理服务var cors_url = 'http://proxy.e12e.com/?'; 了解详情 
(c)优化页面,提升页面加载速度?
将script标签内容后置到</body> 结束标签之前

已标记关键词 清除标记
相关推荐
本书全面、系统地讲解了 HTML 5、CSS 3 和 jQuery Mobile 从 Web 界面设计到移动应用开发的各种技术和知识点。本书难度适中,知识结构严谨,内容由浅入深、从易到难,讲解通俗易懂,并注重读者兴趣的培养,在知识点介绍过程中配合大量案例进行讲解,以帮助读者提高实战技能。 本书共 20 章,分为四部分。第一部分为第 1 章内容,介绍了移动互联网与移动 Web 技术的相关知识,使读者对移动 Web 应用有一定的了解;第二部分为第 2 ~ 8 章,介绍了 HTML 5 各方面的知识点,重点介绍了绘图、音频和视频、新型表单等内容;第三部分为第 9 ~ 13 章,介绍了 CSS 样式各属性的设置和使用方法,包括CSS 3 中新增的弹性盒模型、多列布局、动画效果、渐变填充等内容;第四部分为第 14 ~ 20 章,介绍了 jQueryMobile 的相关知识,重点介绍了 jQuery Mobile 的页面、组件、主题、事件和插件等内容,并通过实用案例讲解了综合运用 HTML 5、CSS 3 和 jQuery Mobile 开发移动应用的方法和技巧。 本书附赠 1 张 DVD 光盘,其中提供了所有案例的源文件、素材以及相关的视频教程,为读者学习提供方便。 本书适合 Web 设计与开发的初学者和爱好者自学,也适合有一定 Web 前端开发基础的网页开发人员阅读,同时也可作为各院校相关专业的教材使用。 第1章 移动设备与Web技术 1 1.1 了解移动互联网 1 1.1.1 移动互联网的特点 1 1.1.2 移动互联网的发展方向 2 1.2 智能手机与手机浏览器 2 1.2.1 智能手机的发展 2 1.2.2 智能手机系统 3 1.2.3 智能手机浏览器 5 1.2.4 移动Web浏览器的特点 6 1.3 关于移动Web应用 6 1.3.1 移动Web应用的发展 6 1.3.2 基于Web的应用开发 7 1.3.3 基于HTML 5的移动应用 7 1.3.4 移动应用开发框架 8 1.4 移动应用开发注意事项 8 1.4.1 了解移动设备的屏幕尺寸和分辨率 8 1.4.2 确定移动应用的内容 8 1.4.3 简洁的HTML、CSS和JavaScript代码 9 1.4.4 测试移动应用 9 1.5 本章小结 9 第2章 初识HTML 5 10 2.1 了解HTML 5 10 2.1.1 HTML的发展 10 2.1.2 HTML 5概述 11 2.1.3 HTML 5的优势 11 2.2 HTML 5语法结构 12 2.2.1 HTML 5文档结构 12 2.2.2 HTML 5的基本语法 13 2.2.3 HTML 5中精简的头部 14 2.3 HTML 5中新增的标签 14 2.3.1 结构标签 14 2.3.2 文本标签 15 2.3.3 应用和辅助标签 15 2.3.4 进度标签 15 2.3.5 交互性标签 16 2.3.6 在文档和应用中使用的标签 16 2.3.7 <rudy>标签 16 2.3.8 其他标签 16 2.4 HTML 5的标准属性 17 2.5 HTML 5的事件属性 17 2.6 本章小结 18 第3章 使用网页基本标签 19 3.1 设置文字效果 19 3.1.1 文字样式<font>标签 19 3.1.2 文字加粗<b>和<strong>标签 21 3.1.3 文字倾斜<i>和<em>标签 21 3.1.4 文字下划线<u>标签 22 3.1.5 其他文字修饰标签 23 3.2 设置段落效果 25 3.2.1 文本分段<p>标签 25 3.2.2 文本分行<br>标签 25 3.2.3 标题<h1>至<h6>标签 27 3.2.4 水平线<hr>标签 28 3.2.5 文本对齐设置 29 3.3 创建列表 30 3.3.1 使用<ul>标签创建项目列表 30 3.3.2 使用<ol>标签创建编号列表 31 3.3.3 使用<dl>标签创建定义列表 33 3.4 插入图片 34 3.4.1 图像<img>标签 34 3.4.2 图文混排 36 3.5 创建超链接 38 3.5.1 什么是超链接 38 3.5.2 超链接<a>标签 38 3.5.3 相对链接和绝对链接 39 3.5.4 网页中的特殊超链接 40 3.5.5 超链接标签中的其他属性设置 43 3.6 本章小结 43 第4章 使用HTML 5结构标签 44 4.1 构建HTML 5页面主体内容 44 4.1
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:C马雯娟 返回首页