混合开发中需要web需要和原生交互方式。
1、H5调用原生方法的方式
原生需要写方法来让H5调用，H5在window中获取方法。
ios壳中方法全部放在webkit.messageHandlers对象中，前端调用只需要
/**
* funcName 为原生方法名
* postMessage(null) 跨源传递数据，没有数据，一定要写null
*/
webkit.messageHandlers.funcName.postMessage(null)
Android中调用方法，直接在window中调用安卓给的对象
/**
* android 为原生对象名
* add为android对象中的方法
*/
const { android } = window;
android.add('')
2、原生给H5传值
H5调用原生方法后，原生怎么回调给H5?
跟原生一样，H5需要写好方法，让原生调用，这里调用就是原生直接调用了H5的方法，当然这个方法是要全局的方法，在window对象中的。
在react中写原生调用的方法，需要在调用的组件中componentDidMount里面添加方法：
componentDidMount() {
// funcitonName 是原生回调使用的方法名
window['funcitonName'] = this.funcitonName;
...
}
/**
* 原生调用后， H5做的事情...
* 注意， 如果这里用了this， 那么一定要注意这里的this，可能不是你想要的this
*/
funcitonName = (args) => {
... // something
}
3、H5判断当前系统
function getNavigatorOS() {
const u = navigator.userAgent;
// const app = navigator.appVersion; // 系统版本
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // android终端或者uc浏览器
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
if (isAndroid) {
... // something
} else if (isiOS) {
... // something
}
}
4、统一封装方法，让页面调用原生方法更容易，更好维护
原生方法可能多个地方使用，每次都去判断系统，然后分别调用不同方法很麻烦，不是前端该有范儿。应该在一个文件中统一处理，其他页面只需要调用处理好的方法就好。
例如获取当前设备号，原生封装好方法后，统一在一个文件中处理：
// deviceId 为安卓给的获取设备号方法对象
const { webkit, deviceId } = window;
// 判断设备系统
const appOS = getNavigatorOS();
/**
* 获取 设备ID，返回对应的方法
*/
export function getDeviceId(){
if(appOS === 1){
return deviceId.deviceId()
}else if(appOS === 2){
return webkit.messageHandlers.deviceId.postMessage(null)
}
}
这样在其他页面就可以直接使用getDeviceId就可以得到得到设备号，才不管你是哪个系统呢。
