hybird简介以及安卓应用hybird初体验
程序员文章站
2022-07-12 20:58:45
...
hybird简介：
有一篇文章写的很好，有兴趣的同学可以去看一下hybird app
如今app应用大概分三种：
1、原生app 顾名思义是纯原生写出的app
2、web app 顾名思义是web写出的app
3、hybird app 原生+web写出的app
hybird app 用通俗的话来解释就是web运行在app的webview上，其关键点在于web和原生的交互
那么web和原生怎么交互呢？（这里的原生解释一下，比如web如何调用手机的相机，相册等）
有兴趣的同学可以看看我写的这篇文章，写了一点交互基础点击打开链接
安卓webview中setWebViewClient方法，WebViewClient中有个方法为
shouldOverrideUrlLoading
这个方法可以拦截到页面跳转的url，那么如果web要让客户端做什么的时候，是可以将一些参数加到跳转url中的，在跳转的时候，客户端拦截到web传过来的url，解析url做相应的事情
OK web------->客户端走通了，那么客户端---------->web呢？答案在上面的链接中，不懂的同学可以去看看
好的，接下来上代码
web.html位置：
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function javaToJS(){
document.getElementById("content").innerHTML =
"<br\>JAVA调用了JS的无参函数";
}
function javaToJsWith(arg){
<!--document.getElementById("content").innerHTML =-->
<!--("<br\>"+arg);-->
document.location=arg;
}
function hybird(){
document.location="jump&ddididisisidisdi"
<!--window.location.href="jump&ddididisisidisdi";-->
}
</script>
</head>
<body>
以下为html内容<br/>
<h1><div id="content">显示一条文本</div></h1>
<br/>
<input type="button" value="调用java代码，且无参" onclick="window.java.noParameterFunction()" />
<br/>
<br/>
<input type="button" value="调用java代码，且有参" onclick="window.java.parameterFunction('JS->android 有参成功')"/>
<br/>
<br/>
<button id="btn" onclick="hybird()">hybird 测试</button>
</body>
</html>
MainActivity.java
package com.example.zyy.androidtohtml;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;
/**
* Created by zyy on 2018/2/27.
*/
public class MainActivity extends Activity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webview);
// 启用javascript
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.indexOf("jump")>-1){
Toast.makeText(MainActivity.this,"hahahahahha",Toast.LENGTH_LONG).show();
return true;
}else if (url.startsWith("http")){
view.loadUrl(url);
return true;
}
return false;
}
});
webView.setWebChromeClient(new WebChromeClient());
// 从assets目录下面的加载html
webView.loadUrl("file:///android_asset/web.html");
webView.addJavascriptInterface(MainActivity.this, "java");//name:android在网页里面可以用window.name.方法名调用java方法
//Button1按钮 无参调用HTML js方法
findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 无参数调用 JS的方法
webView.loadUrl("javascript:javaToJS()");
}
});
//Button2按钮 有参调用HTML js方法
findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 传递参数调用JS的方法，点击后调用document.location=arg切换网页
webView.loadUrl("javascript:javaToJsWith(" + "'https://baike.so.com/doc/456230-483111.html'" + ")");
}
});
}
//由于安全原因 targetSdkVersion>=17需要加 @JavascriptInterface
//JS调用java，且无参
@JavascriptInterface
public void noParameterFunction() {
runOnUiThread(new Runnable() {
@Override
public void run() {
Button button = (Button) findViewById(R.id.button2);
button.setText("JS->android 无参成功");
}
});
}
//JS调用java，且传参
@JavascriptInterface
public void parameterFunction(final String parameter) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Button button = (Button) findViewById(R.id.button2);
button.setText(parameter);
}
});
}
}
效果：