摘要:本文将带你了解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频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号