缘由
最近准备开发几个小的APP玩玩,但自己最擅长的可能算是前端的东西吧!这就想到了H5开发,之前有老师和我聊过,就尝试弄了一下;当然H5开发有各种开发的框架比如Flutter等等,我这里是用的原生的Webview;
代码
html设置
在src/main/下创建一个文件夹assets,注意名称,我第一次运行不了看日志才发现这个问题;
在里面创建一个javascript.html文件,内容如下:
<html><head> <meta charset="utf-8"> <title>emperintertitle> <div align="center"> <p>I Love <a id="name"> You !a>p> <P>Date:<a id="demo">now!a>P> <button>buttonbutton> 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() { @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; } }); }}
样例图
参考
https://www.jianshu.com/p/345f4d8a5cfa
除非特别说明,本博客所有作品均采用知识共享署名-非商业性使用-禁止演绎 4.0国际许可协议进行许可。转载请注明转自-
https://www.emperinter.info/2020/06/05/android-load-webview-js/