1. 目前手机 APP采用混合与原生相接合的模式比较多,本人在项目中也使用到相关的内容,因为可能以后不一定能涉及到这块内容,所以写个总结吧。
2. 我们采有的模式是在原生的应用中通过调用相关的WebView组件来实现,所有页面都通过H5及JS与原生交互实现。
3. 此种构架也是不断变化的,最开始我们采用基本是纯原生的来实现,原生的在体验上应该还是不错的,但涉及的工作量比较大,而且因为版本更新比较快,升级也麻烦。后来就采用了混合模型,基本上也是采用H5与原生JS的方式,使用简化版本的Phonegap,基于开源phonegap的早期版本来实现的,所以我们使用现有的代码进行优化。页面上的组件基本是公司的前端实现的,产品也做也来了。最终因为种种原因还是放弃,最后选择了framework7做为手机H5框架,这里我也不用重点介绍framwork7,主要谈谈我们对framework7的使用。
4. 手机的系统架构如下: 手机前台服务使用srpingmvc实现(后期可考虑nodejs实现),中台使用现成的模式提交API接口供前端服务使用。在这两层之前通过加协议转换层实现通讯,一方面为安全,第二方面主要提供通用的接口,而且中间层可以增加规则并都支持平行扩展。最后是手机app与前端服务,及app与js通过页面对原生交互。
5. 展示层使用H5与framework7实现,利用frameowrk7,我们自己实现了JS上的MVC模式。实现方法也比较简单。 a. 在通过JS中配置路由,并记每个JS模块实现 init方法,加载页面之前会调用 controller, controller再加载view,view中通过 JS模板处理与加载数据显示。
6. 贴一些核心的代码:
var hash = {
index : 'index', guide : 'guide', login : 'login', identity : 'identity', audit : 'audit', broker : 'broker'};
function load(controllerName, query) { if (controllerName in hash) { require(['controllers/' + hash[controllerName] + 'Controller'], function (controller) { controller.init(query); }); } }
define(['views/accountView', 'GS'], function (View, GS) {
function init(params) {
View.init({
bindings: bindings
});
}