如何用windows自带的东西创建网站 (用网站制作应用程序)

将网址封装成一个独立的Windows应用程序(*ex.e**文件)可以使用一些工具和技术来实现。这样的程序也被称为Webview应用,它在一个独立的窗口中加载并显示Web内容。下面是一个使用Electron框架的简单方法来创建一个这样的应用。

  1. 安装Node.js:首先,您需要在计算机上安装Node.js,它是一个JavaScript运行时。请访问https://nodejs.org/ *载下**并安装适合您的操作系统的版本。
  2. 安装Electron:打开命令提示符或终端,运行以下命令以全局安装Electron:
Copy codenpm install -g electron

  1. 创建项目文件夹:创建一个新的文件夹作为您的项目,例如“webview-app”。在此文件夹中,创建两个文件:index.html 和 main.js。
  2. 编写index.html:在index.html中添加以下代码,它将用于显示网页内容:
htmlCopy code<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>WebView App</title>
  </head>
  <body>
    <webview id="webview" src="https://example.com" style="width:100vw; height:100vh;"></webview>
  </body>
</html>

将 https://example.com 替换为您要封装的网址。

  1. 编写main.js:在main.js中添加以下代码,它将负责创建应用程序窗口并加载index.html:
javascriptCopy codeconst { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

  1. 运行应用程序:在命令提示符或终端中,导航到项目文件夹并运行以下命令:
Copy codeelectron .

这将启动应用程序,并在窗口中显示指定的网址。

  1. 打包应用程序:为了将应用程序打包成一个*ex.e**文件,我们可以使用electron-builder。首先,安装electron-builder:
cssCopy codenpm install electron-builder --save-dev

接下来,在项目文件夹中创建一个名为package.json的文件,其中包含以下内容:

jsonCopy code{
  "name": "webview-app",
  "version": "1.0.0",
  "description": "A WebView application",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "author": "Your Name",
  "license": "MIT",
  "devDependencies": {
    "electron": "^"13.6.2",
		"electron-builder": "^22.14.5"
	}
}

请确保根据您的实际安装版本替换 "electron" 和 "electron-builder" 的版本号。您可以通过运行以下命令查看已安装的版本:

electron -v

electron-builder -v

现在,您可以使用以下命令构建应用程序:

npm run build

构建完成后,您可以在项目文件夹中找到 "dist" 文件夹,该文件夹包含生成的*ex.e**安装程序。

请注意,打*过包**程可能需要根据您的需求进行定制。您可以查看electron-builder的官方文档(https://www.electron.build/)以获取更多详细信息和选项。

至此,您已成功将网址封装成一个Windows应用程序,并将其打包为*ex.e**安装程序。