關於手機框架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
   }); 
}