缘由
最近准备开发几个小的APP玩玩，但自己最擅长的可能算是前端的东西吧！这就想到了H5开发，之前有老师和我聊过，就尝试弄了一下；当然H5开发有各种开发的框架比如Flutter等等，我这里是用的原生的Webview；
代码
html设置
在src/main/下创建一个文件夹assets,注意名称，我第一次运行不了看日志才发现这个问题；
- 在里面创建一个javascript.html文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>emperinter</title>
<div align="center">
<p>I Love <a id="name"> You !</a></p>
<P>Date:<a id="demo">now!</a></P>
<button>button</button>
</div>
<script>
// Android需要调用的方法
function callJS(){
alert("Android调用了JS的callJS方法");
}
function ChangeName(InputName){
document.getElementById("name").innerHTML= InputName;
return InputName;
}
function callJS_val(val){
alert(val);
}
</script>
</head>
</html>
布局
布局如下：
- 代码
> 仅供参考，按需修改！
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TableLayout
android:layout_width="409dp"
android:layout_height="729dp"
android:layout_marginStart="1dp"
android:layout_marginLeft="1dp"
android:layout_marginTop="1dp"
android:layout_marginEnd="1dp"
android:layout_marginRight="1dp"
android:layout_marginBottom="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent" >
<WebView
android:id="@+id/Main_webview"
android:layout_width="420dp"
android:layout_height="337dp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="@+id/Main_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="@string/Mian_button" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="@+id/MainText0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
android:text="Name" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/Main_button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
java
public class MainActivity extends AppCompatActivity {
WebView mwebview;
Button mbutton;
Button mbutton1;
EditText medittext;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//实例化
mwebview = (WebView) findViewById(R.id.Main_webview);
mbutton = (Button) findViewById(R.id.Main_button);
mbutton1 = (Button) findViewById(R.id.Main_button1);
medittext = (EditText) findViewById(R.id.MainText0);
WebSettings webSettings = mwebview.getSettings();
// 设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
// 设置允许JS弹窗
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
// 先载入JS代码
// 格式规定为:file:///android_asset/文件名.html
mwebview.loadUrl("file:///android_asset/javascript.html");
Log.e("webload","html load successful !\n\n\n\n\n\n");
//Button事件监听
mbutton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 通过Handler发送消息
mwebview.post(new Runnable() {
@Override
public void run() {
// 注意调用的JS方法名要对应上
// 调用javascript的callJS()方法
mwebview.loadUrl("javascript:callJS()");
Log.e("js调用：","0k!\n\n\n\n\n\n\n\n\n\n\n\n");
}
});
}
});
mbutton1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mwebview.post(new Runnable() {
@SuppressLint("NewApi")
@Override
public void run() {
String str = medittext.getText().toString();
try {
// 只需要将第一种方法的loadUrl()换成下面该方法即可
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
mwebview.evaluateJavascript("javascript:ChangeName('" + str + "')", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
Log.e("js调用change_name：","0k!\n\n\n\n\n" + value + "\n\n\n\n\n\n\n");
}
});
}else{
mwebview.loadUrl("javascript:ChangeName('" + str +"')");
//如何传参？？？
//传参是传进去了，但页面没有任何变化。
Log.e("ChangeName0",str + "\n\n\n\n\n");
}
}catch (Exception ex){
Log.e("ChangeName Exception",":" + ex);
}
}
});
}
});
// 由于设置了弹窗检验调用结果,所以需要支持js对话框
// webview只是载体，内容的渲染需要使用webviewChromClient类去实现
// 通过设置WebChromeClient对象处理JavaScript的对话框
//设置响应js 的Alert()函数
mwebview.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
b.setTitle("Alert");
b.setMessage(message);
b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
b.setCancelable(false);
b.create().show();
return true;
}
});
}
}
样例图
Leave a Reply