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

·  阅读 269
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,结果如图所示:

image.png

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

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

image.png

OK,干!!!

安装:npm install electron

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

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

image.png

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

image.png

哦吼,就打开了???这么神奇吗???直接打开一个窗口,里面显示的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 .

运行以上代码结果如下:

image.png

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

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

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

image.png

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

image.png

安装完毕后,在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 第一次打包会下载生成后的系统文件依赖,还是会很慢...就很绝绝子

image.png

image.png

终于,打包完毕了

image.png

看看打包后的OutApp文件夹

image.png

这个是打包后的一个exe程序,点击测试安装包.exe...

image.png

哭了有木有...不容易不容易...

image.png

但是通常要交付给用户的安装包只有一个exe文件或者msi文件,双击解压安装即食,所以还得继续努力,下载编辑压缩软件:Inno Setup 图标长这样

image.png

为了便于诸君采食,已上传百度云,下载地址:pan.baidu.com/s/18S6AGC2m… 提取码: yf2x

安装完毕,打开界面长这样

image.png

然后...

选择用「脚本向导」创建新的脚本文件(S)

image.png

点击下一步

image.png

填写制作后程序的基本信息

image.png

设置应用程序文件夹信息,建议保持默认

image.png

浏览选择主exe执行文件

image.png

选择主执行程序,(可执行的EXE文件)

image.png

添加程序附属的其它文件(主exe程序调用的其它文件)

image.png

选择程序文件所在的主目录

image.png

弹出是否包含子文件夹,选择【是】

image.png

确认主exe执行文件和附属文件路径,无误点击下一步,设置其它信息或保持默认

image.png

设置应用程序安装时的许可信息、提示信息,可留空

image.png

选择程序安装模式,默认选择管理员

image.png

选择程序安装时可选的语言,默认选择中文

image.png

选择封装好的exe安装程序的保存位置、exe文件名、exe程序图标及密码

image.png

出现提示点击【下一步】

image.png

完成提示

image.png

是否编译脚本?点击【是】

image.png

保存脚本文档,以便于下次编译(可存可不存)

image.png

封装完成,找到封装好的程序,双击即可按照步骤进行安装,啦啦啦啦啦啦啦,开森!!!

以上就是笔者与Electron小妖精的邂逅全过程,刺激,惊险,有趣,完成后又有一种事后烟的满足感,在此郑重感谢前任探路者,感恩,汇报完毕,瑞思拜~~~

分类:
前端
标签: