移動應用APP開發：WebApp、HybridApp、 NativeApp與原生的交互

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

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

1、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

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

2、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{
//寫按鈕點擊方法
}

下一節會介紹WebAPP或HybridApp自動更新（熱更新）