Android开发：经过 webview 将网页打包成安卓应用

时间 2020-03-26

标签 android 开发经过 webview 网页打包成安应用栏目 Android 繁體版

原文原文链接

商业转载请联系做者得到受权，非商业转载请注明出处。

For commercial use, please contact the author for authorization. For non-commercial use, please indicate the source.

协议(License)：署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)

做者(Author)：

连接(URL)：https://www.35youth.cn/817.html

来源(Source)：搬砖少年

近期团队接到一个新的项目，企业内部的一个掌上超市项目，最初考虑经过公众号或者小程序来作，后面说是部署在企业内网，就考虑到作网站应用，因为须要经过运营商分配的apn链接企业内网，因此在打开应用以前须要检测一下网络，若是是web端的话，那就无法检测网络了，因此考虑使用安卓的 webview 封装一下H5的应用。
一、配置网络链接权限html

在AndroidManifest.xml文件中加上如下配置信息

<uses-permission android:name="android.permission.INTERNET"/>

注：从Android 9.0（API级别28）开始，默认状况下禁用明文支持。所以http的url均没法在webview中加载，因此只配置以上信息可能会致使net：：ERR_CLEARTEXT_NOT_PERMITTED报错，还须要在配置文件的 application中加入下面的配置。参照文章： net：：ERR_CLEARTEXT_NOT_PERMITTEDandroid

android:usesCleartextTraffic="true"

webview 网络配置异常
net：：ERR_CLEARTEXT_NOT_PERMITTED 配置
二、建立layout文件
使用idea的话，会自动建立MainActivity和对应的layout文件，直接在文件的基础上修改便可，使用Webview控件，若是须要使用进度条的话，能够将ProgressBar 的配置打开便可。web

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.ctjsoft.jxf.shop.MainActivity">
    <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent"/>
    <!--<ProgressBar android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/progressbar"
                 style="@android:style/Widget.ProgressBar.Horizontal" android:max="100" android:progress="0"
                 android:visibility="gone"/>-->
</androidx.constraintlayout.widget.ConstraintLayout>

三、修改 MainActivity 文件
重写onCreate方法：小程序

protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //progressBar = (ProgressBar) findViewById(R.id.progressbar);//进度条
 
        webView = (WebView) findViewById(R.id.webview);
        webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
        webView.getSettings().setAllowFileAccessFromFileURLs(true);
        // webview的设置中添加以下代码
        try {
            if (Build.VERSION.SDK_INT >= 16) {
                Class<?> clazz = webView.getSettings().getClass();
                Method method = clazz.getMethod("setAllowUniversalAccessFromFileURLs", boolean.class);
                if (method != null) {
                    method.invoke(webView.getSettings(), true);
                }
            }
        } catch (IllegalArgumentException e) {
            e.printStackTrace();
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        //webView.loadUrl("http://172.17.1.176:8082/");//加载url
        webView.loadUrl(API);
 
        //使用webview显示html代码
//        webView.loadDataWithBaseURL(null,"<html><head><title> 欢迎您 </title></head>" +
//                "<body><h2>使用webview显示 html代码</h2></body></html>", "text/html" , "utf-8", null);
 
        webView.addJavascriptInterface(this, "android");//添加js监听 这样html就能调用客户端
        webView.setWebChromeClient(webChromeClient);
        webView.setWebViewClient(webViewClient);
        WebSettings webSettings = webView.getSettings();
        /**
         * LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
         * LOAD_DEFAULT: （默认）根据cache-control决定是否从网络上取数据。
         * LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
         * LOAD_CACHE_ELSE_NETWORK，只要本地有，不管是否过时，或者no-cache，都使用缓存中的数据。
         */
        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);//不使用缓存，只从网络获取数据.
        webView.getSettings().setTextZoom(100);
webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);//设置js能够直接打开窗口，如window.open()，默认为false
        webView.getSettings().setJavaScriptEnabled(true);//是否容许执行js，默认为false。设置true时，会提醒可能形成XSS漏洞
        webView.getSettings().setSupportZoom(true);//是否能够缩放，默认
        webView.getSettings().setBuiltInZoomControls(true);//是否显示缩放按钮，默认false
        webView.getSettings().setUseWideViewPort(true);//设置此属性，可任意比例缩放。大视图模式
        webView.getSettings().setLoadWithOverviewMode(true);//和setUseWideViewPort(true)一块儿解决网页自适应问题
        webView.getSettings().setAppCacheEnabled(true);//是否使用缓存
        webView.getSettings().setDomStorageEnabled(true);//DOM Storage
    }

配置WebviewClientapi

//WebViewClient主要帮助WebView处理各类通知、请求事件
    private WebViewClient webViewClient = new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {//页面加载完成
            //progressBar.setVisibility(View.GONE);
        }
 
        public void onPageStarted(WebView view, String url, Bitmap favicon) {//页面开始加载
            //progressBar.setVisibility(View.VISIBLE);
        }
 
        @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            Log.i("ansen", "拦截url:" + request.getUrl());
            return super.shouldOverrideUrlLoading(view, request);
        }
 
    };
 
    //WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等
    private WebChromeClient webChromeClient = new WebChromeClient() {
        //不支持js的alert弹窗，须要本身监听而后经过dialog弹窗
        public boolean onJsAlert(WebView webView, String url, String message, JsResult result) {
            AlertDialog.Builder localBuilder = new AlertDialog.Builder(webView.getContext());
            localBuilder.setMessage(message).setPositiveButton("肯定", null);
            localBuilder.setCancelable(false);
            localBuilder.create().show();
 
            //注意:
            //必需要这一句代码:result.confirm()表示:
            //处理结果为肯定状态同时唤醒WebCore线程
            //不然不能继续点击按钮
            result.confirm();
            return true;
        }
 
        //获取网页标题
        @Override
        public void onReceivedTitle(WebView view, String title) {
            super.onReceivedTitle(view, title);
            Log.i("ansen", "网页标题:" + title);
        }
 
        //加载进度回调
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            // progressBar.setProgress(newProgress);
        }
    };
 
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        Log.i("ansen", "是否有上一个页面:" + webView.canGoBack());
        if (webView.canGoBack() && keyCode == KeyEvent.KEYCODE_BACK) {//点击返回按钮的时候判断有没有上一页
            webView.goBack(); // goBack()表示返回webView的上一页面
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
 
    /**
     * JS调用android的方法
     *
     * @param str
     * @return
     */
    @JavascriptInterface //仍然必不可少
    public void getClient(String str) {
        Log.i("ansen", "html调用客户端:" + str);
    }
 
    @Override
    protected void onDestroy() {
        super.onDestroy();
 
        //释放资源
        webView.destroy();
        webView = null;
    }