First Blood —— 随心漫笔 —— 与Electron的第一次邂逅-一一网

2021年06月30日，牛年刚过一半，在这给各位同仁以及自己道一声辛苦！！！见面道辛苦,必定是江湖,散落江湖内,便是薄命人，一如前端深似海，自挂东南枝…

忆往昔，峥嵘岁月，遥想当年:2014，那会儿的西安，房价半死不活，肉夹馍也不到五米，那一年的上海滩出现了一个明眸皓齿仪表堂堂的翩翩美少年，因一时头脑发热，误入前端深坑…从此开始了他光屁股赶狼————胆大不要脸的前端职场生涯。

前端这一行吧，说简单是真的简单，大学期间，旷课旷得老师都不认识，但是就靠着临近毕业，草草看了几本网站编辑与javaScript的书籍，硬是活生生的找到了工作，当年的待遇还挺香，这一切都归功于前端入门简单，但是这一行吧，想要摸透做好，呵呵呵呵呵，有梦想是好事，挺好的。前端更新迭代是真的快，市面招聘基本要求:H5、C3、三大框架、外加各种零零散散的加分项，例如：Canvas、PS，D3，Node等等等等，学无止境，所有的程序员都是最好学的人，我们一直被需求推着走，逼着学…这不：前些日子来了一个需求，前端服务获取Mac地址后，打包Windows安装包如：exe或者msi…笔者拿到这个需求的第一反应是这样的：

src=http___c-ssl.duitang.com_uploads_item_202004_12_20200412053218_kf2Wr.jpg&refer=http___c-ssl.duitang.jpeg

面带微笑，内心一串乱码，半个小时后，收拾心情，怒吼着：勇敢牛牛，不怕困难，然后踏上了征程…

首先，获取电脑Mac地址，嗯，很棒…C#可以，其次，生成exe或者msi安装包，嗯，更棒了，C#可以，就是吧…我不会，裂开…也许是命不该绝…也许是前端女神不忍看我黔驴技穷偷偷朝我撩了一下裙摆，灵光乍现之间，Node这个烦人的小妖精冲入脑海，战歌，起~~~

打开Vscode，新建demo文件夹，随手新增main.js，代码如下：

var os = require('os')

var networkInfoObj = os.networkInterfaces();

console.log(networkInfoObj);
复制代码

终端执行：node main.js，结果如图所示：

哦吼~~~这…拿到了？？？自测一圈后确认了，拿到了！！！（因笔者电脑为Mac，故执行命令得到结果会与Windows系统的小伙伴有所出入，且Windows系统的小伙伴一定一定一定得注意双网卡笔记本的Mac地址获取数据结构，此处不过多赘述）

拿到Mac地址后，开始下一步的填坑，此处需求为用打开软件的方式打开一个固定项目，这…….研究研究，还好！我司与百度有长久并且良好的合作关系，一个硕大的宝贝终于被淘金者于千万砂砾中发现：

OK，干！！！

安装：npm install electron

当然，使用淘宝镜像更快呦 cnpm install electron

安装完毕，npx electron -v查看版本号,当然，使用：./node_modules/.bin/electron -v 也可！

查看完版本号，看一眼electron到底是个神马东西，终端执行命令：./node_modules/.bin/electron

哦吼，就打开了？？？这么神奇吗？？？直接打开一个窗口，里面显示的electron官网风格的页面，nice！！！接下来得继续研究如何用我们的页面替换官网页面了

main.js新增代码

var electron = require('electron')

// 引入electron程序

var mainWindow = null

// 定义窗口对象

var app = electron.app

// 定义electron的主进程

var Menu = electron.Menu

// 定义electron窗口的菜单，笔者的需求不涉及此处，故后续设置为null

var BrowserWindow = electron.BrowserWindow

// 定义创建electron的方法

app.on('ready', () => {

    // 主进程加载完毕

    Menu.setApplicationMenu(null)

    mainWindow = new BrowserWindow({
            width:1280,
            height:1024,
            icon: './logo.ico'
    })

    // 定义窗口初始化属性

    mainWindow.loadURL('https://www.baidu.com?key=' + JSON.stringify(networkInfoObj))

    // 打开其他项目，此处自定义拼接Mac地址对象

    mainWindow.on('closed', () =>{
            mainWindow = null
    })

    // 监听窗口关闭事件，释放内存，节能
})
复制代码

终端执行命令：electron .

运行以上代码结果如下：

打开了，需求实现一半了，开森，尝试打包

项目根目录命令行执行 npm init –yes (默认同意所有选项)

生成package.json，此时package.json自动关联main.js

安装electron-packager打包工具，命令行为：npm install electron-packager –save-dev
因为要下载当前电脑对应的系统安装包，所以会比较慢，且在Mac电脑上无法生成exe程序，所以…换个Windows系统的电脑吧…

安装完毕后，在package.json中新增scripts属性，并加以配置

"scripts": {"package": "electron-packager ./ 测试打包项目 --all --out ./OutApp --electron-version 13.1.4 --overwrite --icon=logo.ico"},
// 执行打包命令为：npm run package
// 打包后的程序名为：测试打包项目
// --all 打包所有类型的项目，例如：Mac系统、Windows系统等等
// --out ./OutApp  生成的项目存放地址为 OutApp 文件夹内
复制代码

尝试打包 npm run package 第一次打包会下载生成后的系统文件依赖，还是会很慢…就很绝绝子