聊一聊 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 的优化策略。

总结

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180307G1BTFE00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励