使用html5开发的web app

  • 时间:
  • 浏览:657
  • 来源:成都艾邦软件开发

框架提供集成环境,用于开发和设计网站以加快交付速度。有很多集成开发环境(IDE)让我们看看最顶级的框架。

HTML 5包含了各种先进的元素和新的元素,易于实现并增强了许多功能。这种标记语言对Web服务器和脚本语言非常友好。响应式设计通过HTML 5变得简单和互动。许多框架被发布以有效和高效地支持和实现HTML 5。框架提供集成环境,用于开发和设计网站以加快交付速度。有很多集成开发环境(IDE)让我们看看最顶级的框架。

1.JO

JO是简单的Web应用程序开发框架。这也支持javascript和css3。编码的交互区域使您可以更快更轻松地实现和编辑代码。此集成开发系统支持与各种浏览器(如Chrome,IE,iOS等)兼容。非常支持开发各种移动和Web应用程序。

2.iio Engine

iio Engine是一个基于HTML5的Web应用程序开发系统。这提供了一个环境,不仅有助于开发Web应用程序,而且还提供响应式应用程序。该框架包含许多强大的功能和一个调试系统,可帮助提供错误免费应用程序。它被设计为轻量级,可以在系统上更快地安装。

3.Gridless

Gridless是未来的HTML5和CSS3框架。这个开发系统支持各种排版,并协助提供一个适用于任何地方的响应式网站,如旧手机到最新手机或平板电脑。该系统适用于更新的技术,如CSS标准化,IE错误修复等等。

4.LimeJs

LimeJs是为基于超文本标记语言5创建应用程序而开发的。可用于最新技术的浏览器,如触摸屏手机和平板电脑。在这里,你只需要在开发游戏的时候做更少的代码就可以更快更轻松地完成响应和充分的交互。

5.Reverie

Reverie是基于最新HTML版本的WordPress框架。这提供了一个响应式搜索引擎友好的应用程序 它支持各种令人惊叹的布局,并有助于增强业务。

6.Montage

Montage是先进的Web应用程序开发系统,支持设计应用程序的可扩展性和易于维护。它带有拖放属性。在这里,您可以开发可重用的用户界面组件和模块,可以在组件和控制器之间绑定属性,并使用文档对象模型和更新来确保用户交互的顺利进行。

7.Joshfire

Joshfire,一个杰出的基于HTML 5的框架。该IDE允许开发人员简单快速地创建支持各种屏幕的Web应用程序,如平板电脑,超级图书和智能电视。开发系统的结构增强了内容优化。

8.Lungo

Lungo提供基于趋势HTML系列的可扩展性和响应式Web应用程序开发框架。这是帮助创建Web应用程序的轻量级标准集成环境。Lungo提供对JavaScript编码的完全控制。

结论

希望这份清单能够拓宽视野,并催生使用这些框架开发网站的潜力。上述大多数框架都是免费提供的,只需点击几下即可轻松下载和安装。如果您在下载或列表中提供的信息中发现任何框架问题,请与下面给出的评论部分分享。

前言

0.什么是jquery mobile 

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

1.什么项目

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

正文


0.按照惯例上图


1.看代码注释详细到爆炸happy.php
!DOCTYPE htmlhtml\thead\t\tmeta charsetUTF-8\t\t!--作者xiaoping  /xiaoping0915时间2017-02-27描述提供天气查询和公交信息查询的便民服务--!--解决移动设备的适配问题--\t\tmeta nameviewport contentwidthdevice-width,initial-scale1.0,maximum-scale1.0,user-scalable0 /title/title\t\tstyle typetext/css#index,#bus {font-family: 微软雅黑;}\t\t/style\t\tlink relstylesheet href/mobile/1.4.5/jquery.mobile-1.4.5.min.css //head\tbody\t\tdiv data-rolepage idindexdiv data-roleheader data-positionfixedh1天气查询/h1/divdiv data-rolecontentdiv classui-field-containlabel城市/labelp idtips stylecolor: red; hiddenhidden填写您所要搜索的城市名/pinput typetext idkeyword //diva idbtnSearch data-rolebutton data-iconsearch data-iconposright搜索/adivul idresult data-rolelistview data-insettrue/ulbrtable idtable classui-responsive  table-stroke data-roletable/table/div/divdiv data-rolefooter data-positionfixeddiv data-rolenavbarullia href#index idindex  classui-btn-active data-iconhome查天气/a/lilia href#bus idbus  data-iconstar查公交/a/lilia href#  idshare data-icongear分享/a/li/ul/div/div\t\t/divdiv data-rolepage idbusdiv data-roleheader data-positionfixedh1公交查询/h1/divdiv data-rolecontentdiv classui-field-containlabel城市/labelp idtip1 stylecolor: red; hiddenhidden填写您所要搜索的城市名/pinput typetext idcity /br /label线路/labelp idtip2 stylecolor: red; hiddenhidden填写您所要搜索的路线/pinput typetext idroad //diva idbtnSearchBus data-rolebutton data-iconsearch data-iconposright搜索/adivul idresultBus data-rolelistview data-insettrue/ulbr/div/divdiv data-rolefooter data-positionfixeddiv data-rolenavbarullia href#index idindex data-iconhome查天气/a/lilia href#bus idbus classui-btn-active data-iconstar查公交/a/lilia href#  idshare data-icongear分享/a/li/ul/div/div\t\t/div\t\t!-- JavaScript 放置在文档最后面可以使页面加载速度更快 --\t\tscript src/libs/jquery/2.1.4/jquery.min.js/script\t\tscript src/mobile/1.4.5/jquery.mobile-1.4.5.min.js/script\t\tscript typetext/javascript//服务端获取ip 上线使用var client_ip  ?php echo $_SERVER[REMOTE_ADDR] ?;//前端测试使用 上线屏蔽//var client_ip  59.172.105.58;//cors跨域代理  了解详情 - /xiaoping0915/article/details/57557206var cors_url  /?;//获取ip接口var ip_url  /service/getIpInfo.php?ip;//天气信息接口var m_url  /onebox/weather/query?key3611a1e75f91ff1544fc9f84ec489021dtypejsoncityname;//公交信息接口var bus_url  /189/bus/busline?dtypekey1198ca7b9b559f7536b5b824c7fae885city;//客户所在城市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  lih1  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 lih3PM2.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 trth data-priority6星期/thth天气/thth data-priority1均温/thth data-priority2风向/thth data-priority3风级/th/tr/theadtbody ;//遍历一个JsonArray$(data.result.data.weather).each(function (index, obj) {$tbl tr td周obj.week/td tdobj.info.day[1]/tdtdobj.info.day[2]℃/td tdobj.info.day[3]/td tdobj.info.day[4]/tdtr/;});$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  lih1  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);});}\t\t/script/body/html
2.解决的问题a关于移动设备适配问题meta nameviewport contentwidthdevice-width,initial-scale1.0,maximum-scale1.0,user-scalable0 /b关于ajax跨域问题使用cors代理服务var cors_url /?; 了解详情 c优化页面提升页面加载速度将script标签内容后置到/body 结束标签之前