WKWebView混合開發(fā)

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

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


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

web存儲主要為LocalStorage,SessionStorage這兩種存儲方式,我們方案是把數(shù)據(jù)緩存在本地,我目前用的plist文件,而這種方式,在iOS端get數(shù)據(jù)時無法同步返回,這里用的是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í)只有一個...

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

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

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

Weex

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

  • weex中Storage也是用plist文件存儲,但是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ā)送請求時失敗,導(dǎo)致界面需要重新刷新.有解決的或遇到這些問題的人歡迎一起討論交流.
  • WKWebView內(nèi)存泄漏的問題,記得在控制器銷毀時,移除所有添加的ScriptMessageHandler
- (void)removeScriptMessageHandlerForName:(NSString *)name;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末裁眯,一起剝皮案震驚了整個濱河市覆山,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌背蟆,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,946評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件舌缤,死亡現(xiàn)場離奇詭異施流,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)确憨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評論 3 399
  • 文/潘曉璐 我一進(jìn)店門译荞,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人休弃,你說我怎么就攤上這事吞歼。” “怎么了塔猾?”我有些...
    開封第一講書人閱讀 169,716評論 0 364
  • 文/不壞的土叔 我叫張陵篙骡,是天一觀的道長。 經(jīng)常有香客問我,道長糯俗,這世上最難降的妖魔是什么慎皱? 我笑而不...
    開封第一講書人閱讀 60,222評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮叶骨,結(jié)果婚禮上茫多,老公的妹妹穿的比我還像新娘。我一直安慰自己忽刽,他們只是感情好天揖,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著跪帝,像睡著了一般今膊。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上伞剑,一...
    開封第一講書人閱讀 52,807評論 1 314
  • 那天斑唬,我揣著相機(jī)與錄音,去河邊找鬼黎泣。 笑死恕刘,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的抒倚。 我是一名探鬼主播褐着,決...
    沈念sama閱讀 41,235評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼托呕!你這毒婦竟也來了含蓉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,189評論 0 277
  • 序言:老撾萬榮一對情侶失蹤项郊,失蹤者是張志新(化名)和其女友劉穎馅扣,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體着降,經(jīng)...
    沈念sama閱讀 46,712評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡差油,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了鹊碍。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片厌殉。...
    茶點(diǎn)故事閱讀 40,926評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖侈咕,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情器紧,我是刑警寧澤耀销,帶...
    沈念sama閱讀 36,580評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響熊尉,放射性物質(zhì)發(fā)生泄漏罐柳。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評論 3 336
  • 文/蒙蒙 一狰住、第九天 我趴在偏房一處隱蔽的房頂上張望张吉。 院中可真熱鬧,春花似錦催植、人聲如沸肮蛹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽伦忠。三九已至,卻和暖如春稿辙,著一層夾襖步出監(jiān)牢的瞬間昆码,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評論 1 274
  • 我被黑心中介騙來泰國打工邻储, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留赋咽,地道東北人。 一個月前我還...
    沈念sama閱讀 49,368評論 3 379
  • 正文 我出身青樓吨娜,卻偏偏與公主長得像冬耿,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子萌壳,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評論 2 361

推薦閱讀更多精彩內(nèi)容