返回

真香警告：不借助mac的软件，也能打包生成网站应用

前端

起因

我的macbook使用时遇到了一个小小的烦恼，有些网站不提供mac的应用版，没有应用版，我又不会制作应用，这让我感觉很不爽，所以动了打包网站为应用的心思。

方法

针对网站打包的需求，使用Electron就是非常好的选择，Electron是允许将网站包装为应用的工具，在windows、mac和linux系统上都能运行，Electron本身还包含了Node.js， 所以也可以在Electron中使用Node.js和一些javascript框架。

步骤

  1. 安装Electron：Electron的安装方式有很多种，但最简单的方式是使用 npm 命令。
  2. 创建一个新的Electron项目：在终端中运行以下命令：
mkdir my-electron-app
cd my-electron-app
npm init -y
npm install electron --save-dev
  1. 创建一个主文件：这是Electron应用程序的主入口文件，负责创建浏览器窗口并管理应用程序的生命周期。在 package.json 文件中，将 "main" 属性设置为 main.js。
  2. 创建一个渲染器进程文件：这是Electron应用程序的用户界面部分，负责显示内容和处理用户交互。在 package.json 文件中，将 "renderer" 属性设置为 index.html。
  3. 在 main.js 文件中，添加以下代码：
const {app, BrowserWindow} = require('electron')

function createWindow () {
  const win = new BrowserWindow({width: 800, height: 600})

  win.loadURL('http://localhost:3000')

  win.webContents.openDevTools()

  win.on('closed', () => {
    app.quit()
  })
}

app.on('ready', createWindow)

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

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
  1. 在 index.html 文件中，添加以下代码：
<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <h1>Hello, Electron!</h1>
  </body>
</html>
  1. 运行Electron应用程序：在终端中运行以下命令：
npm start

总结

按照上述步骤操作后，你就能成功将网站打包成应用了，希望本篇文章能够帮助到你。