跨平台开发框架简介

维护人:戴荔春 (6016)

说明

介绍跨平台开发的概念以及当前的开发框架

目录

• 什么是跨平台开发
  • 常用的几种APP开发模式
  • 当前的跨平台开发模式
• 跨平台开发框架
  • 为什么要用跨平台开发框架
  • 框架做了什么
  • 框架架构
  • 采用gulp自动构建
  • 跨平台开发流程
• 更多
  • Dcloud与H5+的关系
  • 跨平台开发的前期准备工作

什么是跨平台开发

跨平台开发是指“一套代码,多个平台运行”这种开发模式，主要应用于移动APP开发,即“开发一套代码,可以打包成Android APP、iOS APP；同时可以部署到服务器上，允许移动浏览器访问、允许微信浏览器访问”。在详细介绍跨平台开发之前,先介绍下当前常用的几种APP开发模式

常用的几种APP开发模式

当前常用的几种APP开发模式如下图:

http://naotu.baidu.com/file/1eb556f3380e8189be859348527ec518?token=a5a049eb4c618e70

上述几种开发模式的简单介绍

• Native APP

  即原生APP开发，使用各种平台的原生语言开发

  • 优点是性能最高
  • 缺点是开发维护成本高，iOS下版本更新迭代不方便，并且原生人员相对来说比较稀缺
• ReactNative

  由facebook推出的一种APP开发方案，是通过JS来写代码，通过JS写原生UI，然后通过React环境编译成APP。

  • 优点是性能媲美原生APP，而且一次学习多处开发，只需要投入学习一次，之后便能一个人同时开发Android和iOS
  • 缺点是学习成本不低，而且Android和iOS开发有区别，并不能传统意义上的一套代码多处运行
• Hybrid APP

  即混合开发模式，原理为原生APPWebview加载H5页面，并通过JSBridge技术提供API供H5页面调用，是H5页面能调用原生的API，达到拓展H5功能。一般这种模式下会用第三方的SDK进行开发，如APPCAN，Dcloud公司提供的开发方案。

  • 优点是开发便捷，一套代码，适用于Android和iOS，如果封装的更好，甚至可以同时适用于普通浏览器和微信，而且针对新手友好，只需要使用JS、HTML、CSS开发，使用对应框架的IDE打包，即可完成一个完整的应用，而且这种应用性能虽然比不上原生，但是比起WEB APP要好太多，最适合初步接触APP开发的前端人员
  • 缺点是相比原生应用，性能上有所损耗，特别是一些交互比较复杂、内容比较多的页面，会比较卡，另外由于是使用的第三方的SDK，所以如果第三方SDK出现BUG，很难解决，只能等待官方去修复
• NativeJS混合开发

  这种模式和Hybrid类似，也是属于混合开发模式，但是区别是，这种模式下不会使用第三方公司的框架，而是直接基于混合开发的原理来实现，一般情况下，使用这种模式开发的是一些技术能力较强的公司或个人，他们会基于混合开发原理，自己开发出一套混合开发框架。

  • 优点是跨平台开发，一套代码运行多个平台，而且通用是基于JS、HTML、CSS开发，开发效率高于原生，并且不依赖于第三方公司，能够自定义结合业务或者优化，比起普通的Hybrid模式，性能上会更好
  • 缺点是需要原生人员投入去更新维护混合开发框架，不适合一些技术能力较弱的公司和个人。而且开发速度仍然略逊与Hybrid模式
• Web APP

  即普通的移动网页组成的应用，WEB APP和PC网页会有区别，一般WEB APP会分为两种模式，SPA(Single-page Application)和MPA(Multi-page Application)。而前面跨平台开发中一套代码开发，同时会支持MPA形式。一般情况下进行跨平台APP开发会附带部署MPA，所以一般会使用MPA来作为WEB APP。另一种SPA形式交互性要比MPA形式要好，使用一些大型的网站开发，但是复杂度更高，成本更大。

  • 优点是开发最为迅速，基于浏览器运行，用户无需安装多余的APP，而且更新迭代最为迅速
  • 缺点是相比混合开发APP和原生APP，用户体验差很多，而且大多数的WEB APP是基于网络的，无法离线运行

当前跨平台开发使用的模式

当前跨平台开发模式有两种

一种是Hybrid APP模式

基于Dcloud公司提供的H5+SDK进行APP开发，使用JS、HTML、CSS编写代码，开发效率非常高，适用于一些小型应用和一些新闻展示类应用。

一种是NativeJS混合开发模式

基于本公司提供的混合开发框架，使用JS、HTML、CSS编写代码，开发效率高，而且性能损耗小，适合一些大型应用和一些内容交互负责的订制化应用。

跨平台开发框架

为什么要用跨平台开发框架

使用跨平台开发框架可以大大提高开发效率。 如上述的开发中，如果没有一套统一的框架，那么开放H5+APP和混合开发APP时，代码中会充斥着大量的底层API，而且如果还需要兼容浏览器版本，那么代码会更乱，所以这时候需要一套开发框架，这套框架封装底层api，对外提供一套统一的API，就算底层API有所改动，也只需要更新框架，而不是重构整个项目。

跨平台框架做了什么

跨平台框架做了如下事情

• 集成5+ API，对负责逻辑做二次封装，对外提供新的简化版API，同时内部兼容浏览器版本，使的基于框架开发出的代码可以同时支持APP和浏览器
• 集成混合开发ejs规范，内部封装原生混合开发api，开发人员可基于同一套框架进行混合APP开发
• 同步提供框架使用在线文档，基于文档可以更快速的上手使用框架

框架架构

框架架构如下:

采用Sea.js进行模块化开发

框架使用SeaJS进行模块化开发

• 模块化开发方案

  JS代码模块化开发是未来的趋势，前端采用模块化开发，使的开发体验增加，效率提高，代码管理，更加清晰，规范。 模块化开发主要有如下特点:

  • 减少命名冲突，消除全局变量
  • 一个文件即一个模块，组织结构更清晰
  • 自动处理加载依赖，按需加载

  目前模块化开发规范有多种标准，如图:

• SeaJS模块化开发

  seajs正是一种CMD(Common Module Definition)规范的WEB模块加载器，通过seajs，可以对JS代码进行模块化开发。

  • 在没有使用seajs以前，JS是通过<script>标签直接引入，这样一旦依赖的脚本过多，逻辑过复杂，就会严重影响开发效率，而且一定某一个脚本更改了，其它相关的文件也需要改动，而且不同库之间的依赖不好处理，耦合性过高，不利于维护。
  • 使用了seajs以后，框架代码都可通过require模块化引入，外部的JS代码耦合性大大减少，特别是框架内部的代码更是能通过别名的方式来引入，就是框架某文件修改，也只需要修改一个配置文件而已，大大提高了开发效率。

  Seajs模块化开发有同步require与异步require，内部依赖处理流程如图:

• SeaJS github地址

  https://github.com/seajs

基于mui前端框架

Mui是一套不依赖其它任何第三方库的前端框架，以iOS平台UI为基础，补充部分Android平台特有的UI控件，轻量级，全部资源加起来不超过200K，适合移动前端开发。

• Mui是由Dcloud公司推出的，恰巧H5+ 跨平台APP开发方案也是Dcloud公司推出的，两者十分契合，所以作为跨平台开发中比不可少的一部分。
• 跨平台框架中很多5+功能都基于mui进行二次封装(如下拉刷新)，简化了使用，有些基于mui进行了二次优化(如webview优化)，提高了性能。

• Mui展示效果

  如图

• Mui体系架构

  Mui体系架构如下图:

• Mui官网

  http://dev.dcloud.net.cn/mui/

整合H5+ API

Html5+是Dcloud公司推出的“增强版手机浏览器引擎”，旨在拓展Html5的功能，调用原生API，而且通过其中的Native.js更是能够让原生的40万API随意调用。

跨平台框架中，对Html5+ API进行二次封装，对外提供统一调用方式，对内向下兼容普通浏览器，达到跨平台开发目的。

• Html5+架构

  Hmlt5+应用架构如下：

  Hmlt5+ JS插件实现原理

  HTML5+ 基座扩展采用三层结构，JS层、PluginBridge层和Native层,其中JS层在Webview页面调用，触发Native层代码，获取执行结果。PluginBridge层将JS层请求进行处理，触发Native层扩展插件代码。Native层是插件扩展的平台原生代码，负责执行业务逻辑并执行结果返回到请求页面。

  异步插件工作流程

  同步插件工作流程

• H5+官网

  官网:http://www.dcloud.io/runtime.html

  API网址:http://www.html5plus.org/doc/zh_cn/accelerometer.html#

制定混合开发规范EJS

EJS是公司为了原生混合开发而推出的一种混合开发规范，里面规定原生应该提供哪些API，JS应该如何调用这些API。

跨平台框架中集成了EJS API，使的在框架中可以使用EJS API，和5+开发保持同一套代码规范，达到跨平台开发效果。

EJS介绍如下

更多参考：EJS使用文档

封装常用H5功能组件

除了上述的H5+和EJS，跨平台框架中另一部分重要的功能就是封装了一些常用的H5功能组件，简化使用。比如字符集操作相关，MD5加密，H5文件上传，H5本地存储，日期操作，下拉刷新，常用UI组件等等

采用gulp自动构建

现在前端开发中，自动构建往往不可避免，比如自动构建进行资源压缩，自动构建MD5签名解决缓存等。一般来说现在的自动构建都是基于Node后台的。

跨平台框架同样有一套自己的自动构建方案，基于Gulp自动构建，根据项目和代码规范，定制化gulfile.js文件，开发源码完毕后，通过自动构建工具，构建出部署程序，从而达到解决资源压缩，文件缓存等问题。

• 自动构建流程如下

• 自动构建方案实现

  参考 文件md5签名解决静态资源缓存和更新问题

跨平台开发流程

基于跨平台开发框架，项目开发流程如下:

更多参考 跨平台项目开发流程

更多

Dcloud与H5+的关系

很多人在用到H5+开发时，分不清H5+,Mui,Dcloud之间的关系，这里梳理下上述几者之间的关系

http://naotu.baidu.com/file/301308232d4cb7a71894340031f56dca?token=83cad7056c6c64b3

跨平台开发的前期准备工作

这里简要介绍跨平台开发的前期准备

http://naotu.baidu.com/file/975c52c99229ee7dac51cbede131c152?token=c5eb91953bb0d901