Web App、Hybrid App、 Native App与原生的交互

WebApp：h5 与 WKWebView 交互

例如：WKWebView 加载 html 链接展示页面：

oc 中 WKWebView 实现:

//与前端约定统一标识符：nameIDWKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];WKUserContentController * wkUController = [[WKUserContentController alloc] init];
[wkUController addScriptMessageHandler:self name:@"nameID"];
config.userContentController = wkUController; //创建WKWebViewself.webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight) configuration:config];self.webView.navigationDelegate = self;
[self.view addSubview:self.webView];//加载urlNSURL * 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{//写按钮点击方法}

来千语创想移动低代码开发平台学习更多APP开发知识：app开发，app制作，app开发源码下载，app开发框架，app开发工具等免费获取。

千语创想-专业APP开发、app定制服务商，提供一站式移动应用解决方案，满足您的各类需求，欢迎免费评估需求和获取报价。

立即免费在线制作一个APP，新手注册即送开发大礼包

提交app定制需求，免费获取报价和周期：

电脑请点击https://www.qianyuthink.com/?url=/index?uzchannel=500

手机请点击https://www.qianyuthink.com/?url=/m/customizedservice?uzchannel=500