Question

我想显示一个我在Vue JS中使用NativeScript的本地文件（html + css）

我的代码是：

调用html文件（路径：App / html / Fleur.html）

我看到了类似的主题，但是我不明白它是如何工作的。

<template>
        <ScrollView>
            <StackLayout class="home-panel">
                <WebView height="1200px" src="~/html/Fleur.html" />
                <!--Add your page content here-->
            </StackLayout>
        </ScrollView>
</template>

<script>
import html from "~/html/Fleur.html";
    export default {
        data() {
            return {};
        }
    };
</script>

我的网页是这样的：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arya V</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <section class="landing" id="landing">

      <ul class="landing__iconsList absolute" id="iconsList"></ul>

      <div class="landing__stat absolute">
        <div id="app"></div>

        <div class="landing__shape goal absolute" id="goal"></div>
        <div class="landing__shape currentweek absolute" id="currentweek"></div>
        <div class="landing__shape lastweek absolute" id="lastweek"></div>

        <div class="landing__focus absolute">
          <div class="landing__focus__completion absolute"></div>
          <div class="landing__focus__main absolute">
            <img class="landing__focus__main__icon" src="images/energy.svg"></img>
            <p class="landing__focus__main__description">Énergie</p>
            <p class="landing__focus__main__value">65</p>
          </div>
        </div>
      </div>

    </section>

    <script src="data.js" charset="utf-8"></script>
    <script src="main.js" charset="utf-8"></script>
  </body>
</html>

Answer 1

您不必导入HTML页面，也不需要这样做。

必须遵循这种方法，official docs

使用args.object导入可观察的webview组件，以获取视图并进行设置等。

或者，您可以使用webview plugin之类的插件

它可以让您做得比原生的更多。

如何在Nativescript / Vue JS中加载本地WebView

1 个答案: