Hybrid

2018-04-26 18:02:55   0  举报





仅支持查看

AI智能生成

Hybrid框架解析/////////////////

模版推荐

作者其他创作

大纲/内容

交互

交互协议

H5调Native

scheme://method?callback=xxx&param=xxx

示例

LLJR://get?callback=xxx&param={url="http://api.kuai.baidu.com/city/getstartcitys"}

LLJR://forword?param={type:1,topage:"",animate:"",hasnavgation=""} 参数解释： type：跳转类型（0：跳H5，1：跳native） topage：跳转指定页面的url animate：动画类型（“push”：从左边进入，“present”：从下往上，“none”：没有动画）

LLJR://showloading

LLJR://back

子主题

Native调H5

javascript:scheme.callback(xxx)

示例

javascript:LLJR.callback( { "callback":xxx, "data":xxx } )

技术实现基础

H5调Native

Android实现

shouldOverrideUrlLoading(WebView view, String url)

addJavascriptInterface

WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）

iOS实现

[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Share"];

shouldStartLoadWithRequest

Native调H5

Android实现

WebView.loadUrl("javascript:xxx")

evaluateJavascript(String script, ValueCallback<String> resultCallback)

iOS实现

[self.webView evaluateJavaScript:@"show()" completionHandler:^(id _Nullable response, NSError * _Nullable error) {//TODO}];

加载优化

对js、css、png等资源进行缓存，并及时更新

示例

资源更新接口

{ "errcode": 0, "data": [      {          "channel": "blade",          "version": "1.0.0",          "src": "http://7xpdel.com1.z0.glb.clouddn.com/FteaxjTJteAL-U3Frd6CmGiQNRhR"     } ] }

技术实现基础

通过接口检查资源版本，判断是否需要跟新，如果需要，就下载资源并存储在本地

Android实现

WebResourceResponse shouldInterceptRequest(WebView view, String url) 拦截资源的加载，如果本地已经有资源，直接使用本地的资源

iOS实现

URLProtocol

对于不经常更新的页面，可以直接将H5文件放在本地

Hybrid浅谈

Hybrid源码