乐趣区

关于webapp:移动应用APP开发WebAppHybridApp-NativeApp与原生的交互

jiezi

随着 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{// 写按钮点击办法}

下一节会介绍 WebAPP 或HybridApp 自动更新（热更新）

退出移动版