Hybird App模式下，js如何與客戶端交互

1、Hybird App開發模式

一、傳統的App開發

不夠靈活，更新一丟丟東西得從新上架，還得同時開發兩個端，麻煩。可是性能好啊，動畫順暢啊。

二、web開發後打包成app

性能差，可是兼容兩端，足夠靈活，不須要請這麼多人（省錢啊）

三、Hybird App開發

保證性能的同時，常常性更改的頁面改用web開發，保證必定程度的靈活性，能夠減小新包上架的頻率

其實如今不少App都是採用這種模式進行開發了，那麼咱們日常能夠怎麼與客戶端進行數據上的交互呢？

2、基於URL的數據傳遞

這個其實很簡單，客戶端在生成一個webview的時候（至關於瀏覽器），進行url跳轉，在跳轉時，將數據以query的方式帶上，這樣咱們就能夠用js進行獲取使用了。

3、基於函數的數據交互

這種方式，須要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了

若是還有什麼好的方法，但願能夠分享一下。哈哈哈