webapp开发

基础dom操做库

首先对于页面上的交互仍是以dom操做为主，虽然说如今javascript的dom api已经很好用了，可是对于用惯jquery的人来讲仍是很不方便，因此我选择 zepto，它的api和jquery彻底一致，可是更为轻量。

路由处理

再手机端上页面切换会出现白屏，也没法作转场动画，为了坚定这些问题，咱们须要开发一个单页面应用程序（ SPA ），经过解析url #后面的路径（#后面路径转换不会产生页面条件）加载不一样的dom，这里也能够加上转场的动画，以获取和原生同样的用户体验。

director.js 是最纯粹的路由注册/解析器，它在不刷新页面的状况下，利用“#”符号组织不一样的URL路径，并根据不一样的URL路径来匹配不一样的回调方法。director.js不只能够应用在客户端，在使用node.js的后台，它也可以实现前面说的后端路由功能。

缓存

移动端的网络须要考虑流量的消耗，没必要要的重复请求是很粗糙的，因此很移动端须要大量使用缓存，来获取更好的用户体验。html5提供了webstorage机制储存数据，须要加一些简单的封装就可使用了 js缓存封装

1 2 3

localStorage.setItem(key, value); localStorage.getItem(key); localStorage.removeItem(key);

手势事件

移动端须要监测用户不一样的手势来作相应的处理，例如：微信上列表上长按显示操做菜单，滑动返回。。。。，咱们能够经过监测touch事件来判断用户的手势，touch事件有如下几种：

touchstart 手指接触屏幕事件
touchmove 手指再屏幕上移动事件
touchend 手指离开屏幕事件
touchcancel 非正常离开屏幕事件（例如在触摸时，别的应用打开，或者程序意外退出。。。）

简单的手势用以上几种事件配合就能够处理了，若是手势相对复杂，可使用 touch.js, 百度开发的手势事件库，api至关简单

1 2 3 4

touch.on('.target', 'swipeleft swiperight', function(ev){ console.log("you have done", ev.type); });

滚动条

再android4.0之前手机上是不支持div滚动条的，不少的应用都引进了 iscoll.js，用js模拟滚动条，再4.0 之后有了div滚动条，可使用原生滚动。可是在长列表渲染时，div滚动条会有闪白的状况，因而，你们就都使用，iscoll和div滚动切换的方式，再较低版本例如android 4.4以前用iscoll 4.4以上用原生滚动条。

下拉刷新和infinite-scroll

下拉刷新和无限滚动式手机端的必不可少的功能，js须要监听滚动和touch事件来实现这两个功能; jQuery模拟原生态App上拉刷新下拉加载效果代码

现有框架解决方案

app.js

App.js 的目标是为移动webapp提供一个健壮良好的开端，处理常见的功能而且兼容其余流行的JS库。提供良好的路由控制，有controller的mvc设计，也能够良好的兼容其它的框架，缺点是组件相对较少，可是对于简单的webapp仍是没有问题的

framework7

Framework7 是一个开源免费的框架能够用来开发混合移动应用（原生和HTML混合）或者开发 iOS & Android 风格的WEB APP。也能够用来做为原型开发工具，能够迅速建立一个应用的原型。

framework7 组件丰富并且能够在android和ios两种风格建切换

打包

webapp须要调用原生方法，例如摄像头，通知等等，还须要将webapp打包成真正的apk或者app。这些须要经过一些工具完成;

Phonegap

phonegap 是一个跨平台的移动app开发框架，能够把html css js写的页面打包成跨平台的能够安装的移动app，而且能够调用原生的几乎全部的功能，好比摄像头，联系人，加速度等。

HBuilder

HBuilder 是国产的混合是开发解决方案，包括有HBuilder编辑器 H5+规范调用原生api， mui框架，native.js与原生通讯，它提供云打包以json格式配置app，再性能不错，经本身的比较再一样的程序的性能用Hbuilder更加。