隨着H5標準的發佈，使得移動應用的開發有了更多的選擇，出於效率、成本、質量等原因，移動應用不再只是單純的原生開發。

今天就簡單總結一下目前的三大主流移動應用開發類型。

一、WebApp、HybridApp、 NativeApp簡單介紹

WebApp

WebApp是指使用前端語言編寫的可以用於多平台的應用，運行在手機或瀏覽器上，對手機性能要求比較高。

• 受限於手機的webView，頁面普遍存放於服務器。
• 更新容易，更新無需通知用戶，不用手動升級。
• 開發成本低，維護簡單。
• 體驗差，用戶留存較低。
• 網絡依賴性較強。

HybridApp

HybridApp是指使用原生語言與前端語言編寫的只能用於iOS和Android平台的應用，但其總體特性更接近NativeApp。

• 前端JS調用原生提供的JS的API，實現功能。
• 更新較容易，大部分需要無法自動更新，中控易動可實現更新無需通知用戶，不用手動升級。
• 開發成本低，維護簡單。
• 受限於手機的webView。
• 仍受限於技術，網速。
• 體驗好，用戶留存高。

NativeApp

NativeApp是指基於手機操作系統如iOS、Android，使用原生程式編寫的應用，運行在手機上。

常用語言
iOS ：Objective-C swift
Android ：JAVA

• 開發成本高，需要兩端開發人員，維護成本高。
• 更新較難，需要上傳應用市場，需要手動升級。
• 用戶體驗好，留存率高。
• 性能穩定，反應速度快。

二、WebApp、HybridApp、 NativeApp與原生的交互

WebApp：h5與WKWebView交互

例如：WKWebView加載html鏈接展示頁面：

oc中WKWebView實現:

//與前端約定統一標識符：nameID
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
WKUserContentController * wkUController = [[WKUserContentController alloc] init];
[wkUController addScriptMessageHandler:self name:@"nameID"];
config.userContentController = wkUController;
 //創建WKWebView
self.webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight) configuration:config];
self.webView.navigationDelegate = self;
[self.view addSubview:self.webView];
//加載url
NSURL * baseUrl = [NSURL URLWithString:self.url];
NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:baseUrl];
[_webView loadRequest:request];
#pragma mark  -- WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
   //判斷是nameID
   if([message.name isEqualToString:@"nameID"]){
      //寫點擊按鈕的執行方法 
    }
}

HTML中按鈕點擊事件中實現:

function jsFunction(){
window.webkit.messageHandlers.nameID.postMessage({});
}

HybridApp：選擇第三方框架，根據JS API接口調用。例如：中控易動，根據插件文檔使用JS API接口使用

例如：在中控易動創建應用、添加插件、參考插件API接口參考，這邊以AppInfo插件為例：

示例代碼：

複製示例代碼，寫在調用的前端按鈕事件裏面：

function getAppInfo() {
// 獲取app相關信息
    navigator.appInfo.getInfo(function (result) {
        alert(JSON.stringify(result));
    },function (error) {
        alert(error);
    });
}

NativeApp：使用oc編碼。例如：

UIButton *senBtn = [UIButton buttonWithType:UIButtonTypeCustom];
senBtn.frame = CGRectMake(0, 0, 100, 100);
[senBtn addTarget:self action:@selector(senClick)
forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:senBtn];
- (void)senClick{
//寫按鈕點擊方法
}