首页 文章 精选 留言 我的

精选列表

搜索[hybrid],共624篇文章
优秀的个人博客,低调大师

Hybrid框架UI重构之路:五、前端那点事儿(HTML、CSS)

上文回顾 :Hybird框架UI重构之路:四、分而治之 这里讲述在开发的过程中,一些HTML、CSS的关键点。 单页模式的页面结构 在单页模式中,弱化HTML的概念,把HTML当成一个容器,BODY中显示的主体内容才是页面,一个HTML容器中可以存放1个或者多个页面,每个页面放置于section中。而一个页面(section)中必有主体内容(content),也有可能包含头部内容、底部内容,甚至一些侧滑菜单等。 所以,以我们通常看到的一个移动应用的界面中包含了顶部Title和主体内容的页面代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="width=480,user-scalable=no" /> <link rel="stylesheet" href="css/bingotouch.css" /> <link rel="stylesheet" href="css/app.css" /> <!-- 函数库 --> <script src="js/cordova.js"></script> <script src="js/zepto.js"></script> <script src="js/iscroll.js"></script> <script src="js/baiduTemplate.js"></script> <script src="js/bingotouch.js"></script> <script src="js/app/app.js"></script> <title>BingoTouch</title> </head> <body> <div id="section_container"> <section id="index_section" class="active"> <div class="header" data-fixed="top"> <div class="title row-box"> <div class="box-left"> </div> <div class="span1"> <h1>首页</h1> </div> <div class="box-right"> </div> </div> </div> <div class="content"> <h1>欢迎使用BingoTouch</h1> </div> <div class="footer" data-fixed="bottom"> </div> </section> </div> </body> </html> 这里可以看到单页的基本结构是以Section为单个页面的容器,页面中显示的标题导航header和主体内容content都位于Section之下,并且各自可以显示需要的内容。 也就是如下图的一个结构: 片段页面相对就简单很多,如下代码: <section id="demo_section"> <div class="header" data-fixed="top"> <div class="title row-box"> <div class="box-left"> </div> <div class="span1"> <h1>Demo</h1> </div> <div class="box-right"> </div> </div> </div> <div class="content"> <h1>欢迎使用BingoTouch</h1> </div> <div class="footer" data-fixed="bottom"> </div> </section> 页面片段也即是主页面里面的section块,从这里看其他页面是很简洁的。 viewport viewport这东西不详细描述,我只是被整得快疯了,几个属性width、height、initial-scale、minimum-scale、maximum-scale、user-scalable。 ios : 在ios上很正常,设啥就是啥。 android : 在android上千奇百怪,简直是“茅坑里的石头”。尽管网上很多的文章对viewport都有阐述,但所写的描述、公式、示例没有一个能说对(我有用不同手机测试过),都没能完全说明白,都是对一点错一点,似对似错。而公司也没有人能好好说明它,之后我测试过,当测试到第5个机型就测不下去了,都不同各异,没有共同的特点,只能暂停下来(做其他事,测试事情先延后)。 现在使用的设置viewport的脚本在已测试过的机型都没有问题,所以暂不深究了,代码如下。 var viewport = ""; var userAgent = navigator.userAgent.toLowerCase(); if (/android (\d+\.\d+)/.test(userAgent)) { viewport ="width=device-width,initial-scale=1,user-scalable=no,target-densitydpi =240"; } else { if(userAgent.match(/ipad/i)){ viewport = "width=640,user-scalable=no"; }else if(userAgent.match(/iphone os/i) == "iphone os"){ viewport = "width=480,user-scalable=no"; } } //add view if ($("meta[name='viewport']").length > 0) { $("meta[name='viewport']").attr("content", viewport); } else { var element = document.createElement('meta'); element.name = "viewport"; element.content = viewport; var head = document.getElementsByTagName('head')[0]; head.appendChild(element); } PS:对于不理解东西,我不喜欢只一对一解决,例如某个机型的viewport设置有问题,设置某些属性就可以了,但可能不知为什么。我是希望能明白本质原因,以后可以做到举一反三,才是我想的。另外,如果有人明白viewport且做过测试(这点很重要),能否告诉我你的理解,求交流。 扁平化 扁平化不是新的东西,目前很多公司的项目都是渐变的风格,主要是体现是在header、footer、button等一些控件。而扁平化也仅仅是将渐变的效果去掉,并没有什么特别。 图标 图标有两种,一种是图片图标,一种是字体图标。 我有一篇文章有详细介绍:http://www.cnblogs.com/lovesong/p/4115991.html 总结 我并没有写开发的具体内容(太多东西,没办法几篇文章讲完,也没必要,毕竟思路才是正途),也就不多讲,旨在介绍我开发的方式、方法、步奏,以及一点关键的前端问题。 本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。 本文地址 : http://www.cnblogs.com/lovesong/p/4297182.html 本文转自 海角在眼前 博客园博客,原文链接:http://www.cnblogs.com/lovesong/p/4297182.html ,如需转载请自行联系原作者 http://www.cnblogs.com/lovesong/p/4297182.html

优秀的个人博客,低调大师

Hybrid APPS 我为什么看好你—献礼前端工程师

【大咖・来了 第7期】10月24日晚8点观看《智能导购对话机器人实践》 Web从最开始,用html标签这种最简单的方式搭建门户网站、论坛,那时候能做个网站感觉很牛叉的样子。后来又有了Ajax方式,可以动态的获取数据,让网页能不刷新而完成更新。之后又有了HTML5,结合JS、CSS3到达另一个高度,通过Web可以用很炫的方式实现不错的功能效果。这是PC时代;现在到了移动互联网时代,有人唱衰Web,也有人高唱Web。不管怎么样,Web在以它的方式而野蛮生长着。生长的方式不是以我们的主观意愿的,而是这个时代需要Web,需要这种方式来实现一些东西,人们希望有这么一个东西能像一个树,在这个炎热的夏天提供一处阴凉,愿意为它施肥浇水,让它再大些再高些。因为需要所以产生,而不是因为存在所以可用。 1、到达一个拐点 技术上:从原先的一根筋变成现在的两头堵了。在2014年10月底,W3C宣布HTML5正式定稿。这个时间,不晚不早,硬件性能更强、手机OS迭代速度下降。优势是跨平台,更新及时。可用和原生代码结合实现互相的调用,机制上是完全可以的。只是看你用不用而已。其中OS X Mavericks和iOS 7引入了JavaScriptCore库,它把WebKit的JavaScript引擎用Objective-C封装,提供了简单,快速以及安全的方式接入世界上***的语言。不管你爱它还是恨它,JavaScript的普遍存在使得程序员、工具以及融合到OSX和iOS里这样超快的虚拟机中资源的使用都大幅增长。 生态上:很多的公司和个人在Web这个领域一直的添砖加瓦,不管是Cordova、AppCan、ApiCloud、trigger.io、node-webkit、ReactNative等等,都在从各个方向突围,让大家看到了希望。 硬件上:系统版本和浏览器已经可以很好的支持html5和css3硬件加速。Google在2013年底发布的Android4.4,内置的Webview不再是蹩脚的Android WebKit浏览器,而是Chromium,性能大幅提升。从***的Android 5.0开始,Webview可以通过GooglePlay Store实时更新,和Chrome的升级保持一致,用户就可以不刷机享受到***的浏览器引擎;再看Apple方面,2012年iPhone5发布后,HTML5在iOS上的表现已令人满意,Safari独家的JavaScript加速引擎Nitro不再那么重要,不过在iOS 8发布后,苹果还是很识趣地取消了三方程序调用Nitro的限制,现在任意浏览器或应用调用iOS的UIWebview都可以利用Nitro加速,这样在前端使用JS做大型运算也成为可能。 实现上:具体到这个层面,最初是直接嵌网页的方式;后来是打包JS、HTML、CSS到本地;这两种方式都有优缺点,不能满足我们要求加载快而且实时更新。于是出现了第3种,可以用增量更新zip包的方式来实现本地加载和快速更新的目的。这些已经在超级app上实现,并且效果很好,下面内容有讲到。 2、需求要求这样 而对于开发者而言,开发者为什么不愿意开发WP版本,很多时候是因为工作量太大,除了版本适配,分辨率调整等,一旦有新版本推出,在原生App中开发者不得不等待多达两周时间去接受审核。另外内容维护上也很麻烦,这也是为什么有些媒体开始放弃原生App鼓励读者使用WebApp的原因。除此之外,跨平台在多屏时代给开发者非常痛苦的体验,人们都期待当年Java的一次编译处处运行的理想情况。HTML5目前正在扮演一个开发者救星的角色。 全新的互联网入口超级App+WebApp的时代来临 你手机里装了多少App,最常用的有哪些? 可能最多的回答是,我用「微信、QQ,或者其他浏览器」等等所谓的超级App。 在超级APP里Web正在扮演着重要的角色,发挥她的快速、跨平台、轻的特性。 3、已经被验证过 手Q中群部落、吃喝玩乐、主题中心等核心业务。微信的[发现]。新版支付宝的[商家]、京东、淘宝这些电商更是用到了各处。这些超级APP已经在某些场景下用的不亦乐乎,发挥Web的优势,为我们所用。 4、农村包围城市 从PC到移动互联网时代,Web正在符合时代的需求而生长着。没有一种语言是像Web一样,随着时代的发展而不断的修订,并能符合这个时代发展的速度。Java做不到、Objective-C也做不到。虽然出身草根,但是像水一样,随形而动,生命力旺盛。还是让我们拥抱变化,拥抱草根出身的Web。 献给一直坚守在Web前端的工程师们 【责任编辑: chenqingxiang TEL:(010)68476606】

资源下载

更多资源
Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称,一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring

Spring框架(Spring Framework)是由Rod Johnson于2002年提出的开源Java企业级应用框架,旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念,提供核心容器、应用上下文、数据访问集成等模块,支持整合Hibernate、Struts等第三方框架,其适用范围不仅限于服务器端开发,绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

用户登录
用户注册