Question

如何在本机脚本中将文件加载到webview中

2016-10-12

2885

html local nativescript

我一直在尝试找出一种方法来加载本地网页内容，并在本机脚本中设置 webview html 内容。我已经成功地让它在模拟器上运行，但它似乎无法在设备上运行。我在 google 上搜索过，大多数人都说我需要将我的 html 文件放在应用程序的“Documents”目录中，但据我所知，在部署应用程序时无法在那里获取我需要的文件。有没有人能解释一下在部署时获取位于应用程序文档文件夹中的文件或在运行时将它们复制到那里的方法。谢谢

var createViewModel   = require("./main-view-model").createViewModel;
var orientationModule = require("nativescript-screen-orientation");
var fs = require("file-system");

var webViewInterfaceModule = require('nativescript-webview-interface');
var oWebViewInterface;
var page; 

function pageLoaded(){
    setupWebViewInterface(page);
    // orientationModule.setCurrentOrientation("landscape", function(){     
    //     //console.log("landscape orientation set");
    // });
}

// Initializes plugin with a webView 
function setupWebViewInterface(page){
    var webView = page.getViewById('webView');
    var documents = fs.knownFolders;

    oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, documents.currentApp().path + '/htllo/index.html');
}

function navigatingTo(args) {
    page = args.object;
    page.bindingContext = createViewModel();
}

exports.pageLoad     = pageLoaded;
exports.navigatingTo = navigatingTo;

Answer 1

下面是一个如何从本地文件添加 WebView src 的示例。示例中展示了使用 nativescript-webview-interface 插件和不使用 nativescript-webview-interface 插件的两种情况。 ~/ 返回 app 文件夹的路径。

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" loaded="onLoaded">
  <GridLayout rows="150 *" columns="*">
      <WebView row="0" col="0" id="WebViewId"/>
      <WebView row="1" col="0" id="WebViewId2"/>
  </GridLayout>
</Page>

main-page.ts

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
var webViewInterfaceModule = require("nativescript-webview-interface");
import {WebView} from "ui/web-view";

var oWebViewInterface;
export function onLoaded(args: EventData) {
  let page = <Page>args.object;
  var webView:WebView = <WebView>page.getViewById('WebViewId');
  oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/index.html');
  var SecondWebView:WebView = <WebView>page.getViewById('WebViewId2');
  SecondWebView.src="~/secondpage.html"
  page.bindingContext = new HelloWorldModel();
}