Hybird App模式下，js如何与客户端交互

一、Hybird App开发模式

1、传统的App开发

不够灵活，更新一丢丢东西得重新上架，还得同时开发两个端，麻烦。但是性能好啊，动画顺畅啊。

2、web开发后打包成app

性能差，但是兼容两端，足够灵活，不需要请这么多人（省钱啊）

3、Hybird App开发

保证性能的同时，经常性更改的页面改用web开发，保证一定程度的灵活性，可以减少新包上架的频率

其实现在很多App都是采用这种模式进行开发了，那么我们平常可以怎么与客户端进行数据上的交互呢？

二、基于URL的数据传递

这个其实很简单，客户端在生成一个webview的时候（相当于浏览器），进行url跳转，在跳转时，将数据以query的方式带上，这样我们就可以用js进行获取使用了。

三、基于函数的数据交互

这种方式，需要Android和iOS端统一一下规范，好让我们前端小弟能够根据协商的方式进行数据的获取

这里提出一个场景，就是token的获取，在我们页面请求服务器的时候，可能需要客户端登录时存储的token，这种东西在url上带上就不太好了，毕竟比较容易暴露嘛，所以一般我们会选择放在header中。

在经过我们团队讨论之后，我们的客户端大佬就决定制定一份协议吧，用于客户端两端与js的交互，这里主要是基于函数进行传值。

两端都往webview中注入一个全局方法吧

安卓：window.nativeBridge.appHandler

iOS：window.webkit.messageHandlers.appHandler.postMessage

那我们前端就可以通过window对象分别去调用对应的方法，传入一个config用于客户端判断需要获取什么数据

这里统一传入的是序列化的配置对象，含有method，以及params，给客户端进行判断使用。

之后客户端要把数据传入给我们，也是通过我们前端提前挂载在window对象上的h5Handler方法进行传值

客户端调用了window.h5Handler后，将传入一个序列化的配置对象dataString(这个参数就是客户端传过来的数据)，同样也是含有method和params（这个当然是和客户端协议好的），途中有个resolve方法，是外层函数传入的。

当然这里为了更好地进行业务的匹配，需要将一些业务的代码抽离出来。

将获取token这个业务单独抽离出来。

将配置函数传入injectConfig中，让将getToken包装成一个Promise，在客户端触发了window.h5Handler函数后就可以将传递的值通过resolve传递出去了。

之后我们就可以直接调用getToken，在resolve中获取到客户端传给我们的token了

如果还有什么好的方法，希望可以分享一下。哈哈哈