WebView可以使得网页轻松的内嵌到app里，还可以直接跟js相互调用，实现H5混合开发。文中demo已经上传百度网盘，链接:https://pan.baidu.com/s/1iaaei0IXIxQPBUqL2QKO5w 密码:p74g
工具/原料
android studio
android sdk/jdk
webview加载网页
1、在AndroidManifest.xml设置访问网络权限：<uses-permission android:name="android.permission.INTERNET"/>2.在res里新建layout布局，置入webview控件<WebViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:id="@+id/webView"/>3.最简单的显示一个网页的代码webView = (WebView) findViewById(R.id.webView);//web资源webView.loadUrl("https://www.baidu.com");//设置WebViewClient客户端webView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; }});
webview加载本地网页
1、webview加载本地网页1.在app/src/main下新建一个文件夹，取名assets，将想要加载的html文件放进去，如果HTML文件用到了CSS样式，字体，需要将这些文件也一同放进去，如图所示2.同上，在res里新建layout布局，置入webview控件<WebViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:id="@+id/webView"/>3.关键代码：mWebView=(WebView) findViewById(R.id.webView);WebSettings webSettings = mWebView.getSettings();webSettings.setJavaScriptEnabled(true);mWebView.loadUrl("file:///android_asset/localhtml.html");
webview与JS交互
1、webview与JS交互能够实现原生与H5混合开发，这里只简单介绍WebView的loadUrl（），具体需要什么样的接口要根据需求来定制，如提供h5页面调用相机功能，提供定位功能的接口等，选择哪种方法也根据自己android调用JS代码的方法有2种：1.通过WebView的loadUrl（）2.通过WebView的evaluateJavascript（）而JS调用Android代码的方法有3种：通过WebView的addJavascriptInterface（）进行对象映射通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息这里主要讲一个js调用android toast的实例
2、在app/src/main下新建assets文件夹，放入一个jshtml.html文件<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>测试</title><script> function callToast(){ test.toast("js调用了android的toast方法"); } </script></head><body><button type="button" id="button1" onclick="callToast()">按钮</button></body></html>2.创建api类，定义JS需要调用的方法// 定义JS需要调用的方法// 被JS调用的方法必须加入@JavascriptInterface注解@JavascriptInterfacepublic void toast(String msg) { Toast.makeText(context,msg,Toast.LENGTH_LONG).show();}3.关键代码：// 设置与Js交互的权限webSettings.setJavaScriptEnabled(true);// 通过addJavascriptInterface()将Java对象映射到JS对象//参数1：Javascript对象名//参数2：Java对象名mWebView.addJavascriptInterface(new JsApi(JsWebViewActivity.this), "test");//AndroidtoJS类对象映射到js的test对象// 加载JS代码// 格式规定为:file:///android_asset/文件名.htmlmWebView.loadUrl("file:///android_asset/jshtml.html");
