关于手机框架Framework7使用总结

 

 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
   }); 
}