HybirdApp模式下,js如何與客戶端交互

NO IMAGE

一、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用於客戶端判斷需要獲取什麼數據

HybirdApp模式下,js如何與客戶端交互

HybirdApp模式下,js如何與客戶端交互

這裡統一傳入的是序列化的配置對象,含有method,以及params,給客戶端進行判斷使用。

之後客戶端要把數據傳入給我們,也是通過我們前端提前掛載在window對象上的h5Handler方法進行傳值

HybirdApp模式下,js如何與客戶端交互

HybirdApp模式下,js如何與客戶端交互

客戶端調用了window.h5Handler後,將傳入一個序列化的配置對象dataString(這個參數就是客戶端傳過來的數據),同樣也是含有method和params(這個當然是和客戶端協議好的),途中有個resolve方法,是外層函數傳入的。

當然這裡為了更好地進行業務的匹配,需要將一些業務的代碼抽離出來。

HybirdApp模式下,js如何與客戶端交互

將獲取token這個業務單獨抽離出來。

HybirdApp模式下,js如何與客戶端交互

HybirdApp模式下,js如何與客戶端交互

將配置函數傳入injectConfig中,讓將getToken包裝成一個Promise,在客戶端觸發了window.h5Handler函數後就可以將傳遞的值通過resolve傳遞出去了。

之後我們就可以直接調用getToken,在resolve中獲取到客戶端傳給我們的token了

HybirdApp模式下,js如何與客戶端交互

如果還有什麼好的方法,希望可以分享一下。哈哈哈

相關文章

使用postcsswritesvg在retina屏繪製1px細線

webpack4搭建現代Hybirdh5工程

如何使用imageset適配移動端高清屏圖片

如何在webpack中做預渲染降低首屏空白時間