app打包h5相对路径错误

在移动端开发中，将H5应用打包成Native App是常见的做法，通常使用Apache Cordova或Ionic等工具来实现。但是在打包的过程中，会经常遇到相对路径错误的问题。本文将介绍这个问题的原因和解决方法。

一、问题描述

将H5应用打包成Native App时，通常会将H5应用代码放置于assets目录下，以便于在Native环境下访问。但是在访问H5应用页面时，经常会出现相对路径错误的问题。例如，H5应用中有如下代码：

```

```

在Native环境中，由于WebView加载页面时的路径不同，会导致找不到样式文件，从而导致应用展示异常。

二、问题原因

在WebView中，加载文件时会根据文件的相对路径来定位文件位置。相对路径是相对于当前页面的路径来定义的，但在Native中，当前页面路径与H5应用中显示的路径并不一致，通常有以下三种情况：

1. 当前页面路径为android_asset/，而非H5应用中的根路径。

2. 当前页面路径为file://android_asset/，而非H5应用中的根路径。

3. 当前页面路径为file:///android_asset/，而非H5应用中的根路径。

因此，如果在H5应用中使用相对路径，会导致在WebView中无法找到对应的文件。

三、解决方案

为了解决相对路径错误的问题，需要在H5应用中使用绝对路径。常见的解决方案如下：

1. 使用WebAppInterface

在Native中，可以使用WebAppInterface将Native层的路径传入H5应用。在H5应用中，可以通过WebAppInterface获取Native层传递的参数，从而获取正确的路径信息。

例如，在Native中创建一个名为NativePath的类，用于将Native的路径信息传递给H5应用。在H5应用中，可以通过如下代码来获取NativePath类传递的信息，并使用该信息生成相应的绝对路径：

```

function getPath(relativePath) {

var path = window.Android.getNativePath();

path = path.substring(0, path.lastIndexOf("/") + 1) + relativePath;

return path;

}

```

这样，在H5应用中的样式文件路径就可以变为：

```

```

2. 在WebView中设置Base Url

在Native环境中，可以通过WebView的loadDataWithBaseURL方法，设置Base Url参数，从而指定WebView在加载文件时使用的根路径。

例如，在Native中加载H5应用时，可以使用如下代码：

```

String baseUrl = "file:///android_asset/";

webView.loadDataWithBaseURL(baseUrl, html, "text/html", "UTF-8", null);

```

这样，在H5应用中的样式文件路径就可以变为：

```

```

3. 使用相对路径

在H5应用中，可以使用相对路径，但需要根据当前页面的路径来计算相对路径。可以将当前页面路径发送给H5应用，从而计算出正确的相对路径。

例如，在Native中加载H5应用时，可以将当前页面传递给H5应用：

```

String baseUrl = "file:///android_asset/";

String js = "window.currPath='" + baseUrl + "';";

webView.loadUrl("javascript:" + js);

```

在H5应用中，可以使用window.currPath获取当前路径，并根据当前路径计算相对路径。例如：

```

```

注意，使用相对路径的方式需要保证相对路径的正确性，否则仍有可能出现文件路径错误的问题。

四、总结

在将H5应用打包成Native App时，相对路径错误是一个常见的问题。在解决这个问题时，可以使用WebAppInterface、设置Base Url或者使用相对路径等方式。无论采用哪种方式，都需要保证路径的正确性，从而避免出现相对路径错误的问题。