一 背景

     公司需要开发一个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. SQL语句练习手册--第二篇

    一.书到用时方恨少:"图书-读者-借阅"类题目 1.1 本题目的表结构 本题用到下面三个关系表: CARDS 借书卡. CNO 卡号,NAME 姓名,CLASS 班级 BOOKS ...

  2. NSAttributedString设置行间距,间接设置了uilabel的行间距

    假设有UIlabel实例:_testLabel NSString * testString = @"明月当空,隐隐约约听到低吟,似有若无.面对大千世界的奢华糜烂,还不如在这一方小城,静静品一 ...

  3. MVC| Razor 布局-模板页 | ViewStart.cshtml

    来自:http://blog.csdn.net/fanbin168/article/details/49725175 这个图就看明白了 _ViewStart.cshtml 视图文件的作用  _View ...

  4. UVa 437 The Tower of Babylon(DP 最长条件子序列)

     题意  给你n种长方体  每种都有无穷个  当一个长方体的长和宽都小于还有一个时  这个长方体能够放在还有一个上面  要求输出这样累积起来的最大高度 由于每一个长方体都有3种放法  比較不好控制 ...

  5. 使用程序修改系统(IE)代理设置

    文章都是发布在github再转到这边的,这边格式可能会乱掉.博客地址:benqy.com 这是本人在做的一个前端开发调试工具(HttpMock),功能是web服务器+http日记+http代理(类似f ...

  6. jsp页面JSTL标签 <c:fn:>

    函数名 函数说明 使用举例 fn:contains 判断字符串是否包含另外一个字符串 <c:if test="${fn:contains(name, searchString)}&qu ...

  7. angularjs中的时间格式化过滤

    本地化日期格式化: ({{ today | date:'medium' }})Nov 19, 2015 3:57:48 PM ({{ today | date:'short' }})11/19/15  ...

  8. Android Activity去除标题栏和状态栏

    一.在代码中设置public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //去除ti ...

  9. 使用javac,手动编译一个java文件的方法

    参考<Tomcat与Java Web开发技术详解>中的命令: javac -classpath c:\tomcat\lib\servlet-api.jar                  ...

  10. hihoCoder#1037 : 数字三角形(DP)

    [题目链接]:click here~~ 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 问题描写叙述 小Hi和小Ho在经历了螃蟹先生的任务之后被奖励了一次出国旅游的机会,于是他 ...