在 NativeScript 应用程序中加载本地 HTML/JavaScript/CSS

Posted 2023-04-13

【中文标题】在 NativeScript 应用程序中加载本地 HTML/JavaScript/CSS

【英文标题】：Load Local HTML/JavaScript/CSS Inside NativeScript App

【发布时间】：2019-05-12 23:00:50

【问题描述】：

对于使用 Angular 的 NativeScript ios 和 android 应用程序，我如何在 WebView 中加载具有 JS 和 CSS 引用的本地存储的 html 文件？我能够显示 WebView，但我收到找不到文件的错误，因为我不知道从我的组件指向哪里。

目前我在 src/assets 中有文件，其中有 index.html

在应用程序中是否有更合适的位置来存储这些文件？有没有比 WebView 更好的显示方式？如何将此文件引用为 WebView 的源？

我还需要知道如何引用应用下载的文件。 iOS 和 Android 在哪里存储从应用程序中下载的文件？如何从我的 WebView 中引用这些文件？

谢谢。

【问题讨论】：

使用绝对路径加载文件。 ***.com/questions/53309673/… 可能重复，请查看示例和链接的 Github 问题。

@Manoj 我如何知道资产中捆绑文件夹或下载文件的绝对路径是什么？我知道绝对路径是什么，但我似乎无法找出那条路径是什么。我正在使用模拟器...也感谢您的链接。这不是重复的，因为问题不是错误 - 我想知道捆绑和下载的文件夹的绝对路径是什么，以及如何将其作为 WebView 的 src。谢谢。

您拥有链接的 Playground 示例所需的一切，它在加载外部图像时进行了演示。我什至仔细检查了external JS files，它的工作方式相同。如果你在 app 中打包 HTML / JS / 图片，那么你所要做的就是使用 app 目录而不是 temp 目录。

@Manoj 谢谢。正是使用 'tns-core-modules/file-system' 让我能够找到正确的文件路径。感谢您的帮助！

很高兴，你想通了。添加与答案相同。

【参考方案1】：

在将本地 JS/CSS/Image 导入 WebView 时必须使用绝对路径。这是Playground sample。与给定的示例不同，如果您要加载与应用程序一起打包的文件，只需使用应用程序目录而不是正确的文件路径。

【参考方案2】：

我使用的路径如下：

src='~/assets/player.iframe.html'

在我刚刚添加的webpack.config.js中

new CopyWebpackPlugin([
                 from:  glob: "assets/**"  ,          <= Added this row
                 from:  glob: "fonts/**"  ,
                 from:  glob: "**/*.jpg"  ,
                ...

【讨论】：

另外，在tsconfig.json 中有一个"paths" 键。它描述了每个 ~ 映射到的内容。即在我的新项目中，它现在是 "~/*: "src/*"，所以现在此类图像的路径（没有 webpack 更改）将是：~/app/assets/...，因为 ~ 是根。