聊一聊 HTML5Plus 应用与 Web 应用的异同

虽然 5+App 是用 WebApp 的技术开发移动应用，但是两者还是存在许多差异的。本文就这些差异点及相同点，谈一下个人的理解。

本文中的 Web 应用（WebApp）主要指的是移动网站。

开发与发布

开发环境

前面的文章已经讲过，5+App 的开发依赖 5+Runtime 引擎。需要下载相关的 IDE 开发，才可以调用原生的能力。

WebApp 的开发没有那么多的限制，有个编辑器和浏览器就可以满足了。

发布运行

5+App 打包生成的是 或 文件，是原生移动应用包。应用需要下载并安装在手机系统上，才可以运行使用。

WebApp 部署在远程服务器上，无论是手机还是电脑等设备，都可以通过浏览器直接访问并使用，无需下载相关的应用包。

应用结构

结构

5+App 更推荐采用 C/S 结构，而非 WebApp 的 B/S 结构。

之所以说“更推荐”，是因为 Webview 也可以加载远程的 HTML 等资源来实现应用的开发。但这种模式依旧别于 B/S 结构，并且在这种模式下应用的体验并不理想。

5+App 的应用资源除一些特定的文件外，都是静态资源。也就意味着，不能部署诸如 PHP、JSP 等动态网页，因为没有相应的解析器去将它们处理成 文件。

目录

首先来看一个 5+App 和 WebApp 的最简目录结构。

5+App

WebApp

通过目录树的对比，可以明确看到差异。5+App 的根目录下多了一个 文件。该文件主要用于填写应用相关的信息，结合 HBuilder 进行配置可以简化许多操作。

窗口管理

这里的对比，不考虑浏览器自身的缓存，以及 SPA 模式。

5+App 通过 Webview 组件加载页面内容，窗口的切换通过控制不同 Webview 的创建与销毁等实现。每个 Webview 都是一个单独的窗口，因而切换到已存在或未被销毁的 Webview 时，除非有主动修改等操作，否则页面内容不会重新加载。

WebApp 在 MPA 模式下的窗口切换，通常会使用 的方式进行。这种方式下，每次切换 都会去请求相关的资源，因而每次切换后的页面内容都是最新的。

其实，5+App 的新开窗口，有点类似在 Web 中使用 ，使用一个新的窗口加载页面而不是在本页面进行跳转。这一点，在 PC 的浏览器上测试体验更为直观。

相同点

上面做的一些对比，更多地是在讲 5+App 与 WebApp 的差异。接下来的部分，简要概括一下这两者的相同之处。

技术栈

抛开服务器的动态页面技术，目前已有的开发 WebApp 的技术栈，基本都可以用于开发 5+App。无论你是用 或是 开发页面，最终都会编译成相应的 、 以及 文件，这些都是浏览器可以识别和执行的文件。

最近经常有人问到“vue-cli开发的应用怎么打包成 5+App”，其实这个问题仔细想想就会有答案。无论是开发的是 SPA 的还是 MPA 的应用，只要将编译后的应用资源放到 5+App 的应用目录下就可以使用。

运行环境

JavaScript 可调用的功能，依赖于其所处的宿主环境（运行环境）。

5+App 和 WebApp 的运行环境，其实是比较一致的。前者是基于浏览器内核的组件，后者则是更为强大的浏览器应用，可以概括地理解为“浏览器环境”。

兼容性

既然是浏览器环境，那么就一定存在兼容性问题。移动端的兼容处理，不会像 PC 端那样复杂和多样。如果你喜欢用 或者更高的版本进行开发的话，一定要用 等工作做好降级编译的处理工作。

需要注意的是，5+Runtime 本身并没有集成定制的 Webview 组件，使用的是系统默认的 Webview。因此，如果在某个手机上 5+App 的 或者 表现有别于其它设备，那么极有可能是系统 Webview 的版本问题，需要做一些兼容处理。

优化

许多 WebApp 的优化策略，同样适用于 5+App。比如压缩图片，使用 CDN 存放图片资源，图文信息使用懒加载等等。

由于 5+App 采用 C/S 结构，因此 js 和 css 库资源放在应用资源内会更好。视具体情况而定，不能完全照搬 WebApp 的优化策略。

总结

由于本人的经验及认识有限，本文并不足以概括所有的异同点。一些细节和具体问题需要在实际的开发工作中，才能发现和解决。实践出真知，多做练习和尝试才会有更多的收获。