最近项目中需要用到与HTML5交互,也就是WebView的使用,与js的交互肯定必不可少.Java与JS的相互调用.先看效果图:
首先在Module下的assets目录下有个本地的.html文件,我们知道assets目录下的文件是被原封不动的打包进apk的.如下图所示 web.html
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <script type="text/javascript"> function javaCallJs(arg){ document.getElementById("content").innerHTML = ("androidJS互调："+arg ); } </script> </head> <body> <div align="left" id="content"> </div><br/> <input type="button" value="js调android " οnclick="window.Android.showToast()" /> </body> </html>xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:background="@android:color/holo_blue_light" android:gravity="center"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="登录页面" android:textColor="@android:color/black" android:textSize="20sp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="10dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/bg_shap" android:orientation="vertical" android:padding="5dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="账号：" android:textColor="#000000" /> <EditText android:id="@+id/et_number" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="请输入账号..." android:textColor="#000000" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="密码：" android:textColor="#000000" /> <EditText android:id="@+id/et_password" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="请输入密码..." android:password="true" android:textColor="#000000" /> <Button android:id="@+id/btn_login" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="登录" android:textColor="#000000" android:textSize="25sp" /> </LinearLayout> </LinearLayout> </LinearLayout> JavaAndJSActivity ** * 作用：java和js互调 */ public class JavaAndJSActivity extends Activity implements View.OnClickListener { private EditText etNumber; private EditText etPassword; private Button btnLogin; private WebView webView; private void findViews() { setContentView(R.layout.activity_java_and_js); etNumber = (EditText) findViewById(R.id.et_number); etPassword = (EditText) findViewById(R.id.et_password); btnLogin = (Button) findViewById(R.id.btn_login); btnLogin.setOnClickListener(this); initWebView(); } @Override public void onClick(View v) { if (v == btnLogin) { login(); } } private void login() { String numebr = etNumber.getText().toString().trim(); String password = etPassword.getText().toString().trim(); if (TextUtils.isEmpty(numebr) || TextUtils.isEmpty(password)) { Toast.makeText(JavaAndJSActivity.this, "账号或者密码为空", Toast.LENGTH_SHORT).show(); } else { //登录 login(numebr); } } /** * Java调用javaScript * @param numebr */ private void login(String numebr) { webView.loadUrl("javascript:javaCallJs(" + "'" + numebr + "'" + ")"); setContentView(webView); } private void initWebView() { webView = new WebView(this); WebSettings webSettings = webView.getSettings(); //设置支持javaScript脚步语言 webSettings.setJavaScriptEnabled(true); //支持双击-前提是页面要支持才显示 // webSettings.setUseWideViewPort(true); //支持缩放按钮-前提是页面要支持才显示 webSettings.setBuiltInZoomControls(true); //设置客户端-不跳转到默认浏览器中 webView.setWebViewClient(new WebViewClient()); //设置支持js调用java webView.addJavascriptInterface(new AndroidAndJSInterface(), "Android"); //加载网络资源 // webView.loadUrl("http://10.0.2.2:8080/assets/JavaAndJavaScriptCall.html"); webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html"); } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); findViews(); } /** * js可以调用该类的方法 */ class AndroidAndJSInterface { @JavascriptInterface public void showToast() { Toast.makeText(JavaAndJSActivity.this, "我被js调用了哦!", Toast.LENGTH_SHORT).show(); } } WebView还有很多方法,体现了其强大之处,后续用到再继续补充!!!!!!!
