目录
Android
- webview 属性设置
- android 定义交互方法
HTML
- H5页面编辑
- 交互方法定义
web网站页面发布
- 发布H5页面到window 的IIS上
app测试
- 检测结果
一. webview属性设置
private void initLoadWeb() {
// 设置webview的属性
WebSettings webSettings = mWeb.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
webSettings.setBuiltInZoomControls(true);
webSettings.setUseWideViewPort(true);
webSettings.setSupportZoom(true);
webSettings.setDisplayZoomControls(false);
webSettings.setLoadsImagesAutomatically(true);
webSettings.setDefaultTextEncodingName("utf-8");
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
webSettings.setLoadWithOverviewMode(true);
webSettings.setDomStorageEnabled(true);
webSettings.setDatabaseEnabled(true);
webSettings.setAllowFileAccess(true);
// 设置view js 属性，并传递自定义类对象+别名
mWeb.addJavascriptInterface(new AndroidtoJs(), "jsInAndroid");
mWeb.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
view.setVisibility(View.GONE);
}
});
mWeb.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
if (newProgress == 100) {
//默认调的，也可以在任何时候调用
mWeb.loadUrl("JavaScript:callH5(1111)"); // 调用H5的方法，且无返回值
mWeb.loadUrl("JavaScript:sum(1,2)"); // 调用H5的方法且返回有返回值。
mProg.setVisibility(View.GONE);
} else {
mProg.setVisibility(View.GONE);
mProg.setProgress(newProgress);
}
}
});
mWeb.loadUrl("http://192.168.1.124/newWater/index.html");
}
@Override
protected void onStop() {
super.onStop();
if (mWeb != null) {
mWeb.clearHistory();
mWeb.destroy();
mWeb = null;
}
}
//在任何时候调用
if (webView != null) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
String msg = "javascript:getBookResult(" + object + ")";
Log.i("stf", "-SXZZ-androidToJs--msg->" + msg);
webView.evaluateJavascript(msg, new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.i("stf", "-SXZZ-androidToJs--此处为 js 返回的结果->" + value);
}
});
} else {
String me = "JavaScript:getBookResult(" + object + ")";
Log.i("stf", "-SXZZ-androidToJs--msg->" + me);
webView.loadUrl(me);
}
}
二.android交互方法的定义
// 继承自Object类
public class AndroidtoJs extends Object {
// 定义JS需要调用的方法
// 被JS调用的方法必须加入@JavascriptInterface注解
@JavascriptInterface
public void toTwoPage(String num) { // 这里采用的是原生的跳转方法
Log.i("stf","--toTwoPage-->"+num);
Intent intent = new Intent(WebMainActivity.this, WebTwoActivity.class);
intent.putExtra("param1", num);
startActivity(intent);
finish();
}
@JavascriptInterface
public void onSumResult(int result) { // 获取H5 的方法的返回值
Log.i("stf", "---result->" + result);
}
@JavascriptInterface
public String getAppVersionName() {
return "1.1";
}
}
三.H5页面编辑，供Android 调用方法定义，调用Android方法。
这里使用的Hbuilder 新建的web项目，目录结构如下
目录结构.png
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>主页 </title>
<script>
//定义本地方法 效果提供给Android端调用 被调用后将获得参数值，无返回值
function callH5(data){
document.getElementById("result").innerHTML="result success for Android to:"+data;
}
function sum(num1 , num2){ // 定义本地方法提供给Android 调用， 被调用后将计算结果返回给Androdid
window.jsInAndroid.onSumResult(num1+num2);
}
//定义本地点击事件 效果调用Android方法 传递参数给Android客服端
function myOnclick(){
document.getElementById("result").innerHTML="按钮被点击了"
//调用android本地方法 调用对象由Android定义实例化，调用方法由Android提供 (具体别名（jsInAndroid）和方法名（toTwoPage），“跳转到二级页面”为专递的参数，可变更)
window.jsInAndroid.toTwoPage("跳转到二级页面");
}
function myOnclick1(){
//调用android本地方法 调用对象由Android定义实例化，调用方法由Android提供 (具体对象名和方法待定，可变更) ,并获取 android 返回值
var num = jsInAndroid.getAppVersionName();
document.getElementById("result").innerHTML="按钮被点击了"+num
}
</script>
</head>
<body>
<p>当前为主页</p>
<p/>
<button id="button" onclick="myOnclick()">跳转二级页面</button>
<p/>
<div id="result">效果展示</div>
</body>
</html>
- webTwo.HTML 页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级页面</title>
<script>
//定义本地点击事件 效果调用Android方法 传递参数给Android客服端
function myOnclick(){
document.getElementById("result").innerHTML="按钮被点击了"
//调用android本地方法 调用对象由Android定义实例化，调用方法由Android提供 (具体对象名和方法待定，可变更)
window.jsInAndroid.toMainPage("跳转到一级页面");
}
</script>
</head>
<body>
<p>当前为二级页面</p>
<p/>
<button id="button" onclick="myOnclick()">回主页面</button>
<p/>
<div id="result">效果展示</div>
</body>
</html>
四.H5页面发布到IIS上
IIS的安装问度娘。
效果图
1.复制刚才新建的Hbuilder的项目，放在PC上的指定路径
2.新建应用程序池，新建添加应用程序，指定项目的路径。
五.app端测试
result 为 android调用H5的sum方法返回的结果。
toTwoPage 为H5调用android的方法并传递的参数。
image.png
