H5與原生APP之間的方法互通

最近作與app端的混合開發，瞭解到了H5與原生app端之間的方法互通

---

首先是咱們給app端定義方法供他們使用（以vue爲例）

methods中定義一個方法名稱
VContent() {
    console.log("給app用的方法")
},
接着咱們將這個方法在生命週期中掛載到window便可，沒錯，就是這麼簡單

mounted(){
  window.VerifyContent = this.VerifyContent;
},
這樣app端就能夠使用咱們的這個方法了

有的時候 還會安卓和ios端須要區別處理的狀況

getDemo() {
          let u = navigator.userAgent;
          let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
          if (isiOS) {
          //ios端的操做
          } else {   
          //安卓端的操做
        }
    },
一樣將這個方法在生命週期中掛載到window便可

在這些方法中是支持參數傳遞的，好比我在開發過程當中 ios支持給個人方法傳遞多個參數，而安卓端則須要將全部參數合併爲一個對象傳遞給我

那咱們H5怎麼調用app端的方法呢？

首先是Android
安卓端會由 app 向 h5 注入一個全局 js 對象，而後在 h5 直接訪問這個對象，相似這樣

H5調用起來也很簡單：
`

try {
          window.android.XXX(type, id);
        } catch (error) {
          console.log("Android error");
        }
    android就是上方圖片裏那個name,面跟的.XXX即是安卓給你的方法

接下來是ios

try {                      
      window.webkit.messageHandlers.XXX.postMessage(JSON.str     ingify(json));
            } catch(error) {  
              console.log("ios error");
     }
   這個XXX 就是ios給你的方法