如何在nativescript main-page.js的Web视图中包含本地html文件? [英] How to inciude a local html file in a webview in nativescript main-page.js?

问题描述

是否可以在nativescript Webview中添加本地html文件? 如果是，如何使用 javascript ? 当我添加在线页面时，可以在其工作原理的网络视图中添加www.google.com.但是我想添加本地页面，但找不到任何方法.

Is it possible to add a local html file in the nativescript webview ? If yes How can I do it using javascript ? When I add online page it works , I can add www.google.com in the webview it works .But I want to add a local page but I don't find a way to do this .

推荐答案

是的，有可能.您需要考虑到，默认情况下，所有NativeScript应用都是使用 Webpack 构建的，默认的 webpack.config.js 将处理某些文件(例如 fonts 文件夹中的图像，或所有带有* .png和* .. jpg扩展名的图像).该webpack构建将捆绑所有JavaScript文件，并且在Angular风格的情况下，还将在认知上包括与Angular相关的HTML文件.但是，默认的webpack.config.js不会了解"您的自定义HTML文件.

Yes, it's possible. You need to consider that all NativeScript apps are build by default with Webpack and the default webpack.config.js will take care of certain files (like the ones in a fonts folder or like all images with *.png and *..jpg extensions). The webpack build will bundle all JavaScript files and in the case of the Angular flavor will also cognitively include the Angular related HTML files. However, the default webpack.config.js won't "know" about your custom HTML file.

解决方案是让Webpack知道它应该复制特定的HTML文件.这应该通过 webpack.config.js 文件中的 CopyWebpackPlugin 部分完成.

The solution is to let Webpack know that it should copy the specific HTML file. This should be done via the CopyWebpackPlugin section in webpack.config.js file.

示例(假设我们在 app 目录中有一个名为 test.html 的文件)

Example (assuming we have a file called test.html in the app directory)

    new CopyWebpackPlugin([
        { from: { glob: "test.html" } }, // HERE
        { from: { glob: "fonts/**" } },
        { from: { glob: "**/*.jpg" } },
        { from: { glob: "**/*.png" } },
    ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),

有关真实示例，请参见此配置，其中

For real-life example see this config where this HTML file is the one we are targeting.

这篇关于如何在nativescript main-page.js的Web视图中包含本地html文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！