跨平台项目开发流程

维护人:戴荔春 (6016)

说明

整理使用跨平台框架开发跨平台项目的流程。这里主要指开发流程,不包括一些其它沟通准备

目录

• 前言
  • 跨平台项目类型
  • 整体概述
  • 注意要点
• 流程
  • 跨平台项目开发完整流程
  • 源码开发过程的流程
  • 自动构建流程
  • 特别注意
• 新人指引

前言

介绍下目前的跨平台开发

跨平台项目类型

目前跨平台开发是更为广义上的跨平台,不仅仅只限于APP开发,包括如下:

• 5+ APP项目

  最开始的跨平台开发就是指的5+ APP开发,不过随着不断的拓展完善,现在只是作为跨平台开发的一部分。

  这种模式也就是 “Hybrid” 模式,基于Dcloud公司提供的5+ SDK,可以达到只用html,css,js即可做成完整的Android APK,iOS IPA效果

  优点是开发效率非常高,很短时间内就能完成所有功能,并且能够独立开发完整的APP功能,而且基于Hbuild的在线打包功能十分方便,可以不需要开发人员关注原生方面的事情,特别适合前端人员(这里泛指只会js,css,不会原生APP开发的人员)进行独立开发。特别是基于框架开发后,更能同时兼容普通的移动浏览器访问,进一步提高了开发效率

  缺点是这种模式只适合做一些交互弱的APP(如新闻展示类),遇到一些交互要求较高的APP(比如涉及直播上传,多动画等)就不适合。交互要求高的APP一般会考虑EJS开发模式或者是原生开发。

  目前跨平台开发这种类型还是居多(因为确实开发效率高,适合展示类应用)

• EJS APP项目

  这种类型是为了弥补 5+ APP的不足之处而出的。适合一些功能较为强大的APP开发。拓展了跨平台开发的应用范围。

  这种模式的原理是有原生开发人员提供APP容器,提供可供调用的拓展API。然后前端页面一样使用Html,最终原生通过Webview加载前端页面,前端页面内部即可调用原生拓展的EJS API,达到类似于5+ API的效果。

  优点是性能方面明显要优于 5+ APP。 在一些性能要求比较高或交互较强的APP开发上 效果更好。而且同时也具备跨平台功能(因为这种模式下主要页面都是用Html写的,具备跨平台功能)。开发效率会大大高于原生。

  缺点是相比于5+类型,开发效率有所降低。而且与5+可以独立完成APP开发不同。这种模式开发要求前端人员和原生人员进行一定程度上的联调。而且目前EJS API还不够完善。有些功能实现上可能会耽误些时间。(当然仍然是要高于原生的)。而且目前由于EJS尚未完善,所以尚未整合进入跨平台框架。

  后续完善EJS,并将EJS整合进入框架后,这种模式的优势应该就会慢慢体现出来了。

• 微信 项目

  这里仅仅指微信前端网页的开发,不包括后台开发。是最近拓展了一种项目类型。

  微信项目相比普通H5项目,主要区别是,需要涉及到 网页授权和JSSDK调用问题。然后就是部署的服务器必须要备案,否则无法正常访问。这里微信开发指南中已经整合完毕了的,可参考 微信开发指南

  微信项目最多的特点是,开发,部署完毕后,可以将页面地址挂载到微信公众号菜单中,并且页面内部可以使用微信特有功能

• H5 项目

  这里泛指能被移动浏览器正常访问的项目

  上述的5+ 项目或者EJS 项目,使用框架进行开发都能自动兼容浏览器访问的,因为采用跨平台开发就是能达到一套代码,多端发布的效果的。

  请注意,H5项目一般情况下只是 5+ APP或EJS APP的附带产物,原则上不会仅仅只开发移动H5项目。(目前默认是MPA形式,如果需要SPA形式的,不属于目前的跨平台开发范围-可以单独针对性的开发)

整体概述

目前整体项目流程属于: 基于框架进行源码编写 ->通过自动构建构建部署目录->用部署目录部署或生成APP。而自动构建依赖于特定的目录结构和规范。所以开发时一定要注意规范。详情参考 注意要点

注意要点

请参考 跨平台开发注意要点

流程

跨平台项目开发完整流程

跨平台项目开发的完整流程如图

源码开发过程的流程

即完整流程图中的源码开发部分

自动构建流程

项目自动构建流程如图

前提是自己电脑上有运行过自动构建示例,并运行成功。另外自动构建对项目目录有要求,参考 注意要点

• 参考: Node.js开发大纲
• 参考: gulp自动构建大纲
• 参考: 自动构建md5签名解决缓存问题

自动构建依赖文件 参考: cacheSolution_md5SignFile.zip(这个是上述示例中的demo,将里面的项目替换为自己的项目即可进行自动构建)

//将里面的这行代码换位自己的项目目录即可,如换位本项目(示例)
var projectPath = '/doc.web.crossPlatformGroup';
			

特别注意

鉴于实际项目开发中,大量时间浪费在和接口沟通,以及协助接口人员解决问题上,因此要求跨平台开发人员严格遵循如下规范

• 根据上图开发流程,页面重构+Mock接口调试完毕后,并自测通过后,发一封任务进度追踪邮件

  此封邮件中反馈我们完成上述工作的时间节点,强调我们的工作已经大部分完成,剩余工作等等接口人员自测正式接口通过后,再对接正式接口,并且要求接口人员反馈完成节点

  此步骤非常重要,后续每一个跨平台小组的项目中,都需要有这样一封邮件,如果接下来接口人员完成困难,我们可以进行协助(但是这属于额外的任务时间),如果后续项目发生扯皮事件,以此邮件作为凭据。

新人指引

对于一些刚接触框架的新人来说,可以按照如下步骤来进行学习:

• Step1: 学习 跨平台开发简介,初步对跨平台开发有所印象
• Step2: 学习 hello word示例,自己构建根据示例构建一个hello word项目
• Step3: 学习 新手入门,根据里面的步骤,慢慢加深对跨平台开发和框架的理解
• Step4: 学习 跨平台开发流程(本文),对实际项目的开发流程有了解,并根据本文和以前学习的知识,进行实际项目的开发,应用
• Step5: 进一步学习跨平台开发,学习在线文档,逐渐提升自己的技术水准