Android混合开发快速上手入门
一 混合开发简介
原生app ：java/kotlin 纯原生写出的app；
web app：web写出的app；
hybird app：原生+web（通过webview）写出的app；
当然，现在也有很多第三方混合开发框架以及简便的js桥，但是作为最基础的webview，掌握js/android的互调等相关知识是非常必要的。
二 Android-Js互调
2.1 准备自己的html文件
安卓和html中js的互调，一是要有安卓代码，二肯定需要html网页。工程中，网页都是放在服务器，方便随时更改，用户无需再次更新自己的app，已达到hybrid开发的目的，实例方便起见，将html文件放在了本地。
首先，在自己安卓项目中的app目录下新建assets文件夹（若没有）：
接着，在assets文件夹下新建自己的html文件，代码如下：
<html>
<head>
<meta http-equiv="Content-Type" charset="GB2312"/>
<script type="text/javascript">
function javacalljs(){
document.getElementById("showmsg").innerHTML = "JAVA调用了JS的无参函数";
}
function javacalljswith(arg){
document.getElementById("showmsg").innerHTML = (arg);
}
</script>
</head>
<body>
<h3 align="center">Web模块</h3>
<h3 id="showmsg" align="center">调用js显示结果</h3>
<div style="text-align:center; vertical-align:middle;">
<input type="button" value="Js调用Java代码" onclick="window.android.jsCallAndroid()"/>
</div>
<br>
<br>
<div style="text-align:center; vertical-align:middle;">
<input type="button" value="Js调用Java代码并传参数" onclick="window.android.jsCallAndroidArgs('Js传过来的参数')"/>
</div>
</body>
</html>
2.2 WebView控件的准备设置
在自己的activity活动中获得webview控件后，需要进行以下设置：
WebSettings webSettings = webview.getSettings();
//与js交互必须设置
webSettings.setJavaScriptEnabled(true);
webview.loadUrl("file:///android_asset/html.html");
webview.addJavascriptInterface(MainActivity.this,"android");
- webSettings.setJavaScriptEnabled(true) 表示让WebView支持调用Js；
- webview.loadUrl("file:///android_asset/html.html") 表示加载assets文件下的html.html文件（因为没有网络地址所以加载的本地文件）
- webview.addJavascriptInterface(MainActivity.this,"android") 给webview添加Js调用接口，第一个参数为类对象，第二个参数为自定义别名，Js通过这个别名来调用Java的方法，我这里自定义为android。 html中用到：<input type="button" value="Js调用Java代码" οnclick="window.android.jsCallAndroid()"/>
2.3 Android调用Js代码
在android代码中（如按钮点击事件中），通过webview这个中介调用loadUrl来执行html代码中的Js代码：
tvJs.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
webview.loadUrl("javascript:javacalljs()");
}
});
下为html中要被安卓调用的js函数代码，函数意图为：向id为showmsg的h3大小标题中写入字符串“JAVA调用了JS的无参函数”。
function javacalljs(){
document.getElementById("showmsg").innerHTML = "JAVA调用了JS的无参函数";
}
在上述基础上，若要在Android调用Js函数时传参数，只需要在loadUrl方法中进行字符串的拼接，将参数以字符串形式拼接进去即可。
webview.loadUrl("javascript:javacalljswith(" + "'Android传过来的参数'" + ")");
2.4 Js调用Android方法和传参数
点击html按钮，通过οnclick="window.android.jsCallAndroid()事件，通过android别名调用Java文件的jsCallAndroid()方法。曾经Js可直接调用Java代码窃取App信息，为安全起见，在Android4.4以上并且必须加入@JavascriptInterface才有响应。
@JavascriptInterface
public void jsCallAndroid(){
tvShowmsg.setText("Js调用Android方法");
}
@JavascriptInterface
public void jsCallAndroidArgs(String args){
tvShowmsg.setText(args);
}
所有的activity代码如下：
package com.lucas.autils.autils;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.TextView;
/**
* 原生webview js与安卓互调
*/
public class JsJavaActivity extends Activity {
private WebView webview;
private TextView tvJs;
private TextView tvJsArgs;
private TextView tvShowmsg;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_jsjava);
setWebview();
initView();
}
private void initView() {
tvJs = (TextView) findViewById(R.id.tv_androidcalljs);
tvJsArgs = (TextView) findViewById(R.id.tv_androidcalljsargs);
tvShowmsg = (TextView) findViewById(R.id.tv_showmsg);
tvJs.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
webview.loadUrl("javascript:javacalljs()");
}
});
tvJsArgs.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
webview.loadUrl("javascript:javacalljswith(" + "'Android传过来的参数'" + ")");
}
});
}
private void setWebview() {
webview = (WebView) findViewById(R.id.webview);
WebSettings webSettings = webview.getSettings();
webSettings.setBuiltInZoomControls(true);
webSettings.setSupportZoom(true);
//与js交互必须设置
webSettings.setJavaScriptEnabled(true);
webview.loadUrl("file:///android_asset/html.html");
webview.addJavascriptInterface(JsJavaActivity.this,"android");
}
@JavascriptInterface
public void jsCallAndroid(){
tvShowmsg.setText("Js调用Android方法");
}
@JavascriptInterface
public void jsCallAndroidArgs(String args){
tvShowmsg.setText(args);
}
}
三 常用的几个方法和注意点
3.1 WebViewClient中的shouldOverrideUrlLoading拦截url
安卓webview中setWebViewClient方法中需要一个WebViewClient对象，而WebViewClient中有个方法为shouldOverrideUrlLoading，通过此方法可以进行我们需要跳转的url地址的拦截，并根据我们需要进行自定义化的一些操作，解析url做相应的事情。
3.2 WebViewClient中的onPageStarted
onPageStarted会在webview加载相应的url开始之前进行调用，常用来处理需要在加载相应url之前的一些操作。
3.3 WebViewClient中的onPageFinished
onPageStarted会在webview加载相应的url结束之后进行调用，常用来处理需要在加载相应url之后的一些操作，比如加载后更加网页标题填充原生页面最上方的活动标题。
3.4 webview的evaluateJavascript方法
该方法的执行不会使页面刷新，而方法（loadUrl ）的执行则会使页面刷新。此Android 4.4 后才可使用。
//拦截url
webview.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.indexOf("jump")>-1){
Toast.makeText(JsJavaActivity.this,"拦截到了相应url",Toast.LENGTH_LONG).show();
return true;
}else if (url.startsWith("http")){
view.loadUrl(url);
return true;
}
return false;
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
// 开始加载页面时
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
// 加载结束
//因为该方法的执行不会使页面刷新，而方法（loadUrl ）的执行则会使页面刷新。
//Android 4.4 后才可使用
webview.evaluateJavascript("javascript:changename()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
Log.v("Native",value);
}
});
}
});
