[序]
本书将以实战练习和示例分析为主，给读者展现用H5技术制作手机应用的开发体验。
当需要制作一款手机应用，希望它既可以在手机浏览器或微信公众号之类的轻应用平台使用，也可以在安卓、苹果等手机上安装使用，由于各平台技术栈完全不同，光前端就需要至少三套人马在各平台各自为战，开发和维护成本极高。现在你多了一种用H5技术制作全平台手机应用的选择，不仅极大的降低开发成本，而且由于H5技术源于已经用了至少20多年的网页技术，门槛也远低于才兴起几年的手机平台开发技术。架构师在选型时会纠结，又想优雅的做全平台应用，又担心用网页技术制作的手机应用的体验到底行不行。
川剧中的变脸艺术，如行云流水般切换脸谱，令人惊叹。
如果把手机应用中的每个页面看成一张脸谱，在操作时我们也希望像变脸表演一样有着轻松流畅的体验。
而用传统的网页技术制作的仿手机应用和原生手机应用的体验尚有较大差距，主要原因是每个页面都是一张网页，在操作时有大量网页加载和刷新，不流畅且浪费大量流量。
对于网页刷新问题的解决方案是使用Ajax技术制作交互式无刷新网页。早在1998年前后，微软的Outlook Web Access成为第一个应用了Ajax技术的成功的商业应用程序，2005年以后，随着谷歌地图、Gmail等交互式网页应用的流行，Ajax技术也开始流行起来，也诞生了“单网页应用(SPA)”这个概念。
在手机应用领域，由于早期手机性能弱，做应用程序基本只能使用原生开发语言，学习门槛很高。随着手机性能的增强和H5技术的流行，已经可以把“单网页应用”技术应用到手机上，让整个应用就是一个网页，而原本一张张相互链接的网页变成了H5应用中的一个个可流畅切换的逻辑页面，消除了网页加载，操作体验接近手机原生应用。
这种支持多逻辑页面的具有流畅的操作体验的H5单网页应用，我们将它称为变脸式应用。
对手机单网页应用有以下常见误解：
- 只能做做小工具，不适合做大型商业应用。这是因为没有使用好的模块化开发模型，去找个支持大型开发的好框架先。
- 耗内存，耗流量，性能低下。某些单页应用简单地将所有逻辑页一次性全部加载，没有逻辑页优化，也没有做好缓存、图片等优化，而招此骂名。解决方法是找个支持动态加载逻辑页、支持H5应用优化的开发框架。
- 没法做搜索引擎优化(SEO)。以前做网页的同时要兼顾做SEO，现在其实可以将做网页应用和做SEO分离了，对SEO可以单独设计，从而做的更好。这就像用户访问一个站点，如果是手机访问就跳转手机版，如果是电脑访问就跳转电脑版，而如果是爬虫机器人访问，也可以备好一套狗粮，不再和人吃的一样。
筋斗云前端框架（jdcloud-m）是一个变脸式单网页应用的开源开发框架，它以页面路由和接口调用为核心，提供多逻辑页支持和远程接口调用封装，同时对制作安卓、苹果原生应用也提供良好的支持，因而也是一个全平台H5应用框架。
本书就以该开发框架为基础，讲解手机应用开发中常见需求的解决方案。
运行变脸式应用
[任务]
用筋斗云前端框架创建一个H5应用项目myproject，在浏览器运行起来。
先从github上下载开源的筋斗云前端框架及示例应用：https://github.com/skyshore2001/jdcloud-m
建议安装git工具直接下载，便于以后更新，例如直接创建H5应用项目叫myproject：
git clone https://github.com/skyshore2001/jdcloud-m.git myproject
如果github访问困难，也可以用这个git仓库： http://dacatec.com/git/jdcloud-m.git
下载后，假定myproject是我们的项目目录。其中，子目录server是H5应用目录，开发主要集中在这里。tool是用于优化和发布的工具，之后在站点上线优化时介绍。
设置WEB服务器（如Apache/nginx/IIS等），添加虚拟目录myproject, 指向myproject/server目录，这时，就可以直接运行起前端应用：
http://localhost/myproject/
在开发环境下，建议配置WEB服务器，将所有文件都设置为不缓存(输出HTTP头Cache-Control: no-cache)，避免修改文件后仍然显示旧内容。
测试时建议使用chrome浏览器，按F12打开开发者模式，点左上角的手机模式模拟(toggle device toolbar)或按Ctrl-Shift-M，模拟手机上的运行效果应用。
在这个示例应用中，用户可以创建订单、查看订单列表和订单详情，查看个人信息等，分别在各个逻辑页中展现，逻辑页跳转切换时不会刷新整个网页，这就是典型的变脸式应用。
变脸式应用与后端的交互完全是是业务数据，后端不传输任何网页、网页模板或前端样式。这里由于还没有连接后端，示例中使用的数据均为模拟后端接口返回的数据。
筋斗云前端支持模拟接口返回数据，这在前端开发时非常有用。文件mockdata.js中即是应用使用到的接口模拟，下面章节里将会详细介绍。
在server目录下，lib目录下的js/css文件都属于框架使用的文件，不宜随意修改，其中app_fw.js是筋斗云前端框架的核心部分。
page目录是默认的逻辑页目录，比如首页、登录页、订单列表等逻辑页的html和js文件都放在这里。
cordova目录是用于制作原生手机app时使用的。筋斗云框架支持全平台应用，即一套H5代码，可同时制作安卓应用、苹果应用、微信微站等。
（未完待续）