Nativescript裸webview似乎不起作用

Question

我最近进入了nativescript,我遇到了一个我似乎无法解决的问题.

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

我在Android api 17的模拟器上运行它

app.js

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

主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;

主page.xml

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

我还检查了INTERNET权限是否设置为application,是的,启用了.

应用程序也停止工作,并且命令

tns运行android --emulator

在模拟器上成功安装并运行应用程序后,它只会发送大量输出.

你能帮助我理解究竟应该如何工作吗？

Answer 1

tl; dr为其他有WebView问题的人

出于某种原因,您无法将WebView放在StackLayout中,它只是不显示.请改用GridLayout.这有一个GitHub问题.

完整答案

Android模拟器真的很健谈,但在该日志中的某个地方(最有可能在最后),几乎可以肯定是错误的堆栈跟踪.如果你正在运行Mac,iOS模拟器就不那么健谈了.

那就是说,让我们修复你的代码.下面是工作代码,注释显示代码的更改.

app.js

没问题,看起来应该是这样!

主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;

主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,则可以url直接在XML中设置该属性.如果你这样做,你甚至不需要Javascript.当然,如果你想动态设置网址,你需要从Javascript中做到这一点.

设置url属性的示例:

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