乐趣区

Electron实现音乐播放器-1

编写简单的页面

初始化项目文件夹

创建一个文件夹,进入这个文件夹并通过如下命令初始化项目

npm init

  • package name:项目名称,可自设
  • version:版本号,可自设
  • description:描述,可不填
  • entry point:入口文件,这里我们填main.js
  • test command:可不填
  • git repository:git 仓库,可不填
  • keywords:关键词,可不填
  • author:作者,可自设
  • license:开源协议,可不填

输入 yes 完成初始化,随后会自动生成 package.json 文件在文件夹内,这是我们项目的描述文件

编写简单的 main.js 文件

main.js是我们项目的入口文件(主文件),而项目启动时运行 main.js 的进程就是主进程,创建窗口、对渲染进程进行调度等等一系列操作都要依靠 main.js 来实现

在文件夹内创建 main.js 文件并编辑它:

const electron = require('electron')// 引入 electron 模块
const {app,BrowserWindows} = electron// 从 electron 中引入我们需要的模块

let mainWindow;// 声明一个变量,作为主窗口
app.on('ready',function(){// 当 app 准备好时执行
    mainWindow = new BrowserWindow({// 将 mainWindow 定义为一个新的浏览器窗口
        // 这一部分先空着,后面会向窗口添加参数
    })
})

第一、二行引入了我们所需要的模块,然后我们声明了一个 mainWindow 变量,并在 app 准备好时将 mainWindow 定义为一个 BrowserWindow 对象,也就是一个浏览器窗口

运行和安装依赖

我们可以通过如下命令来安装 electron 模块:

cnpm install electron --save-dev

接着我们可以通过如下命令来运行我们的项目:

electron .

注意 electron.之间有一个空格!

效果图:

我们会发现只是弹出了一个窗口,里面并没有什么内容,这是因为我们并没有指定它需要加载的内容

Hello,World!

我们可以通过 loadURL 函数来让我们的应用程序窗口来通过链接加载一个网页

const electron = require('electron')// 引入 electron 模块
const {app,BrowserWindow} = electron// 从 electron 中引入我们需要的模块

let mainWindow;// 声明一个变量,作为主窗口
app.on('ready',function(){// 当 app 准备好时执行
    mainWindow = new BrowserWindow({// 将 mainWindow 定义为一个新的浏览器窗口
        // 这一部分先空着,后面会向窗口添加参数
    })
    mainWindow.loadURL("https://www.baidu.com");
})

效果图:

但是很显然,我们不能只满足于加载现成的网页,我们可以通过加载 HTML 文件来达到自定义页面的目的

创建一个 HTML 文件,编写一个简单的例子:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello,World!</h1>
</body>
</html>

文件夹结构:

通过 loadFile 函数来加载 HTML 文件:

const electron = require('electron')// 引入 electron 模块
const {app,BrowserWindow} = electron// 从 electron 中引入我们需要的模块

let mainWindow;// 声明一个变量,作为主窗口
app.on('ready',function(){// 当 app 准备好时执行
    mainWindow = new BrowserWindow({// 将 mainWindow 定义为一个新的浏览器窗口
        // 这一部分先空着,后面会向窗口添加参数
    })
    mainWindow.loadFile("index.html");
})

效果图:

退出移动版