Android Hybrid混合开发总结

导论:
之前很早之前用的WebView只是用来加载简单的页面,没有复杂的交互,而随着业务的性质不同,对于混合的开发要求也在变化,技术也在更新,本文只是简单记录

混合开发实例:

1:原生交互:

Android-传递数据给->JS

Android:
webView.loadUrl("javascript:callJs('"0000"')");//需要JS function callJs函数
webView.loadUrl("http://172....&type=aaaa");//直接传递,无需JS function 

JS:
function callJs(data){}

JS-传递数据给->Android

JS:
function{
window.aile.callAndroid("0000000");
}

Android:
webView.addJavascriptInterface(this, "aile");

@JavascriptInterface
public void callAndroid(String src) {}

2:Cordova之Android和JS传递方式

使用:

Intent intent = new Intent(this, H5PageActivity.class);
intent.putExtra(H5PageActivity.EXTRA_URL,getResources().getString(R.string.urlHost)
                                + getResources().getString(R.string.sjsb)
                                + "&token=" + token());
startActivity(intent);

结构:

config.xml+plugin_function.js+FunctionPlugin+cordova core库

打开新页面:

cordova.getSelfActivity().startActivity(intent);

关闭页面:

cordova.endActivity();

Cordova之Android和JS交互:

Android-传递数据给->JS (verInfo)

Android: 
FunctionPlugin:
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
           if (action.equals("getDeviceInfo")) {
                callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, verInfo));
            } 
        } 
        return true;
}

plugin_function.js配置:
cordova.exec(success, fail, "Function", "getDeviceInfo", []);

JS:
略

JS-传递数据给->Android (mToken)

JS:
略

Android:
plugin_function.js配置:
cordova.exec(success, fail, "Function", "uploadFiles", [options]);

FunctionPlugin:
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
           if (action.equals("uploadFiles")) {
                JSONObject object = args.getJSONObject(0);
                if (object.containsKey("params")) {
                   paramMap = object.getJSONObject("params");
	               mToken=paramMap.getString("token");
                 }
            } 
        } 
        return true;
}

3:activity/fragment+webview之Android和JS交互(原生实例4个)

3.1: NavWebPageActivity

使用:
Intent intent = new Intent();
intent.setClass(context, NavWebPageActivity.class);
intent.putExtra(NavWebPageActivity.PAGE_URL, SHAppUrls.replaceURL(SHAppUrls.DBFW_URL, base64LoginName));
context.startActivity(intent);

结构:
NavWebPageActivity+WebPageView

打开新页面:
Intent intent = new Intent();
intent.putExtra(PAGE_URL, url);
intent.setClass(this, NavWebPageActivity.class);
startActivity(intent);
关闭页面:
finish();

数据交互为原生webview和Android数据传递方式

3.2: WebDelegateImpl

使用:
跳转具体Activity直接加载

结构:
WebDelegateImpl+WebView

打开新页面:
webView.loadUrl(url);
关闭返回页面:
webView.goBack();
finish();

数据交互为原生webview和Android数据传递方式

3.3: WebActivity

使用:
Intent intent = new Intent(mContext, WebActivity.class);
intent.putExtra(WebActivity.TITLE, "aaaa");
intent.putExtra(WebActivity.URL, "http://17...214/shdike/.../list.html");
startActivity(intent);

结构:
WebActivity+WebView

打开新页面:
webView.loadUrl(url);
关闭返回页面:
webView.goBack();
finish();

数据交互为原生webview和Android数据传递方式

3.4: WebViewFragment

使用:
跳转具体Fragment直接加载

结构:
WebViewFragment+WebView

打开新页面:
mWebView.loadUrl(loadPath)
关闭返回页面:
binding?.webView?.goBack()
activity?.finish()

数据交互为原生webview和Android数据传递方式

4:AgentWeb之Android和JS交互:

使用:

跳转具体Fragment直接加载

结构:

Fragment+AgentWeb

打开新页面:

 mAgentWeb = AgentWeb.with(this)
                .setAgentWebParent(webcontent, LinearLayout.LayoutParams(-1, -1))
                .useDefaultIndicator()
                .setSecurityType(AgentWeb.SecurityType.STRICT_CHECK)
                .createAgentWeb()
                .ready()
                .go(AppConstant.HTML_HOME)

关闭返回页面:

web.webCreator.webView.canGoBack()
nav().navigateUp()

AgentWeb之Android和JS交互:

Android-传递数据给->JS (editText内容)

Android:
mAgentWeb?.jsAccessEntrace?.quickCallJs("getMsg", editText)

JS:
略

JS-传递数据给->Android (mToken)

JS:
略

Android:
mAgentWeb?.jsInterfaceHolder?.addJavaObject("android",JavascriptHandler())

@JavascriptInterface
        fun onIflyClick() {
            Handler(Looper.getMainLooper()).post {
             ....
            }
        }

好,结束,该文只是笔记