背景

App的开发一般都需要满足Android和iOS两个系统环境,也就意味着一个App需要定制两套实现方案,造成开发成本和维护成本都很高。为了解决这个问题,最好的办法就是实现一套代码跨端运行,所以Hybrid App混合应用模式应运而生。在Hybrid App整个开发框架上,有各种各样的框架,各种各样的技术选型,而现在主要的技术就是Web技术,不仅简单,更容易实现UI,开发者人数也比较多。目前市面上的大多数App都是采用Web+Native的混合技术来实现的。

随着移动互联网的发展和普及,越来越多的业务都有了移动App版本的实现,单个App的规模也越来越大。这也就造成App的开发不再是三两个人就能够完成,需要更多的人来开发。大型项目开发所面对的依赖管理、沟通成本问题,也出现在App开发的过程中,如果不解决好这两个问题,很可能会引起项目缺陷增多、开发效率降低,进而导致项目延期,并且也会造成项目后期维护的难度增大。

综上,对于中大型的App开发项目,需要一个既支持混合开发模式、又能够解决依赖和沟通问题的开发框架来有效的指导和规范开发。

核心需求

一个好的App开发框架,要能在框架层面解决中大型App开发中Hybrid开发框架选型、模块间解耦的问题,同时也要提供模块动态变更、动态升级的解决方案。

除了App开发框架之外,还应包括以下三部分内容:

Ÿ   后台发布管理平台

支持模块动态变更、动态升级,后台发布管理平台是与之想配套的后台管理功能,包括数据管理和App接口两部分。

Ÿ   持续集成方案

提供配套的持续集成方案,用于项目开发过程中自动打包。

Ÿ   H5模块开发规范

提供H5模块开发的规范,用于实现动态模块功能。

解决“规模变大”问题思路

分而治之

模块化,将业务功能划分成多个独立的模块;

模块间做到高内聚低耦合,互不干扰、并行开发

依赖统一管理

依赖不可避免;

对依赖进行统一规划管理;

模块间的依赖可以归纳为:

  • 页面间跳转

  • API调用

解决“跨平台”问题思路

Cordova (PhoneGap)

  • 业界最主流的开源移动跨端框架

  • HTML + CSS + JS +原生插件

  • 开放式的原生插件框架

  • 强大的社区力量

解决“动态升级”问题思路

App发布到应用市场后,往往需要一个比较长的审核周期,特别是苹果商店;当App的重要功能出现Bug时,需要有快速的应对方案,重新发版本到应用市场肯定是慢了。为了快速的应对业务需求的变化和紧急Bug的处理,App对动态升级的需求越来越频繁。所以实现一套动态升级方案,主要以模块为单位展开。

从动态模块的角度,将模块分为三种:NA模块、H5-offline模块、H5-online模块。

NA模块的页面都需要预置在App中,H5-offline模块的页面可以预置在应用中、也可以在应用安装后再下载,H5-online模块的页面部署在服务器端。

模块的动态性主要体现有以下几方面:

1、模块的icon、名字可以动态修改;

2、模块的三种类型之间可以互相切换,比如:某个模块本来是NA实现,上线后发现有重大Bug,可以切换到H5-offine或者H5-online的实现,如果没有这两种实现,可以切换到一个“敬请期待”的在线页面;

3、H5-offline模块支持版本升级。

对于模块动态升级,主要指的是H5-offline模块,对H5-offline模块的安全性要做充分的考虑:对模块的离线包有进行加密处理,也要对离线包里的文件进行哈希校验,防止被篡改。

技术架构

App开发框架应以模块化设计为基础,同时打通NA与H5两种不同技术实现的业务。模块主要分为两种形态:

Ÿ   NA模块

主要由NA页面组成,也可以是NA容器加载的H5页面,NA模块可以对外提供api;

Ÿ   H5模块

由H5页面组成,可以是离线页面也可以是在线页面,H5模块无法对外提供api,但是可以调用其他NA模块提供的api;

实现模块间的完全解耦,推荐模块代码不仅要逻辑上独立,最好是采用子工程的方式实现物理上的分离。通过三条总线机制来实现模块间的解耦:

Ÿ   API总线

主要提供模块api注册和调用两个能力;

Ÿ   页面导航总线

不区分NA和H5的融合页面设计,页面的打开和返回由页面导航总线统一调度;

Ÿ   模块总线

模块总线从逻辑上确定了模块的概念,同时支持模块的远程变更和动态升级;

采用业界最流行的Cordova框架来充当JS Bridge,Cordova拥有大量的社区插件可以使用,同时也提供了完整的插件开发规范,非常容易自定义开发插件。

开发框架应对API总线、页面导航总线、模块总线这些核心能力提供了cordova插件的实现,使H5页面也能够轻松的调用这些api,并且做到NA与H5调用无差异化。

开发框架发布件

App开发框架库:

framework(android&ios)

plugins(js)

App工程Demo(android&ios)

server:

发布管理平台的部署包、接口文档、部署手册等文件

产品白皮书:

对开发框架的使用进行详细的讲解

开发框架集成

  • 使用Cordova命令行创建项目工程;

  • 向工程中导入开发框架库framework(android&ios);

  • 为主工程和子工程创建开发框架统一约定的配置文件;

  • 在App启动的时候调用开发框架的初始化方法,进行初始化;

  • 集成完毕,可以在项目中正常使用开发框架的API

开发框架配置文件

在使用开发框架前,需要将api、page、module注册到开发框架对应的总线中,除了调用对应的注册外,开发框架推荐采用配置文件的注册方式,只需要将数据配在配置文件中,开发框架会自动完成注册。

开发框架的配置文件的命名约定为:开发框架名称-子工程名.xml,其中主工程为开发框架名称-main.xml,配置文件的约定放置的位置为:

Android放在主工程和子工程的assets的根目录下;

iOS放在主工程和子工程的bundle文件中。

例子如下:

开发框架模块总线

模块总线主要有两方面的功能:

在逻辑上,以模块为基础在开发框架配置文件中组织页面和API,使得逻辑更清晰;

在功能上,模块总线主要实现动态模块的功能,对外提供两个核心的API类:

ModuleBus提供模块的原子化操作方法;

ModuleHelper封装了ModuleBus提供的原子方法,实现了业务的串联,是一个快捷使用API的辅助类

注:模块总线将模块的状态分为:正常、未安装、有新版本(分强制升级和非强制升级)、已下载、模块数据被篡改。

开发框架页面导航总线

主要功能:

对NA页面和H5页面的跳转进行统一的调度,通过维护一个页面的栈来实现。

核心API:

开发框架页面API总线

API总线主要的作用是解耦模块间的方法调用,提供的核心API只有两个:

register

模块实现API后,向总线注册(一般由框架在解析配置文件时自动调用);

call

调用API,调用方通过API总线调用需要调用的API

使用举例

登录成功后,账户模块保存登录token,其他的模块需要获取token时,要调用账户模块提供的API获取。实现步骤如下:

1、账户模块实现GetTokenAPI,调用APIBus.register(“m_account”, “getToken”,GetTokenAPI.class)注册到API总线;

2、A模块需要获取token时,调用APIBus.call(“m_account”, “getToken”,“入参”)获取token,返回值是APIResult对象(

对象主要包含状态码和业务字符串)。

开发框架扩展

提供模块级别的开发框架:

  • NA模块提供MVC、MVP、MVVM等开发框架;

  • H5模块提供MVVM、SPA等开发框架;

  • H5模块提供微信的兼容支持


APP开发选择什么框架好? 请看这里!的更多相关文章

  1. app开发公司排名哪家强?看App Annie给出的答案

    app开发公司排名哪家强?这个答案不好定义,我们从第三方权威平台数据来看吧.App Annie在<全球移动应用市场2016年回顾>报告中从全球每月活跃用户数.全球下载量.全球收入等几个维度 ...

  2. 关于移动App开发前端UI框架选择

    问题:现在移动开发各种必须,而移动开发纠结在于怎样快速高效的开发出来. 做web开发有些年头了,成熟的前端套件(easyui,extjs,jqueryui)很是方便,可以开发出来规范一直的产品,各种组 ...

  3. 十个最适合 Web 和 APP 开发的 NodeJS 框架

    在浏览器以外运行 JavaScript 对于 JavaScript 爱好者来说非常神奇,同时也肯定是 web 应用程序开发界最受欢迎的进步之一.全球各地的开发者张开双臂拥抱 NodeJS. 对于新手来 ...

  4. 10 个最适合 Web 和 APP 开发的 NodeJS 框架

    在浏览器以外运行 JavaScript 对于 JavaScript 爱好者来说非常神奇,同时也肯定是 web 应用程序开发界最受欢迎的进步之一.全球各地的开发者张开双臂拥抱 NodeJS. 对于新手来 ...

  5. 项目实战 - 混合式App开发

    为何要使用混合式开发? 要说为什么使用Hybrid App [混合式开发],就要先了解什么是Native App[原生程序], Web App[网站程序]. Native App 是专门针对某一类移动 ...

  6. hybird app(混合式app开发)cordova ionic 创建相应平台的app

    hybird app(混合式app开发) 之ionic 框架平台 guide cordova 创建相应平台的app 1. npm install -g cordova //全局安装cordova-cl ...

  7. 前端 为什么我选择用框架而不是Jquery

    对于很多习惯用Jquery的前端甚至后端,都很不解,为什么不用Jquery而是框架.觉得框架学起来麻烦,成本高,今天我以我浅薄的知识来总结一下为什么前台开发选择用框架: 前台开发,主要的性能是卡在回流 ...

  8. iOS App开发那些事:如何选择合适的人、规范和框架?

    http://www.cocoachina.com/ios/20141202/10386.html 自从做Team Leader之后,身上权责发生了变化,于是让我烦恼的不再是具体某个功能,某个界面的实 ...

  9. 跨平台移动端APP开发---简单高效的MUI框架

    MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...

随机推荐

  1. 实战-CentOS6.8配置nfs服务

    如题 #服务端:请自行配置yum源 命令操作:yum install nfs-utils rpcbind #配置文件编辑:vi /etc/exports /data 0.0.0.0 (rw,sync, ...

  2. replicated mode vs global mode - 每天5分钟玩转 Docker 容器技术(105)

    Swarm 可以在 service 创建或运行过程中灵活地通过 --replicas 调整容器副本的数量,内部调度器则会根据当前集群的资源使用状况在不同 node 上启停容器,这就是 service ...

  3. Selenium中如何使用xpath更快定位

    在学习Selenium路上,踩了也不少坑,这是我最近才发现的一个新写法,好吧,"才发现"又说明我做其他事了.对的,我现在还在加班! 开车~~~ 例子:知乎网 标签:Python3. ...

  4. Codeforces 817F MEX Queries

    题意:对一个维护三种操作:1.将[l..r]中的数全部加入集合中.2.将集合中[l..r]范围内的数删去.3.将集合中在[l..r]中的数删去,并将之前不在集合中的数加入集合 考虑到最近线段树总是写爆 ...

  5. 基于Jmeter的接口自动化测试实践

    在去年实施了一年的三端(PC.无线M站.无线APP[Android.IOS])后,今年7月份开始,我们开始进行接口自动化的实施,目前已完成了整个框架的搭建以及接口的持续测试集成.今天做个简单的分享. ...

  6. Vue 浅谈前端js框架vue

    Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...

  7. applicaitonContext属性未注入, 请在applicationContext.xml中定义SpringContextHolder.

    我用的jeesite框架,在使用定时任务时,出现一些问题,,1.在windows上项目可以在tomcat下,运行2.在linux下项目在tomcatgh下,却出现问题: 15-Dec-2017 15: ...

  8. 》》HTML5 移动页面自适应手机屏幕四类方法

    1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...

  9. (sqlite3.OperationalError) no such table: users [SQL: 'SELECT users.id AS users_id, users.email AS users_email, users.username AS users_username, users.role_id AS users_role_id, users.password_hash A

    在注册新用户的时候报错: (sqlite3.OperationalError) no such table: users [SQL: 'SELECT users.id AS users_id, use ...

  10. 使用Intellij IDEA的svn时提示出错:Can't use Subversion command line client: svn

    问题 原因是安装SVN的时候没有安装command-line功能,要单独安装VisualSVN 下载页面:http://subversion.apache.org/packages.html SVN1 ...