如何在 Nativescript/vue JS 中加载本地 WebView答案

【问题标题】：How load a local WebView in Nativescript/ vue JS如何在 Nativescript/vue JS 中加载本地 WebView
【发布时间】：2020-11-05 20:29:33
【问题描述】：

我想显示一个本地文件 (html+css)，因为我将 NativeScript 与 Vue JS 一起使用

我的代码是：

调用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>

【问题讨论】：

标签： html vue.js webview nativescript

【解决方案1】：

你不必导入 HTML 页面，这个没用。

必须遵循这种方法，official docs

通过导入 webview 组件、可观察对象、使用 args.object 获取视图并进行设置等。

或者，您可以使用像 webview plugin 这样的插件

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

【讨论】：