您的位置:首页 > 移动开发 > Android开发

Android中WebView通过JavaScript调用Native方法

2016-11-02 21:16 591 查看

Android中WebView通过JavaScript调用Native方法

APP混合开发已经不是什么新鲜的事情了,在项目中的某些模块没有太多的体验交互,使用HTML、css、JavaScript来开发确实要比Native来的快一些。所以混合开发会成为一种趋势,而且web形式的开发部分在项目中占的比重会越来越重,特别是做外包、或者是交互性要求不是很高的项目。多Get一项技能总是没有错的,可以学习下web前端或者React Navitve来开发APP了。今天就通过JavaScript调用Navtive方法来介绍下WebView的简单使用。

第一步、编写HTML页面,包括所包含的JavaScript代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JavaScript 调用 Native </title>
</head>
<body>
<input value="测试JavaScript调用Native方法" type="button" onclick="objectTest.showMessage('调用成功');">
</body>
</html>


objectTest是Native端提供的原生对象,showMessage(‘调用成功’)是调用的方法,后面会介绍。

第二步、编写原生对象

public class JavaScriptObject {
@JavascriptInterface
public void showMessage(String msg) {
Toast.makeText(UiUtils.getContext(), msg, Toast.LENGTH_SHORT).show();
}
}


第三步、在Activity.java中通过webView加载本地的HTML页面

多说一步,加载本地HTML页面的方法,HTML要放在与Java同级目录assets下面,如图



方法一:

webView.loadUrl("file:///android_asset/javaScriptCallNative.html");


方法二:

String dataString = getFromAssets("javaScriptCallNative.html");
webView.loadDataWithBaseURL(null, dataString, "text/html", "utf-8", null);

public String getFromAssets(String fileName) {
try {
InputStreamReader inputReader = new InputStreamReader(
getResources().getAssets().open(fileName));
BufferedReader bufReader = new BufferedReader(inputReader);
String line = "";
String Result = "";
while ((line = bufReader.readLine()) != null)
Result += line;
return Result;
} catch (Exception e) {
e.printStackTrace();
}
return "";
}


activity.java完整代码

public class WebviewActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_webview);

WebView webView = (WebView) findViewById(R.id.webView);
webView.loadUrl("file:///android_asset/javaScriptCallNative.html");
// String dataString = getFromAssets("javaScriptCallNative.html");
// webView.loadDataWithBaseURL(null, dataString, "text/html", "utf-8", null);

/**
*  webView调用Android中的方法步骤
*  1。WebSettings的setJavaScriptEnabled 设置为true
*  2. addJavascriptInterface(Object obj, String name) 将对象暴露给JavaScrit
*  3、在JavaScript脚本中通过name对象调用Android方法
*/
WebSettings settings = webView.getSettings();
// 设置webView可以使用JavaScript
settings.setJavaScriptEnabled(true);
// 将对象暴露给JavaScript脚本(此处的name参数‘objectTest’一定要和JavaScript定义的相同)
webView.addJavascriptInterface(new JavaScriptObject(), "objectTest");

// 设置监听(webView中HTML加载的进度、标题等)
webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
Log.e("onProgressChanged", "进度改变 = " +  newProgress);
super.onProgressChanged(view, newProgress);
}

@Override
public void onReceivedTitle(WebView view, String title) {
Log.e("onReceivedTitle", "收到标题 = " +  title);
super.onReceivedTitle(view, title);
}
});

// 设置监听(页面加载情况)
webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
Log.e("Loading", "shouldOverrideUrlLoading");
return super.shouldOverrideUrlLoading(view, request);
}

@Override
public void onPageFinished(WebView view, String url) {
Log.e("onPageFinished", "加载完成");
super.onPageFinished(view, url);
}

@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
Log.e("onPageStarted", "开始加载");
super.onPageStarted(view, url, favicon);
}
});
}

private String getFromAssets(String fileName) {
try {
InputStreamReader inputReader = new InputStreamReader(
getResources().getAssets().open(fileName));
BufferedReader bufReader = new BufferedReader(inputReader);
String line = "";
String Result = "";
while ((line = bufReader.readLine()) != null)
Result += line;
return Result;
} catch (Exception e) {
e.printStackTrace();
}
return "";
}
}


第四步、运行程序,查看效果

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: