h5 和 原生的雙向交互

項目有多是原生的app 中嵌入 h5 的頁面，可是兩者之間的數據交互對於我這個初次接觸的小白來講剛開始的時候有些不知所措，還好安卓同事是一個經驗豐富的的小夥伴，咱們一塊兒按照他往常的經驗開始調試。

判斷設備環境

在 h5 頁面怎樣判斷是不是安卓仍是iOS 呢？

此時須要 app 設置 userAgent H5 須要 獲取 userAgent ,而後做出判斷就能夠。

const  ua = userAgentInfo.toLowerCase();
if (ua == 'android') {    
    return 'android';} else if(us == 'ios'){    
    return 'ios';
}複製代碼

應用場景

場景一：h5 通知 app  h5本身正在作的操做。

好比 h5 本身從 頁面 a 跳轉到 頁面 b ,此時app 就須要此刻 web view 中正在承載的是哪個具體的頁面，那麼在使用 app 原生的返回事件的時候才能夠正確的操做。

操做就是 h5 執行  document.loacation.href ='js://str'  app 同事 進行攔截同時還能夠進行 參數的拼接，達到傳遞參數的目的

callAppShare(str) {    document.location = 'js://str?str=' + str;},複製代碼

場景二 ：分享文字。

從原生中的分享按鈕跳轉一個h5頁面，頁面內容須要分享出去，我經歷的是隻分享文字，那麼此時就須要 h5 將分享的文案 進行格式加工（ 換行和空行 ），經過 和 app 的交互函數將文案傳遞給app 。

交互方式同上，h5 只是在傳遞文案的時候須要將整段的數據進行一個 encodeURI(str)確保一些特殊字符 好比換行符 在瀏覽器中的傳遞沒有被編譯，那麼接受信息的app 同事須要進行一個解析，而後經過原生的分享功能將文案分享出去就能夠了。

app 傳遞數據給 H5

以上都是 h5 主動和 app 的交互，那麼有些時候須要 app 打開 h5 頁面的時候須要傳遞給 h5 一些數據，該則麼作呢 ？

如下是 h5 接收操做 ：

安卓 ：

vue 中使用
methods :{
    callAndroidGetInfo() {    
        let appBackData = window.prompt('js://getInfo');
        let vueCanUseData = JSON.parse(appBackData);
    }
}，
created(){
    this.callAndroidGetInfo()
}複製代碼

步驟 

1 、h5 經過 window.prompt 的發起 ；

二、 安卓原生進行 攔截，傳遞數據到 h5 ；

3 、h5 獲取數據 ；

4 、轉換數據格式 ，接下來就是 h5 的頁面常規操做。

IOS 

vue 中使用
methods : {
    // h5 主動發起的函數
    callIosGetInfo() {    
        window.location.href = "js://getInfo";   
    } ,
    
    // ios  經過調用此函數 返回 數據給到 h5 
    iosCbkInfo(info) {    
        this.profile = info;   
    },
}複製代碼

步驟 

1 、h5 發起 callIosGetInfo ，通知 iOS 我須要獲取數據 ；

2 、iOS 調用 iosCbkInfo 將數據返回；

3 、h5 接收數據 。

前提：h5須要將 iosCbkInfo 放到window 中，iOS 才能夠調用

vue 中
created(){
    window.iosCbkInfo = this.iosCbkInfo;
    this.callIosGetInfo();
}複製代碼

記錄下來，方便之後查看！