时间戳

首页 > 解决方案 > NativeScript Webview 新手问题

webview - NativeScript Webview 新手问题

问题描述

我正在尝试使用 NativeScript 来加快将现有 Android 应用程序移植到 iOS 的过程。有问题的应用程序在 Cordova webview 中使用了大量的 SVG 操作。为了简单起见，我想将所有现有的 Webview 端代码（本质上是整个现有的 Cordova www 文件夹及其内容）移植到新的 NativeScript 应用程序中。WebView 与自定义 Cordova 插件对话，我使用该插件与我的服务器对话以执行诸如显示新 SVG、跟踪用户操作等事情。

如果我解决了这些初期问题，我正在考虑使用这个组件来实现当前 webview JS 代码和新的 NativeScript 后端之间的双向通信，该后端将取代我当前的 Cordova 插件。这里一定有人会告诉我，我不需要那样做...... 然而，这样做意味着把婴儿和洗澡水一起扔掉，并重写我当前的所有 Webview ES6/JS/CSS 代码。

这几乎是我使用 NativeScript 的第一天，我遇到了一些问题。

显示外部 Web 内容。但是，我真正想做的是在以下文件夹层次结构中显示 www 文件夹中的本地 HTML 文件

app
|
 ____home
|
 ____www
      |
       ______ index.html
      |
       ______css
      |
       ______ tpl
      |
       .....

但是，当我使用标记

<Page actionBarHidden="true" >
 <WebView src="~/www/index.html"></WebView>
</Page>

我看到了错误消息

位于 file:///data/data/com.example.myapp/files/app/www/index.html 的网页不可用。

我将非常感谢任何能够告诉我我在这里做错了什么的人 - 以及如何摆脱当前显示应用程序标题的操作栏。

标签： webviewnativescript

解决方案

关于使用本地 HTML 文件

您的本地 HTML 文件是否被 Webpack 识别（在 NativeScript 中默认启用）？尝试将本地 HTML 文件显式添加到webpack.config.js文件中。这样，Webpack 将“知道”它也必须捆绑这个文件。

new CopyWebpackPlugin([
    { from: { glob: "<path-to-your-custom-file-here>/index.html" } }, // HERE
    { from: { glob: "fonts/**" } },
    { from: { glob: "**/*.jpg" } },
    { from: { glob: "**/*.png" } },
]

这里的例子

关于隐藏 ActionBar

仅限 NativeScript Core：尝试直接为包含页面的框架隐藏操作栏。在此处查看相关文档

NativeScript Angular：page-router-outlet默认情况下将有一个操作栏（您可以使用 Page DI 将其隐藏，如此处所做的）。否则，您可以创建一个router-outlet（而不是page-router-outlet）。router-outler不会有特定于移动设备的 ActionBar。

推荐阅读