WKWebView混合開發(fā)

混合開發(fā)經(jīng)歷總結(jié)

作為iOS開發(fā),native的一些缺陷,確實(shí)使得一些業(yè)務(wù)無法保證,混合開發(fā)目前來說,毫無疑問是最符合當(dāng)前移動(dòng)端的一種方式.混合開發(fā)無非是native與JS交互的問題,第一版本我們以WKWebView為主,native作為框架,考慮到web微信端(公眾號(hào))已經(jīng)完成,盡量做到代碼復(fù)用.


Web數(shù)據(jù)共享的問題

web存儲(chǔ)主要為LocalStorage,SessionStorage這兩種存儲(chǔ)方式,我們方案是把數(shù)據(jù)緩存在本地,我目前用的plist文件,而這種方式,在iOS端get數(shù)據(jù)時(shí)無法同步返回,這里用的是WKWebView與JS交互的方式.

  • 業(yè)務(wù)需要我們要在JS開始執(zhí)行之前注入JS
WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc] init];
WKUserContentController * userContent = [[WKUserContentController alloc] init];
[userContent addScriptMessageHandler:self name:@"login"];
NSString * js = [NSString stringWithFormat:@"window.localStorage.setItem('%@','%@')",key,value];
WKUserScript * userScript = [[WKUserScript alloc]initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO];
[userContent addUserScript:userScript];
configuration.userContentController = userContent;
self.wkWebView = [[WKWebView alloc]initWithFrame:CGRectMake(0,0, kWindowWidth, kWindowHeigth) configuration:configuration];

//JS端調(diào)用方法
window.webkit.messageHandlers.login.postMessage({body: 'login'});


可以通過addScriptMessageHandler添加需要的set,remove方法,通過上述代碼與JS交互后,native實(shí)現(xiàn)WKScriptMessageHandler協(xié)議方法,實(shí)現(xiàn)JS調(diào)用native,其實(shí)只有一個(gè)...

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

目前是中這種思路去做的,但是這種方式無法實(shí)現(xiàn)同步給js返回值,而且數(shù)據(jù)變化時(shí)只能重新加載一遍WebView去注入數(shù)據(jù),效果不好,解決思路:

  1. 用JavaScriptCore去做數(shù)據(jù)共享這方面,但是實(shí)踐發(fā)現(xiàn)依舊不能實(shí)現(xiàn)同步,有時(shí)會(huì)拿不到值.
  2. WKWebView的坑確實(shí)很煩,在文章末尾會(huì)舉例說明.
  3. 比較Weex或RN,主要是微信端用的是Vue.js,最終選擇Weex.
  4. 追求60分的前提下,完全可以做到三端復(fù) ,但是在追求90分的情況下,追求三端復(fù)的結(jié)果,未必分開編寫來的效率。

Weex

第二版本只是首頁和地址選擇的一些界面用Weex,首先性能方面確實(shí)要比WebView強(qiáng)大,而且最后Weex也會(huì)轉(zhuǎn)換為native去渲染.后面會(huì)慢慢過渡到weex.

  • weex中Storage也是用plist文件存儲(chǔ),但是weex中Srorage也是異步,這里通過weex的Module擴(kuò)展weex數(shù)據(jù)與web數(shù)據(jù)共享
  • 包括weex跳轉(zhuǎn)原生webView同理
// set等其他方法同理
WX_EXPORT_METHOD(@selector(getStorageItem: callback:))

-(void)getStorageItem:(NSString *)key callback:(WXModuleKeepAliveCallback)callback


WKWebView的坑

  • 目前在WebView中JS第一次發(fā)送請(qǐng)求時(shí)失敗,導(dǎo)致界面需要重新刷新.有解決的或遇到這些問題的人歡迎一起討論交流.
  • WKWebView內(nèi)存泄漏的問題,記得在控制器銷毀時(shí),移除所有添加的ScriptMessageHandler
- (void)removeScriptMessageHandlerForName:(NSString *)name;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容