总结下要点:
1.在Android项目代码目录的app/src/main目录下面创建个assets文件夹。
再在里面创建个web目录。把web的代码放进去。如:
2.Android应用中,activity布局界面上放置一个webview。
并做相关的配置:
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_second); WebView webView = (WebView) findViewById(R.id.webview); WebSettings webSettings = webView.getSettings(); //如果访问的页面中要与Javascript交互,则webview必须设置支持Javascript webSettings.setJavaScriptEnabled(true); // 若加载的 html 里有JS 在执行动画等操作,会造成资源浪费(CPU、电量) // 在 onStop 和 onResume 里分别把 setJavaScriptEnabled() 给设置成 false 和 true 即可 //支持插件 //webSettings.setPluginsEnabled(true); //设置自适应屏幕,两者合用 webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小 webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小 //缩放操作 webSettings.setSupportZoom(true); //支持缩放,默认为true。是下面那个的前提。 webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false,则该WebView不可缩放 webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件 //其他细节操作 webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存 webSettings.setAllowFileAccess(true); //设置可以访问文件 webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口 webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片 webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式 // 设置可以访问文件 webSettings.setAllowFileAccess(true); webSettings.setAllowFileAccessFromFileURLs(true); webSettings.setAllowContentAccess(true); webSettings.setDomStorageEnabled(true); webView.getSettings().setAllowFileAccessFromFileURLs(true); webView.setWebViewClient(new WebViewClient() { @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view, url, favicon); Log.d("webapp","开始加载"); } @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); Log.d("webapp","加载结束"); } // 链接跳转都会走这个方法 @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { Log.d("webapp","Url:"+ url ); view.loadUrl(url);// 强制在当前 WebView 中加载 url return true; } }); //核心方法, 用于处理JavaScript被执行后的回调 webView.addJavascriptInterface(new JSInterface(), "justTest"); //webView.loadUrl("http://192.168.156.87:10644"); webView.loadUrl("file:///android_asset/web/index.html"); }
核心调用:
webView.loadUrl("file:///android_asset/web/index.html");
注意本地文件路径的写法,必须是file:///android_asset/web/...
当然,也可以直接把webapp部署到网上,这个loadUrl传后台服务地址。但是这里用文件方式是考虑到终端4G网络访问慢,导致加载慢的问题。若是手机app或有线,无线网络,部署到后台最好。但是有利有弊吧,若每个项目各不相同,得打包部署多少个才够。放到本地的一个好处是终端可以在各个项目上用,而不用考虑服务端部署webapp的问题。
JS调用Android原生接口的方法:
//定义回调接口 private final class JSInterface{ @SuppressLint("JavascriptInterface") @JavascriptInterface public void testAndroid(String userInfo){ System.out.println("JavaScript调用Android啦"); Toast.makeText(SecondActivity.this, userInfo, Toast.LENGTH_LONG).show(); } }
注意@JavascriptInterface这个注解不可少。因为Adnroid从17api之后为了安全起见,只有这个注解的方法,才能被js调用。