Android WebView（Xamarin）中的VueJS

debugcn 发表于 Dev

恩西梅诺夫

我试图将使用VueJS开发的小型混合C＃/单页应用程序捆绑为一个android应用程序。我们有一些类，用于创建和成像并将其发送到ESC打印机。如果我们从服务器加载应用程序，则一切正常：

theView.LoadUrl( "https://our-app.our-server.com" );

但是，当我们从file：///android_asset/index.html加载它时，它有点开始，但是页面为空。

我在chrome调试器中看到，VueJS成功创建了一些元素：

<div data-app="true" class="application app theme--light">
  <div class="application--wrap">
    <main class="v-content" data-booted="true" style="padding: 0px;">
      <div class="v-content__wrap"></div>
    </main>
  </div>
</div>

控制台中没有错误，只有一个空白屏幕。

我想念什么？

恩西梅诺夫

经过更多的努力之后，我问题的根源似乎在构建中，为JS文件和资产生成了绝对路径。我更改了vue.config.js中的两个设置以使其正常工作。

请注意，以前的解决方案也可以，但是它隐藏了真正的问题而不是解决问题。另外，这种解决方法仅适用于android（我在iOS上找不到相同的方法）

这是我所做的事情：我将assetsDir和publicPath更改为空字符串，以强制构建生成相对路径。

    module.exports = {
      assetsDir: '',
      publicPath: '',
      .....
    }

另外，我必须关闭路由器的历史记录模式，并定义另一条路由：

    {
      path: '/index.html',
      name: 'index',
      component: ..........,
    }

这样，iOS上的文件系统也不会出现任何问题。

-------------------替代解决方法---------------------

以下解决方案仅适用于android：

我想到了。这是file：//网址！更改为http：// localhost即可使用（加上几行代码）

出于同样的原因，当您直接从文件系统中打开某些页面时，为什么有些页面也不起作用。我记得，为了查看某些网页，我必须创建一个本地网络服务器，否则我几乎看不到任何东西，因为当您以这种方式打开页面时，浏览器的限制更大。一旦我将其更改为http：// localhost并修复了我的ShouldInterceptRequest，即可满足android资产向“ http：// localhost”发送的所有请求，并且一切正常。

不知道为什么（还）-我必须以这种方式加载索引：

wv.LoadDataWithBaseURL( "http://localhost", new StreamReader( Assets.Open( "index.html" ) ).ReadToEnd(), "text/html", "UTF-8", null );

代替

wv.LoadUrl( "http://localhost/index.html" );

另外，当请求http：// localhost时，我还必须重写WebViewClient以从资产提供内容：


    // view client to serve the web from assets folder correctly
    public class MyWebViewClient : WebViewClient {

        private AssetManager m_Assets;

        public MyWebViewClient( AssetManager assets ) {
            m_Assets = assets;
        }

        public static string GetMimeType( String url ) {
            String type = null;
            String extension = url.Split( '.' ).Last();
            if ( extension != null ) {
                if ( extension == "css" ) {
                    return "text/css";
                } else if ( extension == "js" ) {
                    return "text/javascript";
                } else if ( extension == "png" ) {
                    return "image/png";
                } else if ( extension == "gif" ) {
                    return "image/gif";
                } else if ( extension == "jpg" ) {
                    return "image/jpeg";
                } else if ( extension == "jpeg" ) {
                    return "image/jpeg";
                } else if ( extension == "woff" ) {
                    return "application/font-woff";
                } else if ( extension == "woff2" ) {
                    return "application/font-woff2";
                } else if ( extension == "ttf" ) {
                    return "application/x-font-ttf";
                } else if ( extension == "eot" ) {
                    return "application/vnd.ms-fontobject";
                } else if ( extension == "svg" ) {
                    return "image/svg+xml";
                }

                type = "text/html";
            }

            return type;
        }

        public override WebResourceResponse ShouldInterceptRequest( WebView view, IWebResourceRequest request ) {

            if ( request.Url != null && request.Url.Path != null && request.Url.Host == "localhost" ) {
                var mimeType = GetMimeType( request.Url.Path );
                var fileUrl = request.Url.Path
                    .Replace( "file://", "" )
                    .Replace( "android_asset/", "" )
                    .Trim( '/' );

                string extension = request.Url.Path.Split( '.' ).Last();;
                string fileEncoding = "application/octet-stream";
                if ( extension.EndsWith( "html" ) || extension.EndsWith( "js" ) || extension.EndsWith( "css" ) )
                    fileEncoding = "UTF-8";

                try {
                    return new WebResourceResponse( mimeType, fileEncoding, m_Assets.Open( fileUrl ) );
                } catch {
                    // ignore
                }
            }

            return base.ShouldInterceptRequest( view, request );
        }
    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。