维护人:戴荔春 (6016)
介绍跨平台开发的概念以及当前的开发框架
跨平台开发是指“一套代码,多个平台运行”这种开发模式,主要应用于移动APP开发,即“开发一套代码,可以打包成Android APP、iOS APP;同时可以部署到服务器上,允许移动浏览器访问、允许微信浏览器访问”。在详细介绍跨平台开发之前,先介绍下当前常用的几种APP开发模式
当前常用的几种APP开发模式如下图:
http://naotu.baidu.com/file/1eb556f3380e8189be859348527ec518?token=a5a049eb4c618e70
即原生APP开发,使用各种平台的原生语言开发
由facebook推出的一种APP开发方案,是通过JS来写代码,通过JS写原生UI,然后通过React环境编译成APP。
即混合开发模式,原理为原生APPWebview加载H5页面,并通过JSBridge技术提供API供H5页面调用,是H5页面能调用原生的API,达到拓展H5功能。一般这种模式下会用第三方的SDK进行开发,如APPCAN,Dcloud公司提供的开发方案。
这种模式和Hybrid类似,也是属于混合开发模式,但是区别是,这种模式下不会使用第三方公司的框架,而是直接基于混合开发的原理来实现,一般情况下,使用这种模式开发的是一些技术能力较强的公司或个人,他们会基于混合开发原理,自己开发出一套混合开发框架。
即普通的移动网页组成的应用,WEB APP和PC网页会有区别,一般WEB APP会分为两种模式,SPA(Single-page Application)和MPA(Multi-page Application)。而前面跨平台开发中一套代码开发,同时会支持MPA形式。一般情况下进行跨平台APP开发会附带部署MPA,所以一般会使用MPA来作为WEB APP。另一种SPA形式交互性要比MPA形式要好,使用一些大型的网站开发,但是复杂度更高,成本更大。
当前跨平台开发模式有两种
基于Dcloud公司提供的H5+SDK进行APP开发,使用JS、HTML、CSS编写代码,开发效率非常高,适用于一些小型应用和一些新闻展示类应用。
基于本公司提供的混合开发框架,使用JS、HTML、CSS编写代码,开发效率高,而且性能损耗小,适合一些大型应用和一些内容交互负责的订制化应用。
使用跨平台开发框架可以大大提高开发效率。 如上述的开发中,如果没有一套统一的框架,那么开放H5+APP和混合开发APP时,代码中会充斥着大量的底层API,而且如果还需要兼容浏览器版本,那么代码会更乱,所以这时候需要一套开发框架,这套框架封装底层api,对外提供一套统一的API,就算底层API有所改动,也只需要更新框架,而不是重构整个项目。
跨平台框架做了如下事情
框架架构如下:
框架使用SeaJS进行模块化开发
JS代码模块化开发是未来的趋势,前端采用模块化开发,使的开发体验增加,效率提高,代码管理,更加清晰,规范。 模块化开发主要有如下特点:
目前模块化开发规范有多种标准,如图:
seajs正是一种CMD(Common Module Definition)规范的WEB模块加载器,通过seajs,可以对JS代码进行模块化开发。
Seajs模块化开发有同步require与异步require,内部依赖处理流程如图:
Mui是一套不依赖其它任何第三方库的前端框架,以iOS平台UI为基础,补充部分Android平台特有的UI控件,轻量级,全部资源加起来不超过200K,适合移动前端开发。
如图
Mui体系架构如下图:
Html5+是Dcloud公司推出的“增强版手机浏览器引擎”,旨在拓展Html5的功能,调用原生API,而且通过其中的Native.js更是能够让原生的40万API随意调用。
跨平台框架中,对Html5+ API进行二次封装,对外提供统一调用方式,对内向下兼容普通浏览器,达到跨平台开发目的。
Hmlt5+应用架构如下:
Hmlt5+ JS插件实现原理
HTML5+ 基座扩展采用三层结构,JS层、PluginBridge层和Native层,其中JS层在Webview页面调用,触发Native层代码,获取执行结果。PluginBridge层将JS层请求进行处理,触发Native层扩展插件代码。Native层是插件扩展的平台原生代码,负责执行业务逻辑并执行结果返回到请求页面。
异步插件工作流程
同步插件工作流程
官网:http://www.dcloud.io/runtime.html
API网址:http://www.html5plus.org/doc/zh_cn/accelerometer.html#
EJS是公司为了原生混合开发而推出的一种混合开发规范,里面规定原生应该提供哪些API,JS应该如何调用这些API。
跨平台框架中集成了EJS API,使的在框架中可以使用EJS API,和5+开发保持同一套代码规范,达到跨平台开发效果。
EJS介绍如下
更多参考:EJS使用文档
除了上述的H5+和EJS,跨平台框架中另一部分重要的功能就是封装了一些常用的H5功能组件,简化使用。比如字符集操作相关,MD5加密,H5文件上传,H5本地存储,日期操作,下拉刷新,常用UI组件等等
现在前端开发中,自动构建往往不可避免,比如自动构建进行资源压缩,自动构建MD5签名解决缓存等。一般来说现在的自动构建都是基于Node后台的。
跨平台框架同样有一套自己的自动构建方案,基于Gulp自动构建,根据项目和代码规范,定制化gulfile.js文件,开发源码完毕后,通过自动构建工具,构建出部署程序,从而达到解决资源压缩,文件缓存等问题。
基于跨平台开发框架,项目开发流程如下:
更多参考 跨平台项目开发流程
很多人在用到H5+开发时,分不清H5+,Mui,Dcloud之间的关系,这里梳理下上述几者之间的关系
http://naotu.baidu.com/file/301308232d4cb7a71894340031f56dca?token=83cad7056c6c64b3
这里简要介绍跨平台开发的前期准备
http://naotu.baidu.com/file/975c52c99229ee7dac51cbede131c152?token=c5eb91953bb0d901