混合開發(fā)中需要web需要和原生交互方式。

1、H5調(diào)用原生方法的方式

原生需要寫方法來讓H5調(diào)用，H5在window中獲取方法。
ios殼中方法全部放在webkit.messageHandlers對象中，前端調(diào)用只需要

/**
* funcName 為原生方法名 
* postMessage(null) 跨源傳遞數(shù)據(jù)，沒有數(shù)據(jù)，一定要寫null 
*/
webkit.messageHandlers.funcName.postMessage(null)

Android中調(diào)用方法，直接在window中調(diào)用安卓給的對象

/**
* android 為原生對象名
* add為android對象中的方法 
*/
const { android } = window;
android.add('')

2、原生給H5傳值

H5調(diào)用原生方法后，原生怎么回調(diào)給H5?
跟原生一樣，H5需要寫好方法，讓原生調(diào)用，這里調(diào)用就是原生直接調(diào)用了H5的方法，當(dāng)然這個(gè)方法是要全局的方法，在window對象中的。
在react中寫原生調(diào)用的方法，需要在調(diào)用的組件中componentDidMount里面添加方法：

componentDidMount() {
  // funcitonName 是原生回調(diào)使用的方法名
  window['funcitonName'] = this.funcitonName;
  ...
}
/**
* 原生調(diào)用后， H5做的事情...
* 注意， 如果這里用了this， 那么一定要注意這里的this，可能不是你想要的this
*/
funcitonName = (args) => {
  ... // something
}

3、H5判斷當(dāng)前系統(tǒng)

function getNavigatorOS() {
    const u = navigator.userAgent;
    // const app = navigator.appVersion; // 系統(tǒng)版本
    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、統(tǒng)一封裝方法，讓頁面調(diào)用原生方法更容易，更好維護(hù)

原生方法可能多個(gè)地方使用，每次都去判斷系統(tǒng)，然后分別調(diào)用不同方法很麻煩，不是前端該有范兒。應(yīng)該在一個(gè)文件中統(tǒng)一處理，其他頁面只需要調(diào)用處理好的方法就好。
例如獲取當(dāng)前設(shè)備號，原生封裝好方法后，統(tǒng)一在一個(gè)文件中處理：

// deviceId 為安卓給的獲取設(shè)備號方法對象
const { webkit, deviceId } = window;

// 判斷設(shè)備系統(tǒng)
const appOS = getNavigatorOS(); 

/**
 * 獲取 設(shè)備ID，返回對應(yīng)的方法
 */
export function getDeviceId(){
    if(appOS === 1){
        return deviceId.deviceId()
    }else if(appOS === 2){
        return webkit.messageHandlers.deviceId.postMessage(null)
    }
}

這樣在其他頁面就可以直接使用getDeviceId就可以得到得到設(shè)備號，才不管你是哪個(gè)系統(tǒng)呢。