App与H5交互的几种方式

迈不过友情╰ 2022-12-05 09:56 407阅读 0赞

### 文章目录 ###

*  App与H5交互
 *   *  1、直接调用App的定义的方法
     *  2、调用方法获取数据
     *  3、暴露方法给App调用传值
     *  总结

--------------------

# App与H5交互 #

在App内置H5中，我们H5页面经常会与App进行交互，本文中将记录几种常用的交互方式，可能不太完善，欢迎大家补充~

--------------------

## 1、直接调用App的定义的方法 ##

toLogin: () => { 
      if (window.webkit && window.webkit.messageHandlers) { 
      	// Ios 客户端调用方法
        window.webkit.messageHandlers.toLogin.postMessage('11');
      } else if (window.PlatformCurrency) { 
      	// Android 客户端调用方法
        window.PlatformCurrency.toLogin()
      }
    }

首先我们需要判断当前App的客户端是Ios还是Android，针对不同的客户端我们需要调用不同的方法。

--------------------

## 2、调用方法获取数据 ##

toKyc: () => { 
      if (window.webkit && window.webkit.messageHandlers) { 
        return window.webkit.messageHandlers.IDVerfication.postMessage('11');
      } else if (window.PlatformCurrency) { 
        return window.PlatformCurrency.IDVerfication()
      }
    }

这种方法和第一种方法一致，只不过是Ios与Android返回的值不同。

--------------------

## 3、暴露方法给App调用传值 ##

window["loginSucceed"] = (token) => { 
      console.log('token:',token)
    }

在很多时候并不一定是H5去调用App，我们有时候还需要App来调用H5来达到某种目的。  
例如：  
当我在H5页面内调用了App的登录方法，登录完成后我们需要得到用户的token，此时我们就可以暴露一个方法让App来调用H5暴露的方法，通过回调把值传递给H5进行进一步的操作。

--------------------

## 总结 ##

无论怎么样的交互，关键是与Ios和Android开发进行紧密沟通配合，就会达到预期的功能和效果。