frameWorke7，开发app的项目搭建（给初学者）

这是刚做完的app项目的一点小总结，不是很专业，很多说法也不一定准确，是自己理解的，希望给和我一样的小菜鸟一点帮助！

3.1项目结构

项目基于 grunt 构建，我们写的JS代码主要在src目录结构下，dist是构建后打包生成的压缩文件目录。

                         

em-app目录下包含移动端原生的文件包，最终打包成apk或ipa程序的源码文件。

其他目录结构为grunt项目构建自动生成，详见grunt

3.2 FrameWorke7依赖

Src目录下的vender文件夹下主要存放项目依赖的外部资源包，在此引入framework7.js,

其他支持按需引入即可

 

  

第四章 架构搭建

4.1项目主入口

在src下创建index.html文件作为项目的入口文件

                       

1.引入cordova.js以便支持移动跨平台移植，关于cordova的原理详见cordova详解                                    

<script type="text/javascript" src="cordova.js"></script>

2.借助required的data-main属性，用require.js来加载主界面的main.js文件

<script data-main="script/main" src="vendors/require/require.js"></script>

 main.js程序依赖项配置解析（require配置）

1. require.config(options);

在配置项options里面设置好所有依赖的包文件(js)

                                    

2. Require回调函数里面初始化app相关的对象;

   require([“i18n”,”FD”],function(i18n,FD){

               //初始化应用app对象，app设备相关，系统方法等

                var app = {

                     //初始化

                     initialize:function(){

                              app.bindEvent();

                     }

                         //绑定事件

                    bindEvent:function(){

                           //注册监听方法,详见4.2

                    }

                 }

             app.initialize();

   }); 

 

4.2事件监听

采用Cordova开发的应用在运行的时候，Cordova提供的通过 HTML5调用Native功能并不是立即就能使用的，Cordova框架在读入HTML5代码之后，要进行HTML5和Native建立桥接，在未能完 成这个桥接的初始的情况下，是不能调用Native功能的。

4.2.1 DOMContentLoaded

页面的DOM内容加载完成后即触发,而无需等待其他资源（CSS、JS）的加载。

document.addEventListener(‘DOMContentLoaded’, callback, false);

4.2.2 Load 

在DOMContentLoaded事件之后，其他资源（CSS、JS、IMG等）加载完成后触发。

window.addEventListener(‘load’, callback, false);

 

4.2.3 deviceready

Cordova框架中桥接的初始化完成后，会调用他自身特有的事件，即deviceready

事件监听：

document.addEventListener('deviceready', callback, false);

                  

注：

1.deviceready事件是在每次读入HTML的时候都会被调用，而不只是应用启动时调用。

2.要想调用native方法必须要等到deviceready之后，所以必须在deviceready的回调方法里面执行FrameWork7的初始化并进行DOM操作

 

小结： 以上三种方法的调用的顺序是：

       DOMContentLoaded -> load -> deviceready

 

 

 

4.2.4 backbutton 

Cordova(Phonegap)拦截返回键 这个功能是当用户按下返回键事件触发.

document.addEventListener("backbutton", callBack, false);

 

4.2.5 message 

消息通知，监听

window.addEventListener("message", router.callBack, false); 

注：可以自定义对象router作为路由为全局派发消息

 

 

4.2.6统一行为 

在做页面的初始化或者销毁的时候，我们通常会做一些页面加载前或者页面关闭前、销毁前、甚至是页面销毁之后对象回收再或者某个方法调用前后要做一些事情，这个时候我把这些操作称为“统一行为”比如：

1）页面加载前：pageBeforeInit

   $$(document).on('pageBeforeInit', function (e) {
    var page = e.detail.page;
    router.pageBeforeInit(page);
});

 

2）页面加载后：略

3）也面销毁前：略

4）页面销毁后：略

5）动画结束后：略

 页面加载处理事件，可参考framework7的帮助文档

 

4/*总结：以上为基本的移动app的事件监听方法，其他监听详见Cordova

 

 

 

4.3对象机制

App应用，伪路由，FrameWork7框架下,类库

 

 

4.3.1 app(apk,ipa)

 app对象，可理解为我们所做的最终的应用,这个对象（应用）可以通过Cordova调用并监听移动设备的信号等，在main.js文件中的require中初始化，并添加各种监听方法，如：设备启动完毕后调用native方法，设备的back退出等等

 

4.3.2 伪路由

自定义router.js文件，并在main.js中的require中引入，可以作为消息进出的通道，在这个文件里面主要可以定义一些，全局消息派发的方法以及一些针对全局的页面加载前后的操作，做一些全局的销毁操作等等

4.3.3 FrameWork7

FrameWork7是整个应用程序的主体部分，几乎所有的DOM操作，用户软件内的交互都是在这个框架的支持下完成的，这个框架提供了所有的UI控件，详见FrameWork7

 

全局框架对象：

 

window.FW = new FrameWork7({options})；

 

   这样我们就可以通过FW来调用FrameWorke7为我们提供的api方法，如：

1.FW.alert();//弹窗提示

2.FW.hidePreloader();//关闭提示框等等

  更多api详见 frameWork7源码或文档

 

   

 

DOM操作：DOM7

 

类似于jQuery对象操作DOM元素一样，FW也提供了自己的一套DOM操作的对象，

可以定义全局DOM7 window.$$ = Dom7;

这样我们就可以通过 var dom = $$(“selector”)来获取页面元素并获取它的元素属性值，或者动态设置等等，操作与jQuery基本无差

 

 

 

 

4.3.4 主视图

mainView,作为手机唯一窗口视图的对象，在这个view里面我们可以加载页面来实现页面跳转,初始化FW后就初始化mainView;

window.mainView = FW.addView('#SELECTER', {

                    dynamicNavbar: false,

                    domCache:false

                  });

注：mainView为view对象，

mainView.loadPage('page/meeting.html?id='+param);

4.3.5MVC模型

MVC模型繁琐业务较为复杂的可以采用backbone模型，数据仓库模型

具体可根据业务的复杂程度，选取合适的模型框架

这里所设计到的技术和移动端开发、web开发无关，为基本的前端技术模型

 

4.3.5服务类 

可以把工具类、和后台交互的接口文件统一放在一个文件目录下

以上是自己做项目总结的一点小知识，为了和我一样刚刚入手移动端app,不知如何下手的你，一点小帮助！