原生 js html 开发成桌面应用以及打包_将index.html打包成桌面应用

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

俊逸的黄花菜 · 广州市地方金融管理局网站 - ...· 1 月前 ·

很酷的生菜 · 【奋进“双一流” ...· 4 月前 ·

没有腹肌的麦片 · 战争状态_百度百科· 11 月前 ·

豪气的马克杯 · StateMachine 的简单使用 - 简书· 1 年前 ·

傲视众生的芹菜 · 网文，甜宠文，文荒推-哔哩哔哩_Bilibili· 2 年前 ·

官网地址
主要目录结构

	index.html               ---->    页面文件 你要展示的东西
	main.js                    ---->    入口文件 不指定为 main.js。默认为index.js
	packeage.json.       ----->   配置文件
一、添加配置文件
 
提示：如果下载包 很慢 就来这里： 点一下 
先初始化 npm init
安装依赖包 npm install electron --save-dev 或者 yarn add electron --dev
新建 main.js 文件
新建 index.html 文件
在 index.html 中添加你自己想展现的东西 
二、配置文件
 
1.配置 main.js 文件
 
 代码如下（示例）： 
const { app, BrowserWindow } = require('electron')
//  app 控制应用程序的事件生命周期
//  BrowserWindow 用于创建和管理应用程序
// createWindow()函数将你的网页加载到一个新的BrowserWindow实例中:
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
    // 宽度 高度
  win.loadFile('index.html')
  // 展示文件
// 返回 Promise<void> - 当Electron 初始化完成。 可用作检查 app.isReady() 的方便选择，假如应用程序尚未就绪，则订阅ready事件。
app.whenReady().then(() => {
  createWindow()
2. 配置package.json 文件 添加脚本命令
 
代码如下（示例）： 
只在 scripts 中添加了运行脚本命令: “start”: “electron .” 
  "name": "test-electron",
  "version": "1.0.0",
  "description": "生成一个桌面应用",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  "author": "caomou",
  "license": "ISC",
  "devDependencies": {
    "electron": "^21.1.0"
然后运行 运行刚添加的 脚本命令 (相信你们都会) 
app 监听 window-all-closed 事件, window 系统 和 linux 系统关闭 应用但是并不适用 macOS 系统 
app.on('window-all-closed', () => {
  // process.platform 属性 分别代表值
  // win32    window
  // linux    linux
  // darwin   macOS
  if (process.platform !== 'darwin') app.quit()
macOS 打开多个窗口
 
与前二者相比，即使没有打开任何窗口，macOS 应用通常也会继续运行。 在没有窗口可用时调用 app 会打开一个新窗口 
为了实现这一特性，可以监听模组的 activate 事件，如果没有任何活动的 BrowserWindow，调用 createWindow() 方法新建一个。 
因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。 要实现这个，仅监听 whenReady() 回调即可。 
app.whenReady().then(() => {
  createWindow()
  // 相比之下，即使没有打开任何窗口，macOS应用程序通常也会继续运行。激活应用程序时，没有可用的窗口应该打开一个新的。
  // 要实现这个特性，需要监听app模块的activate事件，如果没有打开BrowserWindows，则调用现有的createWindow()方法。
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
打开调试工具
 
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  win.webContents.openDevTools(); //开启调试工具
  win.loadFile('index.html')
打包成桌面应用
 
 yarn add --dev @electron-forge/cli
 npx electron-forge import 
第一步安装依赖,第二步转换脚本
 你的脚本命令行就会变成这样 
  //...
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  //...
最后执行打包命令 
 yarn run make 
使用Electron开发客户端程序已经有一段时间了，整体感觉还是非常不错的，其中也遇到了一些坑点，本文是从【运行原理】到【实际应用】对Electron进行一次系统性的总结。【多图，长文预警～】
本文所有实例代码均在我的github electron-react上，结合代码阅读文章效果更佳。另外electron-react还可作为使用Electron + React + Mobx + Webp...
				不得不说JavaScript实在太强大，连电脑桌面应用都能开发出来，下方这个框架叫Electron。
在VS Code新建一个文件夹，然后在文件夹下方再新建一个文件夹，右键文件夹，打开终端，运行以下命令：
# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
$ cd electron-...
					基于CocosCreator开发的HTML5游戏快速打包为跨平台桌面应用的一站式解决方案_支持Windows和MacOS系统_无需原生开发经验_使用Electron框架封装_自动处.zip
git clone https://github.com/electron/electron-quick-start
# 进入这个仓
cd electron-quick-start
npm install && npm...

一、添加配置文件

二、配置文件

1.配置 main.js 文件

2. 配置package.json 文件 添加脚本命令

macOS 打开多个窗口

打开调试工具

打包成桌面应用

2. 配置package.json 文件添加脚本命令