Electron把网页打包成桌面应用并进行源码加密

本文介绍了如何使用Electron将基于HTML、CSS和JS的网页打包成跨平台桌面应用,并详细阐述了打包过程及如何利用Electron的asar工具对源码进行加密,确保应用的安全性。
摘要由CSDN通过智能技术生成

前言

  最近想把自己用html+css+js做的网页界面打包成桌面应用,网上一搜,发现Electron是一个不错的选择,试了试,发现效果真的不错。这里记录一下打包过程以作记录,便于自己以后查看学习。

 

一、简介

  Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。

 

二、打包过程

1.首先保证自己计算机全局安装了nodejs,并且利用nodejs自带的npm全局安装了electron和打包神器electron-packager。两个命令:(npm install electron -g),(npm install electron-packager -g)。注意:npm速度较慢,可以尝试用cnpm,下载安装速度快。

2.在自己的前端网页项目文件夹下,新建 package.json、main.js、index.html 三个文件(注:其中的 index.html 是你的网页首页,就是自己已经写好的网页界面)。

3.在 package.json 中添加如下内容:(name属性值可以自定义,Version属性值也可以自定义,main属性值是根据新建的main.js文件名来的)

{
  "name"    : "app-name",
  "version" : "0.1.0",
  "main"    : "main.js"
}

4.在main.js中插入如下代码:

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
 
//
使用 Electron 可以将网页打包桌面应用程序,以下是详细步骤: 1. 安装 Node.js 和 npm 在使用 Electron 之前,需要先安装 Node.js 和 npm。可以在 [Node.js 官网](https://nodejs.org/) 下载安装程序并进行安装。 2. 初始化项目 可以使用 npm 初始化项目,创建一个 package.json 文件: ``` mkdir my-electron-app cd my-electron-app npm init -y ``` 3. 安装 Electron 使用 npm 安装 Electron: ``` npm install --save-dev electron ``` 4. 创建应用程序 在项目文件夹中创建一个 main.js 文件,用于创建应用程序窗口: ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载网页 win.loadFile('index.html') } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` 5. 创建网页 在项目文件夹中创建一个 index.html 文件,用于显示在应用程序窗口中的网页。 6. 运行应用程序 在终端中运行以下命令启动应用程序: ``` npm start ``` 这将启动 Electron 并打开应用程序窗口,其中包含 index.html 文件中的内容。 7. 打包应用程序 可以使用 Electron Packager 或 Electron Forge 等工具将应用程序打包可执行文件。例如,使用 Electron Packager: ``` npm install electron-packager --save-dev ``` 在 package.json 文件中添加以下脚本: ```json "scripts": { "package-mac": "electron-packager . MyAppName --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds", "package-win": "electron-packager . MyAppName --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"My App Name\"", "package-linux": "electron-packager . MyAppName --overwrite --platform=linux --arch=x64 --icon=assets/icons/png/icon.png --prune=true --out=release-builds" } ``` 然后运行以下命令,根据需要替换 MyAppName: - Mac: `npm run package-mac` - Windows: `npm run package-win` - Linux: `npm run package-linux` 此时,会在 release-builds 目录中生可执行文件。 以上是将网页打包应用程序的详细步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值