浅谈HybridApp混合开发的理解

知其一不知其二。了解混合开发的原理将在实际工作中提供极大帮助，鉴于网上解释这方面的资料比较少。因此本文站在前端开发的角度上阐述了混合开发中前端如何与原生开发交互的一些认识和见解。

一、分工
在混合开发中，原生开发的比例要大于web开发(80%和20%)，否则在IOS商店就可能审核不通过，毕竟Apple强调的是用户体验。
在这里，站在前端开发主导的角度上，基于vue全家桶构建前后端分离的项目，安卓和IOS开发分别需要构建各自的项目，提供webview以及原生接口方法。

二、webview
前端和原生通过webview来进行交互，简单的理解就是通过webview容器来加载一个H5网页，然后该webview提供了一个支持调用原生API的环境。学过小程序开发的童鞋就应该知道官方也提供了一个webview，大概如此。

<web-view src="{{ src }}" />

因此，原生项目需要构建各自的webview层，然后挂载上前端的项目地址。开发阶段可以挂载前端本地跑的项目地址，就是大家都熟悉的npm run serve

http://192.168.100.49:8080

三、交互
安卓注入一个全局的window对象名，在全局对象名下再定义接口方法。IOS则直接定义接口方法即可，前端在vue组件里通过window对象调用方法即可。

// register.vue
// 调用安卓注册接口 JSBridge为安卓全局对象名 register为接口方法
let result = window.JSBridge.register();
// 安卓直接返回结果
console.log(result);
// 调用IOS注册接口 固定格式window.webkit.messageHandelers.<接口方法>.postMessage(<接口参数>)
window.webkit.messageHandelers.register.postMessage();
// IOS没有返回值 需要通过回调接口函数
window.registerCallback = this.onRegisterCallback;