Web App 开发

0.   jQuery Mobile 介绍

jQM是为触控优化的移动web框架，用来设计响应式网站和跨平台移动开发的；

（这里的跨平台指的是可以运行在iOS、Android、BlackBerry、WindowsPhone各种平台上）

jQM的资料多而且详细、容易上手，对于新手学习移动端开发是比较不错的选择；

以下知名的站点是采用jQueryMobile技术，大家有时间可以了解一下的噢：

对车感兴趣的：道奇m.dodge.com

对玩感兴趣的：迪斯尼https://disneyworld.disney.go.com/

对家居感兴趣：宜家http://m.ikea.com/

1. WebApp开发

1.1 概述

1.1.1 【概述】

WebAPP是指基于Web的系统和应用，其作用是为广大用户发布复杂内容和功能；

响应式网页的大部分技术是可用在WebApp开发中的，其实说白了就是网页应用；

1.1.2 【概述】案例

比如腾讯推出的在线版QQ：http://w.qq.com/;

百度推出的轻应用等；

1.2 WebApp、NativeApp、HybirdApp对比

1.2.1 【NativeApp】

NativeApp又叫原生应用，是借助SDK提供的原生组件和服务进行编程而生成的本地App。

比如说我们经常提到的Android开发、iOS开发：

假设需要开发一款App，如果Android、iOS两个平台都要支持，我们需要学习java来做Android开发、oc来做iOS应用，很明显成本很高；那么有没有一种方案能够利用我们当前所学的前端技术，写一套代码然后能够同时在Android、iOS等其他平台上运行？

1.2.2   【HybirdApp】

HybirdApp又叫混合编程，是介于WebApp和NativeApp之间的app，兼具NativeApp良好的用户交互体验的优势、WebApp跨平台开发的优势;

提到混编，不得不提phonegap，一款横跨Android、iOS、塞班、Blackberry、windowPhone等主流平台，是目前唯一做到【一次部署，全平台通用】的移动开发框架，能够让开发者用普通Web技术编写出能够轻松调用API接口和进入应用商店的HTML5应用开发平台；PhoneGap的软肋是缺少配套的UI支持库，这时候就需要用到一些前端开发框架，比如jQueryTouch、jQueryMobile

如果采用phonegap方案，可以通过将前端代码上传到build.phonegap.com生成各平台下的app,或者使用nodeJS来手工生成

1.2.3   【对比一下吧】

Web App(网页应用)Hybird App(混合应用)Native App(原生应用)开发成本低中高维护更新简单简单复杂体验差优优Store或Market认可不认可认可认可安装不需要需要需要跨平台优优差

2. 搭建Android开发环境

2.1 为什么要搭建Android开发环境呢？

我们之前提到了hybirdApp一般是结合phonegap技术来实现混编，这个是需要依赖nodejs或者联网在线使用；

2.2 如何搭建Android开发环境呢？

2.2.1 安装JDK

JDK的全称是Java SE Development Kit，也就是Java 开发工具箱。SE表示标准版。

JDK是Java的核心，包含了Java的运行环境（Java RuntimeEnvironment），一堆Java工具和给开发者开发应用程序时调用的Java类库。

为什么要安装JDK?

因为Android开发的语言是java，java本身的运行、编译需要这样一个运行环境。

2.2.2 配置环境变量

为什么要配置环境变量呢？

给大家演示一下哈，windows+r,输入mspaint，看到一个程序就打开了，那么操作系统是如何知道绘图程序在哪里并打开的呢？

这时候就是环境变量在起作用，配置环境变量后，计算机在执行程序时就能找到对应的命令，找到命令就可以运行了；

2.2.3 安装ADT

Google官方推出的Android开发工具有两种，分别是ADT（Android Developtools）和AS（Android Studio）;

现在官方已经正式确定AS为Android的开发环境，但是由于运行需要依赖gradle这种构建工具，gradle在首次运行AS时，需要联机下载文件；

我们为什么采用ADT,首先ADT相对AS稳定，其次ADT上很多相关资料，方便我们新手学习。

2.3 具体步骤

可参考本博客中的如何配置Android开发环境

3. 你的第一个Android App

3.1 新建Android开发项目

3.1.1 打开编辑器

点击eclipse.exe文件下载安装即可；eclipse.exe是Android开发的IDE(集成开发环境)；

3.1.2 新建Android应用工程

3.1.3  新建运行模拟器

3.2  执行第一个App

3.3  介绍一下Android项目文件，工具栏按钮的作用

4.  你的第一个HybirdApp

4.1  使用任何编辑器编写一个html文件

4.2  将html文件拷贝到assets目录

4.3  编写Java 代码

注意：

拷贝到Android下的assets后，发现点击没反应，需要在java代码中加入一行代码：

//创建一个网络视图

        WebView wv = newWebView(getApplicationContext());

        //设置允许执行js操作

        wv.getSettings().setJavaScriptEnabled(true);

        //载入本地的网页

        wv.loadUrl("file:///android_asset/index.html");

        //将网络视图作为App的视图

        setContentView(wv);