创建第一个electron项目

旧城等待， 2022-06-05 12:20 369阅读 0赞

## 必要文件 ##

package.json  
main.js  
页面文件

## package ##

package文件中主要放的是项目的配置（可以使用命令npm init）创建

## main ##

// 引入electron模块
    var electron = require('electron');
    
    // 用来控制应用的生命周期
    var app = electron.app;
    
    // 用来创建浏览器窗口
    var BrowserWindow = electron.BrowserWindow;
    // 创建一个全局变量，名字随便取，相当于普通网页中的 window 对象
    var mainWindow;
    // 当软件触发 ready 事件之后，创建浏览器窗口
    app.on('ready', function() { 
        // 创建浏览器窗口。
        mainWindow = new BrowserWindow({
            width:400,
            height: 200,
        });
        // 加载 example 目录下的index.html，就是刚才我们新建的那个 mainWindow.loadURL('file://'+__dirname+'/start.html');
    });

再放一个老板本使用的方法

## 启动页面 ##

因为上面指定了index.html  
那么创建一个index.html文件

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
      </head>
      <body>
        <h1>Hello World!</h1>
        We are using node <script>document.write(process.versions.node)</script>,
        Chrome <script>document.write(process.versions.chrome)</script>,
        and Electron <script>document.write(process.versions.electron)</script>.
      </body>
    </html>

## 启动应用 ##

安装electron模块到全局

npm install electron -g

在package.json中添加  
`"scripts": {"start": "electron ."}`  
package.json文件如下

使用命令安装`npm install`  
使用命令运行`npm start`

## 打包 ##

使用命令  
`npm install --save-dev electron-packager`  
electron-packager安装打包需要的模块  
安装完成之后可以看到package.json文件中多了几行

{
      "name": "dianchaji",
      "version": "1.0.0",
      "description": "fangfang",
      "main": "main.js",
      "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "electron ." },
      "author": "chenyidong",
      "license": "ISC",
      "devDependencies": { "electron-packager": "^10.1.0" } }

--------------------

然后我们就进行打包程序

首先在项目根目录下面的 package.json 里添加代码，

"packager": "electron-packager ../dapaidang dapaidang --platform=win32 --out app --arch x64 --version 1.0.0 --electron-version 1.7.9 --overwrite"

格式如下

electron-packager <location of project> <name of project> <platform> --out <输出目录> <architecture> <应用版本> <electron-version>

命令说明：  
\* location of project：项目所在路径  
\* name of project：打包的项目名字  
\* platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）  
\* architecture：决定了使用 x86 还是 x64 还是两个架构都用  
\* electron version：electron 的版本  
\* optional options：可选选项  
然后使用命令

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ npm run packager

windows使用

npm set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

然后再运行编译