前言 在移动浪潮袭来的时候,小钗有幸进入框架组做webapp框架开发,过程中遇到了移动端的各种坑,也产生了各种激情,就我们公司的发展历程来说 第一阶段:使用传统方式开发移动站点,少量引入HTML5元素 第二阶段:框架化,使用jquery mobile框架,发现慢,组件不好管理,不好维护给搞掉了 第三阶段:jquery+Backbone的组合,最后为了瘦身将jquery换成了zepto 第四阶段:框架适应Hybrid版本,Hybrid相关频道与H5站点一套代码,业务扩展遍地开花 第五阶段:框架适应…

用谷歌调试工具中的手机模拟器模拟手机进行webapp的开发,与真机上的效果还是有些偏差,opera手机模拟器的效果亦不佳.有时在pc上开发出来的webapp效果良好,在部分真机上就出现了偏差,这时候就需要我们进行微调.     在pc上微调后发布到测试环境再在手机上看效果,开发很慢,效率很低.这时候就想着有一个可以在手机上调试的工具,可以随时更改参数随时看到手机上的效果,免去发布再测试.模糊估计参数不精准的麻烦,weinre就是一个这样的工具.     weinre可以在PC上远程调试手机上的页…

和大多数响应式的布局一样,webapp开发也是需要浮动布局和百分比布局,需要考虑的是小屏幕手机250px和大屏幕设备768px,但是习惯以320px和640px来分割,jq中的一句话$(function(){$(window).resize(function() {var isWidescreen=$(this).width();if(isWidescreen<320){isWidescreen=320;}else if(isWidescreen>640){isWidescreen=640;}…

话说现在的手机型号越来越多,主要还是android和ios这2个巨头称霸了江湖,而他们自带的浏览器内核是webkit,那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了,看起来很简单,其实背后还有一个大坑等着你. 虽说是webkit内核,但页面的展现效果还会受到自身系统的影响,升级后的系统打了补丁,新增了新的属性,支持更多丰富炫丽的效果,那么旧的系统(未升级的)就不支持一些新的属性,开发哥哥就是没有做好低端版本兼容的话,就会产生所谓的bug的,再加上android…

用jquery mobile做了一段时间的webapp开发,准备用自己的一个小demo做一个模块化的分享 点击demo演示 手机演示二维码: 此demo已经是比較老的版本号,用户体验流畅度确实还存在非常大的问题,但在我写这一系列的webapp开发实例后,将会解决大部分问题 以下是以后准备写到的一些点: 1:谈谈关于jquery mobile 一些常见问题的解决.(常见问题的解决查看) 2:jquery mobile实现多页面跳转(不是官网上那样把所以的page在一个.html文件内,而是每一个p…

跟我一起玩转Sencha Touch 移动 WebApp 开发(一) 1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 自定义图标的方式 WebApp产品测试和发布 HTML5离线缓存 发布成Android/IOS本地app应用 移动框架简介,为什么选择Sencha Touch? 目前市面上,移动应用web框架,也算是风生水起,不断涌现,各个都称自己最牛逼.常见的几个框架主要有jquery Mobile,Dojo M…

前言:在移动端WEBAPP开发中会遇到各种各样的问题,通过此文对遇到的问题做一个归纳总结,方便自己日后查询,也给各位前端开发友人做一个参考.   此文中涉及的问题是本人开发中遇到的,解决方案是本人思考和查询资料的结果,纯属于个人的见解,一个需求,纵有千百种实现方式,所以如有歧义,请温柔吐槽! 此文会持续更新,前期内容会比较杂乱,待Q&A积累到一定量后,会进行整理. css3 1.Q:css3动画在Ios运行正常,在Android无法运行.因‘-webkit-’前缀未正确书写导致  A:-webk…

WebApp开发总结 框架的使用网络上都有教程,就不写了,主要记录下个人的开发总结以方便以后开发注意. css公用样式统一定义 css样式抽出复用 appearance: none; 取消系统默认样式 AngularJs 框架了解 指令.表达式.控制器.过滤器.作用域.服务.配置.model双向绑定 Ionic框架了解 路由.导航.控件.缓存.跳转效果 AngularJs: Mvc思想,服务层可全局持久化数据(当前程序生命周期内),供所有控制器访问. 自定义服务: 自定义过滤器: 禁用缓存: 坑…

#移动前端webApp开发点滴积累20140629 ##关于input行内居中的问题 给input设定一个比较高的高度,在某些版本的移动设备上,文字不能垂直居中,即使设定了相同的行高也不行.(见图)  在这种情况下,我一般不改变input本身的高度,而是在input外围包裹一层,再在外围层做效果. `20140701新增`发现只需要加上 `lin…

#webApp开发几点体会(移动前端) ##前言 本文旨在记录本人涉足移动webApp开发的几点体会,欢迎分享与指正. ##再见,IE678 移动设备,Android跟iPhone是主流,即使是win8设备,自带的都IE9以上,再也见不到那个不按W3c套路解释的浏览器了,很多兼容性问题都可以放下,专心处理业务了. ##HTML5/CSS3 HTML5/CSS3在移动设备上已经非常普及了,再也不用考虑以前在桌面设备上是否有旧版本浏览器的问题了.HTML5的跨平台.便于维护.开发成本低,各种优点使得…

继上一篇:一步一步构建手机WebApp开发——环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接上代码 注意:此教程是接上一篇教程,也就是所有的内容是直接从body开始写,当然,也会贴出所有代码给大家. 第一步:框架的布局及幻灯片的布局(Html) ① 如上图所示,我们应该准备以下容器,方便填充内容 <!--页面容器--> <div class="page-container…

/ WebAPP开发与小程序 / 步骤一 · 4-5 地图搜索与poi结合(2) 在地图中搜索指定对象时,搜索结果可以显示出每个对象的图片,就差这个不会了…

http://www.cocoachina.com/webapp/20150906/13344.html WebApp的实现基础就是HMTL5+JS+CSS3,但是WebApp还是基于浏览器的微网站开发. 正式如此,我们必须要深入的了解HTML5的8大特性,这样才能方便我们在开发和设计APP的时候,更合理的采用原生APP与WebApp的相结合. 而APP里面最重要的一个分享功能,分享出去的必须是网页形式的.所以,需要学会HTML5. 为什么说HTML5适合进行移动WebApp开发? 第一特性:离…

前言 最近在使用BUI Webapp开发的一个小商城项目在微信上遇到一些坑及变态需求, 层层深入, 整理一下给后来人参考. 一定有你还不知道的! 调试缓存 问题描述: 微信打开的web页面默认是会缓存的,这是为了加载更快,本来是好事,但对于用来调试的我们就比较痛苦了,每每更改一些js,html, 刷新以后,怎么样都去不掉. 解决办法: 每次修改html 在后面增加? 参数, 每次修改js, 在页面引入的时候, 增加问号加时间戳的方式..但依然很痛苦. BUI Webapp 的处理方案: inde…

以下只是我个人得总结,如果你有更好的建议,请留言,一起共勉进步!!- -! 1.要响应式开发web,也就是页面必须自适应屏幕大小,可以采用流体布局,如之前的文章(自适应宽度布局),其他具体的小问题可以采用media query解决(让IE支持CSS3 Media Query实现响应式Web设计和CSS3 Media Queries): 2.因为手机大多是高级浏览器,可以使用html5+css3开发: 3.合理灵活的使用meta标签,具体如下: <meta content=”width=devic…

最近花6天时间完成了一个七夕的小活动,是一个简单的WebApp.由于我前期对面向微信的Web开发评估不足,导致开发过程十分艰难.写这篇文章总结下,惊醒自己未来不要再犯这样的错误. 问题: 1. 有些比较老旧的手机不支持多个触点,可能是硬件不支持,也可能是软件问题.这并不是微信的坑,对于这个问题其实我是早就遇到过的,心里有底,也就不算问题了. 2. 手机上传图片会变横,比如:竖着拍照上传,图片不是竖的,而变成横的.这个也不是微信的问题,是因为我以前还没在手机上做过图片上传,所以第一次遇见. 解决方…

Web App:1.开发成本较低使用web开发技术就可以轻松的完成web app的开发2.升级较简单升级不需要通知用户,在服务端更新文件即可,用户完全没有感觉3.维护比较轻松和一般的web一样,维护比较简单,它其实就是一个站点Webapp说白了就是一个针对Iphone.Android优化后的web站点,它使用的技术无非就是HTML或HTML5.CSS3.JavaScript,服务端技术JAVA.PHP.ASP.当然,因为这些高端智能手机(Iphone.Android)的内置浏览器都是基于webk…

如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切.接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 : 1. viewport:也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个: width…

1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 自定义图标的方式 WebApp产品测试和发布 HTML5离线缓存 发布成Android/IOS本地app应用 移动框架简介,为什么选择Sencha Touch? 目前市面上,移动应用web框架,也算是风生水起,不断涌现,各个都称自己最牛逼.常见的几个框架主要有jquery Mobile,Dojo Moble,Sencha Touch,我这里是极端推荐Sencha To…

1.       目的 在模拟器的浏览器或app hybrid开发中遇到chrome调试代码为线上代码或者混淆代码时,可以利用fiddler/charles为genymotion配置代理, 可以方便的将代码替换为本地代码,此外还可以针对访问服务进行截获分析. 2.       配置 2.1    配置fiddler本地代理 2.1.1 Tools->Option->Connections 选中Allow remote computers to connect,并设置端口号(默认8888),如下…

如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切.接触 webkit webapp的开发已经有一段时间了,现把一些技巧分享给大家 : 1. viewport:也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个: <meta…

自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备). 开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP:一种是基于高端机的浏览器运行的WebApp,本文将主要讲解后者. WebApp与Native App有何区别呢? Native App: 1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C. 2.更新体验较差…

引言 首先说明一下,本文分享对象是涉世未深的移动开发者,至于有经验的开发者可以自行绕道. 说来惭愧,做了几年pc端的前端开发,很少接触到webapp的移动端开发.如今有机会参与webapp的开发,发现与pc端开发还是有一些区别的. 例如,移动端的浏览器要么是Android的chrome,要么是ios的safari:可以发现:他们都是基于webkit内核的.而也有使用windows phone的手机(ie的那一套),但是从市场使用上来看,其可以忽略不计.因此做移动端的前端开发有一些特别之处: 不用…

我所使用到的HTML页面标签: Section,div,artical,p,ol,ul,li,header,footer,span,form,input,label,h1,h2,h3 :详细说明我就不说了,只给新手说下,为什么W3C那么多标签,只使用16个就可以把整个项目解决了? 原因是不要以为标签多,我们就一定要使用到它的,我们要的是使用广泛的,易记的. 稍微解释下,块级元素和行内元素是什么意思? 块级元素就是他占满一行的:行内元素就是他的多个同类可以同时在同一行. 下面讲解下,head标签里…

如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切.接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 : 1. viewport:也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个: width…

移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了.本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案. 一.基本概念 (1) CSS pixels与device pixels CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容. device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色.亮度. 等值的 CSS pixels在手机屏幕上占多大的位置,这…

 备忘 - Q:  webapp点击一个按钮调用系统拨号: <a href="tel:12345654321">打电话给我</a> <a href="sms:12345654321">发短信</a> 或用于单元格: <td onclick="location.href='tel:122'"> Q:如何用手机在上网的网页中链接访问跳转到手机本地qq上直接聊天? mqqwpa://im/ch…

[转载]阅读原文 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程 序,运行在高端的移动终端设备).开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP:一种是基于高端机的浏览 器运行的WebApp [NativeApp与WebApp的比较] NativeApp 1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C. 2.更新体验较差.同时也比…

前所知的 APP 开发模式有三种: 基于操作系统运行的 APP -> Native App,侧重于原生开发,用户体验好,需要安装才会升级 基于浏览器运行的 APP -> Web App,侧重于网页技术实现,跨平台兼容性好,只要开发人员更新代码,无需通过安装升级 基于移动应用引擎 -> Hybrid App,使用H5和JS开发.如果不追求用户体检时,这种方式最快也最省钱 下面的图摘自简书,是对三种不同形态的 APP 的对比: Hybrid APP是目前广泛流行的一种APP开发模式,Andr…

http://www.cnblogs.com/pifoo/archive/2011/05/28/webkit-webapp.html 如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切.接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 : 1. viewport:也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真…