-
移动开发
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
白羽
2018-06-26
来源 ：网络
阅读 1061
评论 0
摘要：本文将带你了解Web App开发之使用jquerymobile，希望本文对大家学WEBAPP有所帮助。
前言
.什么是jquery mobile ？
jQuery Mobile 是创建移动 web 应用程序的框架； 适用于所有流行的智能手机和平板电脑。
什么项目？
提供天气查询和公交信息查询的便民服务AppLink
正文
1.看代码，注释详细到爆炸，happy.php
[php] view plain copy
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <!--
6. 作者：@xiaoping //blog.csdn.net/xiaoping0915
7. 时间：2017-02-27
8. 描述：提供天气查询和公交信息查询的便民服务
9. -->
10. <!--解决移动设备的适配问题
11. -->
12. <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
13.
14. <title></title>
15. <style type="text/css">
16. #index,#bus {
17. font-family: "微软雅黑";
18. }
19. </style>
20. <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
21.
22. </head>
23. <body>
24. <div data-role="page" id="index">
25. <div data-role="header" data-position="fixed">
26. <h1>天气查询</h1>
27. </div>
28. <div data-role="content">
29. <div class="ui-field-contain">
30. <label>城市</label>
31. <p id="tips" style="color: red;" hidden="hidden">填写您所要搜索的城市名</p>
32. <input type="text" id="keyword" />
33. </div>
34. <a id="btnSearch" data-role="button" data-icon="search" data-iconpos="right">搜索</a>
35. <div>
36. <ul id="result" data-role="listview" data-inset="true">
37. </ul>
38. <br>
39. <table id="table" class="ui-responsive table-stroke" data-role="table">
40.
41. </table>
42.
43. </div>
44. </div>
45. <div data-role="footer" data-position="fixed">
46. <div data-role="navbar">
47. <ul>
48. <li>
49. <a href="#index" id="index" class="ui-btn-active" data-icon="home">查天气</a>
50. </li>
51. <li>
52. <a href="#bus" id="bus" data-icon="star">查公交</a>
53. </li>
54. <li>
55. <a href="#" id="share" data-icon="gear">分享</a>
56. </li>
57. </ul>
58. </div>
59. </div>
60. </div>
61.
62. <div data-role="page" id="bus">
63. <div data-role="header" data-position="fixed">
64. <h1>公交查询</h1>
65. </div>
66. <div data-role="content">
67. <div class="ui-field-contain">
68. <label>城市</label>
69. <p id="tip1" style="color: red;" hidden="hidden">填写您所要搜索的城市名</p>
70. <input type="text" id="city" /><br />
71. <label>线路</label>
72. <p id="tip2" style="color: red;" hidden="hidden">填写您所要搜索的路线</p>
73. <input type="text" id="road" />
74. </div>
75. <a id="btnSearchBus" data-role="button" data-icon="search" data-iconpos="right">搜索</a>
76. <div>
77. <ul id="resultBus" data-role="listview" data-inset="true">
78. </ul>
79. <br>
80.
81. </div>
82. </div>
83. <div data-role="footer" data-position="fixed">
84. <div data-role="navbar">
85. <ul>
86. <li>
87. <a href="#index" id="index" data-icon="home">查天气</a>
88. </li>
89. <li>
90. <a href="#bus" id="bus" class="ui-btn-active" data-icon="star">查公交</a>
91. </li>
92. <li>
93. <a href="#" id="share" data-icon="gear">分享</a>
94. </li>
95. </ul>
96. </div>
97. </div>
98. </div>
99. <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
100. <script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
101. <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
102. <script type="text/javascript">
103. //服务端获取ip 上线使用
104. var client_ip = '<?php echo $_SERVER['REMOTE_ADDR'] ?>';
105. //前端测试使用 上线屏蔽
106. //var client_ip = '59.172.105.58';
107. //cors跨域代理 了解详情 -> //blog.csdn.net/xiaoping0915/article/details/57557206
108. var cors_url = '//proxy.e12e.com/?';
109. //获取ip接口
110. var ip_url = '//ip.taobao.com/service/getIpInfo.php?ip=';
111. //天气信息接口
112. var m_url = '//op.juhe.cn/onebox/weather/query?key=3611a1e75f91ff1544fc9f84ec489021&dtype=json&cityname=';
113. //公交信息接口
114. var bus_url = '//op.juhe.cn/189/bus/busline?dtype=&key=1198ca7b9b559f7536b5b824c7fae885&city=';
115. //客户所在城市
116. var client_city ;
117. //在index页面创建前去请求接口拿数据
118. $(document).on("pagebeforecreate","#index", function() {
119. $.getJSON(cors_url + ip_url + client_ip, function(data, status) {
120. //异步调用ip接口获取城市信息
121. client_city = data.data.city;
122. $('#keyword').val(data.data.city);
123. $('#city').val(client_city);
124. getCityWeather(data.data.city);
125. });
126. });
127. //在index页面第一次加载完成后执行
128. $(document).on('pageinit', "#index", function() {
129. //校验input是否合法后搜索天气
130. function sw(){
131. var $key = $('#keyword').val();
132. var $tips = $('#tips');
133. if($key === '') {
134. $tips.fadeIn();
135. return;
136. }
137. $tips.fadeOut();
138. //显示正在加载的图片
139. $.mobile.loading("show");
140. //查询天气
141. getCityWeather($key);
142. }
143. //绑定按钮点击和回车键按下的事件
144. $('#btnSearch').on('click', function() {
145. sw();
146. });
147. $(this).on('keypress',function(even){
148. if(even.keyCode === 13){
149. sw();
150. };
151. });
152. });
153. //在bus页面第一次加载完成后执行
154. $(document).on('pageinit','#bus',function(){
155. //校验input是否合法后搜索公交路线信息
156. function sbus(){
157. var $city = $('#city').val();
158. var $road = $('#road').val();
159. //var $
160. var $tip1 = $('#tip1');
161. var $tip2 = $('#tip2');
162. if($city === '') {
163. $tip1.fadeIn();
164. return;
165. }else if($road === ''){
166. $tip2.fadeIn();
167. return;
168. }
169. $tip1.fadeOut();
170. $tip2.fadeOut();
171. $.mobile.loading("show");
172. //查询公交
173. getCityBus($city,$road);
174. }
175. //绑定按钮点击和回车键按下的事件
176. $('#btnSearchBus').on('click', function() {
177. sbus();
178. });
179. $(this).on('keypress',function(even){
180. if(even.keyCode === 13){
181. sbus();
182. };
183. });
184. });
185. //天气查询
186. function getCityWeather(cityName) {
187. //拿到list和table元素并清空
188. var $list = $('#result');
189. $list.html('');
190. var $table = $('#table');
191. $table.html('');
192. //异步调用查询天气接口
193. $.getJSON(cors_url + m_url + cityName, function(data, status) {
194. //回调后让加载的小菊花隐藏起来
195. $.mobile.loading("hide");
196. //JSON对象的操作方式就是 使用 . 的方式链式寻找
197. if(data.error_code != 0) {
198. //如果返回数据中error_code 不等于 0 则说明调用接口不成功没有得到目标城市的天气信息
199. alert(data.reason);
200. return;
201. }
202. //拼接我们所需要的信息
203. var $res = '<li><h1>' + data.result.data.realtime.city_name + ' ' + data.result.data.pubdate + ' ' + data.result.data.pubtime + '刷新</h1></li>' +
204. '<li>天气 ' + data.result.data.realtime.weather.info + '</li>' +
205. '<li>气温 ' + data.result.data.realtime.weather.temperature + '℃</li>' +
206. '<li>湿度 ' + data.result.data.realtime.weather.humidity + 'RH</li>' +
207. '<li>风向 ' + data.result.data.realtime.wind.direct + ' ' + data.result.data.realtime.wind.power + '</li>' +
208. '<li><h3>PM2.5</h3></li>' +
209. '<li>指数 ' + data.result.data.pm25.pm25.pm25 + ' 级别 ' + data.result.data.pm25.pm25.level + ' ' + data.result.data.pm25.pm25.quality + '</li>' +
210. '<li>详情 ' + data.result.data.pm25.pm25.des + '</li>';
211.
212. var $tbl = '<thead>' +
213. '<tr>'+
214. '<th data-priority="6">星期</th>'+
215. '<th>天气</th>'+
216. '<th data-priority="1">均温</th>'+
217. '<th data-priority="2">风向</th>'+
218. '<th data-priority="3">风级</th>'+
219. '</tr>'+
220. '</thead><tbody>' ;
221. //遍历一个JsonArray
222. $(data.result.data.weather).each(function (index, obj) {
223. $tbl +='<tr>' +
224. '<td>周'+obj.week+'</td>' +
225. '<td>'+obj.info.day[1]+'</td>'+
226. '<td>'+obj.info.day[2]+'℃</td>' +
227. '<td>'+obj.info.day[3]+'</td>' +
228. '<td>'+obj.info.day[4]+'</td>'+
229. '<tr/>';
230. });
231. $tbl+='</tbody>';
232. //填充数据并刷新样式
233. $list.append($res).listview("refresh");
234. $table.append($tbl).table('refresh');
235. });
236. }
237. //查询公交信息
238. function getCityBus(cName,roadNum){
239. //拿到list元素并清空
240. var $list = $('#resultBus');
241. $list.html('');
242. //异步调用查询公交信息接口
243. $.getJSON(cors_url + bus_url + cName + '&bus=' + roadNum,function(data, status){
244. //隐藏小菊花
245. $.mobile.loading("hide");
246. if(data.error_code != 0) {
247. alert(data.reason);
248. return;
249. }
250. //获得需要的数据并填充
251. var $res = '<li><h1>' + data.result[0].key_name + '路 ' + data.result[0].terminal_name + '~' + data.result[0].front_name + '</h1></li>';
252. $(data.result[0].stationdes).each(function (index, obj) {
253. $res += '<li> 第' + obj.stationNum + '站： ' + obj.name + '</li>';
254. });
255. $list.append($res).listview("refresh");
256. });
257. }
258. </script>
259.
260. </body>
261.
262. </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 = '//proxy.e12e.com/?'; 了解详情
（c）优化页面，提升页面加载速度？
将script标签内容后置到</body> 结束标签之前
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
