对于遇到 WebView 问题的其他用户，这里仅作参考

Question

Nativescript 裸 webview 似乎无法工作

2015-05-27

5391

javascript android nativescript

我最近接触到了 nativescript，我遇到了一个似乎无法解决的问题。

我想要完成的只是打开一个基本的 WebView 并设置一个外部 URL 来加载，例如 stackoverflow.com。

我在带有 Android api 17

的模拟器上运行它>

app.js

var application = require("application");
application.mainModule = "main-page";
application.cssFile = "./app.css";
application.start();

main-page.js

var vmModule = require("./main-view-model");
var webViewModule = require("ui/web-view");
var webView = new webViewModule.WebView();

function pageLoaded(args) {
    var page = args.object;
    var web = page.getViewById(webViewModule.WebView,"webView");
    web.url="http://google.com";

}
exports.pageLoaded = pageLoaded;

main-page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
  <StackLayout>
    <WebView id="webView" colSpan="4" row="2"/>
  </StackLayout>
</Page>

我还检查了 INTERNET 权限是否设置为应用程序，是的，它已启用。

此外，应用程序停止工作，命令

tns run android --emulator

在模拟器上成功安装并运行应用程序后，它只是输出大量垃圾邮件。

您能帮助我了解它究竟应该如何工作吗？

Answer 1

对于遇到 WebView 问题的其他用户，这里仅作参考

由于某些原因 您无法将 WebView 放入 StackLayout ，它根本无法显示。请改用 GridLayout。有一个 GitHub 问题。

完整答案

Android 模拟器确实很烦人，但在该日志的某个地方（很可能在最后）几乎肯定有一个包含错误的堆栈跟踪。如果您运行的是 Mac，iOS 模拟器就没那么烦人了。

话虽如此，让我们修复您的代码。下面是有效代码，注释显示了对代码的更改。

app.js

没有问题，看起来应该如此！

main-page.js

/**
 * Do you actually have a file called 'main-view-model.js' in the same
 * folder as this file? In any case, it's not used in your example code
 * so I commented it out.
 */
//var vmModule = require("./main-view-model");
var webViewModule = require("ui/web-view");

/**
 * Here you are creating a NEW webview. If you want to, you can create
 * element dynamically and then attach them to the view. However, in your
 * example you already have a webview in your xml file so there's no need
 * to create a new one.
 */
//var webView = new webViewModule.WebView();

function pageLoaded(args) {
    var page = args.object;
    /**
     * Corrected the line below. What you're doing here is pretty
     * much equal to $('#webView') in jQuery. You're selecting
     * an element
     */
    var web = page.getViewById("webView");
    //var web = page.getViewById(webViewModule.WebView,"webView");
    web.url = "http://google.com";

}
exports.pageLoaded = pageLoaded;

main-page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
    <GridLayout>
        <WebView id="webView" />
    </GridLayout>
</Page>

所以我在这里做了几件事。首先，我删除了 colSpan="4" row="2" 。这两个参数仅用于 GridLayouts ，并且您正在使用 StackLayout。但是如您所见，我已将您的 StackLayout 更改为 GridLayout。原因是，出于某种原因，您无法将 WebView 放入 StackLayout 中，它根本就不会显示。有一个 GitHub 问题。

替代解决方案

如果您只想创建一个显示 Google 的 WebView，您可以直接在 XML 中设置 url 属性。如果您这样做，您甚至不需要 Javascript。当然，如果您想动态设置 url，您需要从 Javascript 中执行此操作。

设置 url 属性的示例：

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
    <GridLayout>
        <WebView id="webView" url="http://www.google.com" />
    </GridLayout>
</Page>

Answer 2

目前，WebView 已弃用属性 url。请改用 src。

kabi_rules

2017-09-07