一 背景

     公司需要开发一个web页面,需要支持主流android和ios手机,采用web页面好处是一个页面,在不同平台之间都可以用,节省成本,基本html、js和css大家也都熟悉。但是对比传统网页开发移动web开发还是有一定区别的。
 
二 技术选择
     在正式开发前,对目前网上流行的几种web app开发框架做了一定了解,有国内也有国外的。框架选择原则是轻量、简单、易用方便自定义修改。
     js框架用zepto.js(http://zeptojs.com/),该框架语法几乎和Jquery一样而且更加精简
     ui框架用frozenui(https://github.com/frozenui/frozenui),该框架是TX的,里面已经有很多常用样式了
 
三 和常规web开发区别
     可以参考http://www.cnblogs.com/hacke2/p/4090079.html这篇文章
     1.viewport,如 <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>
    2.布局方面不同,如flexbox
    3.300ms延时问题,用zepto里的tap可以解决
  4.离线存储和本地存储
 
如要深入学习,看框架源码是不错的选择。
 
三 和常规web开发区别
   对于非前端人员,遇到问题是肯定的。其中有个就是如<label>click</label><input type="text" />,点击Label在ios设备上会有半透明背景色,其他设备上都正常,最后发现只要是click相关的都有,结果呢只要设置下-webkit-tap-highlight-color这个webkit css就可以了,在这里献上webkit css大全,是携程UED的http://ued.ctrip.com/webkitcss/
 
 

WebApp页面开发小结的更多相关文章

  1. Cordova webapp实战开发:(7)如何通过简单的方法做到,不重新发布APP来修复bug、增加功能、或者躲开苹果的一些严格审核?

    到<Cordova webapp实战开发:(6)如何写一个iOS下获取APP版本号的插件?>为止,我们已经大体学会了如何使用Cordova了,那些都是使用Cordova的开发者必备的技能. ...

  2. Cordova webapp实战开发:(5)如何写一个Andorid下自动更新的插件?

    在 <Cordova webapp实战开发:(4)Android环境搭建>中我们搭建好了开发环境,也给大家布置了调用插件的预习作业,做得如何了呢?今天我们来学一下如何自己从头建立一个And ...

  3. Cordova webapp实战开发:(3)后面可能会学到的东西

    在<Cordova webapp实战开发:(2)认识一下Cordova>中我们了解了Cordova和Phonegap的关系,并简要介绍了一下它的架构,以及多平台性,并给大家留了一些作业.我 ...

  4. 移动端web页面开发常用的头部标签设置

    在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询. viewport <meta name=" ...

  5. vue开发小结(下)

    前言 继前几天总结了vue开发小结(上)后,发现还有很多的点没有能列举出来,于是还是打算新建一个下篇,再补充一些vue开发中需要注意的细节,确实还是都是细节的问题,我只是在这里强调下,希望对大家有帮助 ...

  6. pdfjs viewer 开发小结

    此文已由作者吴家联授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1. pdfjs库简介 PDF.js 是由Mozilla 主导推出的可以将PDF文件转换为H5页面进行展示的 ...

  7. 响应式WEB页面开发实践

    转自:https://github.com/markyun/My-blog/issues/27 最近得到一个新任务单,让我用一套页面适应所有主流终端(Android.iPhone.iPad.PC),而 ...

  8. 基于.NetCore开发博客项目 StarBlog - (6) 页面开发之博客文章列表

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  9. 【从零开始学BPM,Day5】报表配置及自定义功能页面开发

    [课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第五天课程] 1.课程概要 Step 1 软件下载:H3 BP ...

随机推荐

  1. 冰点文库下载器V3.1.4

    下载百度文库的利器 http://www.bingdian001.com/?softid=3&ver=3.1.4可以下载

  2. web-压力测试学习

    https://blog.linuxeye.com/335.html http://bdql.iteye.com/blog/291987 http://www.cnblogs.com/zhuque/a ...

  3. nightwatch-js -- test group

    Test group 可以将你的测试脚本划分到组中,并根据需要运行它们.要将测试组合在一起,只需将它们放在相同的子文件夹中,文件夹的名字即是组的名字.例如:lib/├── selenium-serve ...

  4. Android基础之使用Fragment控制切换多个页面

    Android官方已经提供了Fragment的各种使用的Demo例子,在我们SDK下面的API Demo里面就包含了Fragment的各种使用例子,需要看Demo的朋友,直接看API Demo那个程序 ...

  5. IOS与安卓的远程调试

    本地调试H5页面方案总结 http://www.jianshu.com/p/a43417b28280 Fiddler 手机抓包 http://blog.csdn.net/gld824125233/ar ...

  6. Sql效能优化总结(续)- sql语句优化篇

    今晚继续进行Sql效能问题的分享,今天主要是一些具体的sql优化方法和思路分享,若看过后你也有其他想法,欢迎一起探讨,好了,进入今天的主题. 针对性地对一些耗资源严重的具体应用进行优化 出现效能问题时 ...

  7. 编写一个基于HBase的MR程序,结果遇到一个错:ERROR security.UserGroupInformation - PriviledgedActionException as ,求帮助

    环境说明:Ubuntu12.04,使用CDH4.5,伪分布式环境 Hadoop配置如下: core-site.xml: <configuration><property>    ...

  8. linux下tomcat6无法显示图片验证码 少了图形插件

    linux下tomcat6无法显示图片验证码(windows下显示正常) 原创 2015年10月20日 10:31:47 3526 linux下tomcat6无法显示图片验证码(windows下显示正 ...

  9. spring+mybatis基于 AOP实现业务日志管理

    最近在项目上用到了操作日志的相关,之前的解决方案就是自己写一个日志project,然后统一调用日志接口即可,这样方便自定义定制,因为有很多设备控制之类的都是需要确认一下的,但是,对数据的操作,比如,增 ...

  10. esper 附录A

    A2 select irstream symbol, volume, price from MarketDate.win.time(5.5 sec) seconds seconds seconds s ...