[移动开发]Js与webView交互

学习目标：

学习内容：

public class Android {

 	SharedPreferences sp;
 	
    @JavascriptInterface
    public void save(String username, String password) {
        sp = Application.getInstance().getSharedPreferences("SHARE_COOKIE", Context.MODE_PRIVATE);
    //保存用户名和密码
        sp.edit().putString("username":, username).apply();
        sp.edit().putString("password", password).apply();
    }
}

第二步，进行注册

//设置WebView属性，能够执行Javascript脚本
webView.getSettings().setJavaScriptEnabled(true);
//设置给WebView的调用关键字为 android
webView.addJavascriptInterface(new Android(), "android");

这样我们就能在webView中使用

android.save(username,password);

这样就基本实现了交互功能 ，接下来举几个实例，比如，当你的项目是混合开发(android+html),当webView实现自动登录的时候，该怎么做呢？

 String homeUrl = "https://shop.xyz/login";
 webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (url != null&&!TextUtils.isEmpty(url)) {
                    view.loadUrl(url);
                }
                return true;
            }

            @Override
            public void onPageFinished(WebView view, String url) {
            	//页面加载结束
                super.onPageFinished(view, url);
               //自动登录Js注入
                autoLogin(view, url);
            }
        });
        webView.loadUrl(homeUrl);

    //注册js方法到webView
    private void autoLogin(WebView view, String url) {
    //只给登录页面注入Js
        if (url.contains("https://shop.xyz/login")) {
            username = sp.getString("username","");
            passwd = sp.getString("password","");
            if ((userName != null && !TextUtils.isEmpty(userName)) &&
                    (passWord != null && !TextUtils.isEmpty(passWord))) {
                //登录成功并且没有退出    
                StringBuilder jsBuilder = new StringBuilder();
                //注入模拟登录按钮点击的js
                jsBuilder.append("var script = document.createElement('script');");
                jsBuilder.append("script.type = 'text/javascript';");
                jsBuilder.append("document.getElementById('username').value = '" + username + "';");
                jsBuilder.append("document.getElementById('passd').value = '" + passwd + "';");
                jsBuilder.append("document.getElementById('btn_login').click();");
                view.loadUrl("javascript:" + jsBuilder.toString());
            }else{
            	//新用户登录
                StringBuilder jsBuilder = new StringBuilder();
                //保存密码js
                jsBuilder.append("var script = document.createElement('script');");
                jsBuilder.append("script.type = 'text/javascript';");
                jsBuilder.append("var child = document.getElementById('btn_login');" +
                        "child.onclick = function(){android.save(document.getElementById('username').value,document.getElementById('passd').value);};");
                view.loadUrl("javascript:" + jsBuilder.toString());
            }
        }
    }

另外还需要一些配置，可以根据情况进行相应的增减

		//必须
		webView.getSettings().setJavaScriptEnabled(true);
		webView.addJavascriptInterface(new Android(), "android");
		//选择
        webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        webView.getSettings().setAllowFileAccess(true);
        webView.getSettings().setAppCacheEnabled(true);
        webView.getSettings().setDatabaseEnabled(true);
        webView.getSettings().setDomStorageEnabled(true);
        webView.getSettings().setSupportMultipleWindows(true);
        webView.getSettings().setSupportZoom(true);
        webView.getSettings().setBuiltInZoomControls(true);
        webView.getSettings().setDisplayZoomControls(false);
        //设置加载进来的页面自适应手机屏幕
        webView.getSettings().setUseWideViewPort(true);
        webView.getSettings().setLoadWithOverviewMode(true);