Android中Webview与Js交互技巧大全(一)

好久没有动过博客了，近段时间公司没啥事情，所以利用这点时间给大家分享一些学到的东西，当然本人技术有限可能难免会有些错误，也希望各位看官多多指引，好了今天给大家说的是我们现在在一些电商应用里面经常会涉及的一些技术点如Android原生与前端之间的交互，当然现在各大公司都推出一些框架如weex,cordova等等供大家使用学习，但作为一名普通开发者，我们还是先把最基本搞懂，开篇前可能还是希望大家先熟悉下webview的基本用法和或多或少了解一点h5的语法；

/**
 * Android通过WebView调用 JS 代码
 * 对于Android调用JS代码的方法有2种：
 1. 通过WebView的loadUrl（）方便简洁 效率低获取返回值麻烦，使用场景：对应就是不需要返回值及对性能要求不高
 2. 通过WebView的evaluateJavascript（）效率高及获取返回值更方便(该方法的执行不会使页面刷新)缺点是向下兼容性差(android4.4以上这也是其使用场景)

 */

public class MainActivity extends AppCompatActivity {
    private WebView mWv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWv = ((WebView) findViewById(R.id.wv));
        WebSettings mWvSettings = mWv.getSettings();
        //设计与js交互的权限
        mWvSettings.setJavaScriptEnabled(true);
        //设置允许js弹窗
        mWvSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        //先载入js代码
        //格式规定为:file:///android_asset/文件名.html
        mWv.loadUrl("file:///android_asset/javascript.html");
        //由于设置了弹窗检验调用结果，所以需要js支持对话框
        //webview只是载体，内容渲染需要WebChromeClient类去实现
        //通过设置WebChromeClient对象处理JavaScript对话框
        //设置响应js的Alert函数
        mWv.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("kevin");
                b.setMessage(message);
                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                              result.confirm();
                    }
                });
                b.setCancelable(false);
                b.create().show();
                return true;
            }
        });
        /*
        特别注意：JS代码调用一定要在 onPageFinished（） 回调之后才能调用，否则不会调用。
        onPageFinished()属于WebViewClient类的方法，主要在页面加载结束时调用
        mWv.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                Toast.makeText(MainActivity.this,"加载完成",Toast.LENGTH_SHORT).show();
            }
        });*/
    }

    public void goTransfer(View view) {
        //通过handler发送消息
        mWv.post(new Runnable() {
            @RequiresApi(api = Build.VERSION_CODES.KITKAT)
            @Override
            public void run() {
                //方式一:loadUrl方法；加载js中对应的方法(方法名一定要对)
               //  mWv.loadUrl("javascript:callJS()");
                //方式二:evaluateJavascript（）
               /* 优点：该方法比第一种方法效率更高、使用更简洁。
                因为该方法的执行不会使页面刷新，而第一种方法（loadUrl ）的执行则会。
                Android 4.4 后才可使用*/
               /* mWv.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String s) {
                        Toast.makeText(MainActivity.this,"返回值:"+s,Toast.LENGTH_SHORT).show();
                    }
                });*/
               //为了更好的兼容性 推荐这样使用
               final int version = Build.VERSION.SDK_INT;//安卓版本变量
                if(version < 18){
                    //Android4.4以下
                    mWv.loadUrl("javascript:callJS()");
                }else {
                    //Android4.4及以上时
                    mWv.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
                        @Override
                        public void onReceiveValue(String s) {
                            Toast.makeText(MainActivity.this,"返回值:"+s,Toast.LENGTH_SHORT).show();
                        }
                    });
                }
            }
        });
    }
}

好了！看了这些注释大家应该理解了，接下来我贴出本地html代码(通常放在assets目录下与java文件夹平级)及布局代码

// 文本名：javascript
<html>
<head>
    <meta charset="utf-8">
    <title>yanxun</title>
    // JS代码
    <script>
// Android需要调用的方法
   function callJS(){
      alert("Android调用了JS的callJS方法");
   }
</script>
</head>
</html>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical"
    android:layout_height="match_parent"
    tools:context="yanxun.com.webviewandjsdemo.MainActivity">

  <WebView
      android:id="@+id/wv"
      android:layout_width="match_parent"
      android:layout_height="300dp"
      android:layout_margin="10dp"
      android:background="#fdfdfd"
      />
  <Button
      android:text="点我调用js代码"
      android:layout_margin="10dp"
      android:onClick="goTransfer"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      />
</LinearLayout>

好了，这篇主要说了下webview去调用js,下篇我们来看看更重要的js调用webview,tips-一般webview会涉及网络操作大家别忘了添加权限哦，！！

Android中Webview与Js交互技巧大全(一)

猜你喜欢