变脸式应用

[序]

本书将以实战练习和示例分析为主，给读者展现用H5技术制作手机应用的开发体验。

当需要制作一款手机应用，希望它既可以在手机浏览器或微信公众号之类的轻应用平台使用，也可以在安卓、苹果等手机上安装使用，由于各平台技术栈完全不同，光前端就需要至少三套人马在各平台各自为战，开发和维护成本极高。现在你多了一种用H5技术制作全平台手机应用的选择，不仅极大的降低开发成本，而且由于H5技术源于已经用了至少20多年的网页技术，门槛也远低于才兴起几年的手机平台开发技术。架构师在选型时会纠结，又想优雅的做全平台应用，又担心用网页技术制作的手机应用的体验到底行不行。

川剧中的变脸艺术，如行云流水般切换脸谱，令人惊叹。 如果把手机应用中的每个页面看成一张脸谱，在操作时我们也希望像变脸表演一样有着轻松流畅的体验。 而用传统的网页技术制作的仿手机应用和原生手机应用的体验尚有较大差距，主要原因是每个页面都是一张网页，在操作时有大量网页加载和刷新，不流畅且浪费大量流量。

对于网页刷新问题的解决方案是使用Ajax技术制作交互式无刷新网页。早在1998年前后，微软的Outlook Web access成为第一个应用了Ajax技术的成功的商业应用程序，2005年以后，随着谷歌地图、Gmail等交互式网页应用的流行，Ajax技术也开始流行起来，也诞生了“单网页应用(SPA)”这个概念。

在手机应用领域，由于早期手机性能弱，做应用程序基本只能使用原生开发语言，学习门槛很高。随着手机性能的增强和H5技术的流行，已经可以把“单网页应用”技术应用到手机上，让整个应用就是一个网页，而原本一张张相互链接的网页变成了H5应用中的一个个可流畅切换的逻辑页面，消除了网页加载，操作体验接近手机原生应用。

这种支持多逻辑页面的具有流畅的操作体验的H5单网页应用，我们将它称为变脸式应用。

对手机单网页应用有以下常见误解：

筋斗云前端框架（jdcloud-m）是一个变脸式单网页应用的开源开发框架，它以页面路由和接口调用为核心，提供多逻辑页支持和远程接口调用封装，同时对制作安卓、苹果原生应用也提供良好的支持，因而也是一个全平台H5应用框架。

本书就以该开发框架为基础，讲解手机应用开发中常见需求的解决方案。

运行变脸式应用

[任务]

用筋斗云前端框架创建一个H5应用项目myPRoject，在浏览器运行起来。

先从github上下载开源的筋斗云前端框架及示例应用：https://github.com/skyshore2001/jdcloud-m

建议安装git工具直接下载，便于以后更新，例如直接创建H5应用项目叫myproject：

如果github访问困难，也可以用这个git仓库： http://dacatec.com/git/jdcloud-m.git

下载后，假定myproject是我们的项目目录。其中，子目录server是H5应用目录，开发主要集中在这里。tool是用于优化和发布的工具，之后在站点上线优化时介绍。

设置WEB服务器（如Apache/nginx/IIS等），添加虚拟目录myproject, 指向myproject/server目录，这时，就可以直接运行起前端应用：

在开发环境下，建议配置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代码，可同时制作安卓应用、苹果应用、微信微站等。

（未完待续）