android端
1、打开Android Studio,创建一个项目,file->new->new project 2、创建一个Test项目 这里MinSDK之所以选择api15是因为可以兼容几乎所有设备,如果选择其他api,可能会出现在android4.0上无法安装的情况,这里推荐用api15。最后点击Finish
3、创建完成项目,创建webview 默认会看到左侧目录结构上方有个一个android的下拉框,这里我们把他调整为Project 打开Test->app>src->main->java->com.hassmedia.test->MainActivity文件 MainActivity.java
package com.hassmedia.test; import androidx.appcompat.app.AppCompatActivity; import android.annotation.SuppressLint; import android.net.Uri; import android.os.Bundle; import android.webkit.ConsoleMessage; import android.webkit.JsPromptResult; import android.webkit.JsResult; import android.webkit.WebChromeClient; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; import java.util.HashMap; import java.util.Set; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); } @SuppressLint("JavascriptInterface") protected void init(){ //webview //设置窗口全屏 WebView webView = (WebView)findViewById(R.id.web_view); //调用JS,两句不加会出现错误 webView.getSettings().setLoadWithOverviewMode(true); //缩放至屏幕的大小 webView.getSettings().setAllowFileAccess(true); //可访问文件 webView.getSettings().setJavaScriptEnabled(true); //可执行Javascript脚本 webView.getSettings().setAppCacheEnabled(false); //禁止缓存数据 webView.getSettings().setDomStorageEnabled(true); webView.getSettings().setDatabaseEnabled(true); webView.getSettings().setDefaultTextEncodingName("UTF-8"); webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE); webView.getSettings().setSupportZoom(true); //设定支持缩放 webView.getSettings().setUseWideViewPort(true); //支持viewport属性 webView.setBackgroundColor(0xffffffff); webView.getSettings().setUseWideViewPort(true); webView.addJavascriptInterface(new AndroidtoJs(), "Test"); webView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } }); webView.setWebChromeClient(new WebChromeClient(){ @Override public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) { Uri uri = Uri.parse(message); // 如果url的协议 = 预先约定的 js 协议 // 就解析往下解析参数 if ( uri.getScheme().equals("js")) { // 如果 authority = 预先约定协议里的 webview,即代表都符合约定的协议 // 所以拦截url,下面JS开始调用Android需要的方法 if (uri.getAuthority().equals("webview")) { // // 执行JS所需要调用的逻辑 System.out.println("js调用了Android的方法"); // 可以在协议上带有参数并传递到Android上 HashMap<String, String> params = new HashMap<>(); Set<String> collection = uri.getQueryParameterNames(); //参数result:代表消息框的返回值(输入值) result.confirm("js调用了Android的方法成功啦"); } return true; } return super.onJsPrompt(view, url, message, defaultValue, result); } // 拦截JS的警告框 @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { return super.onJsAlert(view, url, message, result); } // 拦截JS的确认框 @Override public boolean onJsConfirm(WebView view, String url, String message, JsResult result) { return super.onJsConfirm(view, url, message, result); } @Override public boolean onConsoleMessage(ConsoleMessage consoleMessage) { return super.onConsoleMessage(consoleMessage); } }); webView.loadUrl("http://192.168.0.5/test2.html"); } }在Test->app>src->main->java->com.hassmedia.test目录下创建AndroidtoJs类文件,用来写js方法,供js调用 注意:因为是网络请求,所以需要申请权限,在Test->app>src->main->res->AndroidManifest.xml中增加
<uses-permission android:name="android.permission.INTERNET" />到这里,就完成了android的操作,下面写一个网页,测试一下。 test2.html代码如下:
<html> <head> <script src="assets/js/jquery.min.js"></script> <script> function ceshi(){ alert(Test.test()); } </script> </head> <body> <button type="button" onclick="ceshi()">测试</button> </body> </html>效果图如下: 至此结束。