android studio加载vue项目白屏问题

Delta
2,816 阅读2分钟

先贴下安卓里的代码

WebView webView = (WebView) findViewById(R.id.web_viewer);
webView.setWebViewClient(new WebViewClient() {
     @Override
     public boolean shouldOverrideUrlLoading(WebView view, String url) {
           view.loadUrl(url);
           return true;
     }
});
webView.loadUrl("https://www.example.com");

刚遇到问题的时候懵了，项目打包后浏览器打开是没问题的，单独建了html文件放进去也能显示，就是vue项目一放到安卓里的就白屏，Android Studio Logcat里面也没看到什么报错信息，就去百度，总结就是2个问题，参考

  1. 打包后，引入的js和css文件的路径错误
  2. 安卓对es6的兼容问题

1、解决问题1的位置问题：config/index.js文件中：把assetsPublicPath: '/'改为assetsPublicPath: './'，这样操作之后，可以直接在浏览器打开index.html文件

具体如下：

build: {assetsPublicPath: ‘./’,}

2、第2个问题是由于IE和低版本Android对es6语法的支持不好，需要安装babel-polyfill

npm install babel-polyfill

build/webpack.base.conf.js中将

entry: {
    app: './src/main.js'  
},

改为

entry: {
    app: ['babel-polyfill', './src/main.js']  
},

上面2个全都改了，还是白屏，只好重写webView获取报错信息

webView.setWebViewClient(new WebViewClient() {
     @Override
     public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
           super.onReceivedError(view, request, error);
           Log.e("err", "onReceivedError:" + error.getDescription() + " url:" + request.getUrl());
     }
});

运行发现下面的报错

04-28 13:42:34.208 20492-20492/com.example.test_h5 E/chromium: [ERROR:interface_registry.cc(104)] Failed to locate a binder for interface: autofill::mojom::PasswordManagerDriver

解决方法，在webView.setWebViewClient(new WebViewClient())中重写onReceivedSslError方法，注释掉默认的super.onReceivedSslError(view, handler, error);

然鹅，并没有什么用还是报一样的错误。。。。。。

webView.setWebViewClient(new WebViewClient() {
     @Override
     public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {

           // 不要使用super，否则有些手机访问不了，因为包含了一条 handler.cancel()
           // super.onReceivedSslError(view, handler, error);

           // 接受所有网站的证书，忽略SSL错误，执行访问网页
           handler.proceed();
     }
});

还是白屏。。。

后来看到别人的配置，代码如下

// 允许js脚本的执行
webView.getSettings().setJavaScriptEnabled(true);
// 设置WebView是否支持使用屏幕控件或手势进行缩放，默认是true，支持缩放。
webView.getSettings().setSupportZoom(true);
// 设置WebView是否使用其内置的变焦机制，该机制集合屏幕缩放控件使用，默认是false，不使用内置变焦机制。
webView.getSettings().setBuiltInZoomControls(false);
// 设置WebView默认值字体值，默认值16，取值1到72
webView.getSettings().setDefaultFontSize(18);

然后，就，可以显示了！！！

具体起作用的是webView.getSettings().setJavaScriptEnabled(true);

setJavaScriptEnabled(boolean flag)

设置WebView是否允许执行JavaScript脚本，默认false，不允许

因为之前默认是false，所以WebView没有执行vue打包后的js文件，而vue的内容都是通过js动态加载的，所以会白屏。

然后我又把上面关于polyfill的配置取消了，重新打包后，还是可以访问

打包的文件路径还是需要改地，不然加载js和css文件会找不到还是会导致白屏。

所以，白屏的根本原因是WebView禁用了js脚本的执行。

至此！










avatar
文章
阅读
粉丝