2019/9/16,Electron

菜鸟小笔记7

2019年9月16日周一 15:14 重庆
以下内容来自自己在使用Electron时步骤过程
所遇问题时的解决办法来自CSDN其他大神所记笔记，如有冒犯，接受私信~
部分内容注明原作者如若未注明部分可私信我删除或更改

题外话

看了《亲爱的，热爱的》，十分在意佟年如何写出的测手速软件，网上搜了搜，发现有位大神看了《亲爱的，热爱的》后自己写了个测手速的，其中需要HTML+JS+CSS及Electron，纯以为Electron是一种语言，便自学了下，发现它就是打包软件，主要还是JS。不过还是把过程记录下来下~

一、使用electron主要有以下几个主要步骤：

（1-3为使用Electron所需的配置仅第一次使用时，4-6为平时使用时，7可不看）
1.下载并安装node.js
安装node.js.直接进入官网https://nodejs.org/en/，下载最新版本安装即可。
目前我的安装地址：D:\study\Electron\nodejs

2.检查node.js和npm是否安装成功
①在Windows环境下，请打开命令窗口（win+R输入cmd）然后输入node -v，如果安装正常，会输出版本号。
②安装npm，npm是node.js的包管理工具（package manager）npm在node.js安装时顺带安装好了，只需要在命令窗口输入npm -v，安装成功的话会输出版本号。
③配置变量
系统属性 - 高级 - 环境变量 – Path – 编辑 - 新建 - D:\study\Electron\nodejs
即 nodejs的安装地址添加上
④安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
（npm和cnpm的转换：https://www.cnblogs.com/Lehh/p/9652314.html）
⑤测试cnpm即cnpm –v

3.全局安装electron
①在win+R输入cmd 后直接cnpm https://npm.taobao.org/mirrors/electron
②npm install electron-packager -g

4.接下来就是项目
①打开文件夹；
②在上面的路径显示框中输入CMD，然后回车，即可在当前文件夹下打开命令提示符，并且路径是当前文件夹。
③输入
git clone https://github.com/electron/electron-quick-start.git electron-demo --depth 1
回车等到down
Ps上方代码中electron-demo为文件名
现在你的项目里有写好的index.html和main.js文件

5、在你项目下本地安装electron
①cnpm install electron-prebuilt --save-dev
②本地安装打包工具
cnpm install electron-packager --save-dev

6、直接运行命令electron
D:\study\Electron\electron1>electron
则会弹出Electron软件

7、不用4③的步骤创建文件夹（即不使用Git），则要初始化(cd到你的项目下),执行npm init
D:\study\Electron\electron1>npm init
一直回车即可
现在在你的项目文件夹app下就可以看到 package.json 文件；

作者：good_moring_
来源：CSDN
原文：https://blog.csdn.net/good_moring_/article/details/77676509

二、不同创建方法

1、
①git clone https://github.com/electron/electron-quick-start.git electron2 --depth 1
②npm install
若出错则
1>electron环境变量
2>https://npm.taobao.org/mirrors下方就是需要的变量名和变量值

3>系统属性 - 高级 - 环境变量 - 第一个新建
变量名：ELECTRON_MIRROR
变量值：http://npm.taobao.org/mirrors/electron/

③npm run start（则会弹出下方画面）

④下载API的demo
1>https://electronjs.org/
2>“探索Electron的API”下的“从Github下载”找到“electron-api-demos-windows.zip”
3>解压 - ElectronAPIDemos.exe - （仍要运行） - Get Started

⑤通过Electron运行音乐播放器
1>https://github.com/zce/music-player
2>Download
3>解压后直接拖至D:\study\Electron\Electron API Demos-win32-ia32
在D:\study\Electron\Electron API Demos-win32-ia32中cmd
npm install
npm run serve 之后就已经有了web服务
[ 双击D:\study\Electron\Electron API Demos-win32-ia32\music-player-vue\client里的index.html （？）]
npm init (其中有一个entry point 可以自己修改 也可以不修改，这里没修改)
4>新建D:\study\Electron\my-player，index.js
5>将D:\study\Electron\electron2中main.js文件中的复制到index.js里
把music-player-vue\client里 assets文件 libs文件 app.js index.html复制到my-player里
6>D:\study\Electron\my-player>npm install electron-prebuilt --save-dev
7>D:\study\Electron\my-player>"./node_modules/.bin/electron" ./index.js
这时候package.json中 “scripts”: {
“test”: “echo “Error: no test specified” && exit 1”
},
可改为
“scripts”:{
“start”:”electron .”
},
然后D:\study\Electron\my-player>npm run test 则也要启动
8>如果打开electron后要刷新 则ctrl+R

PS：就是有应用程序可以直接拿来用，前提是这个应用程序是可以单独运行的

⑥如何打包成exe
1>D:\study\Electron\my-player\node_modules\electron-prebuilt\dist 里面所有的内容就是运行electron所需要的文件
即copy dist这个目录至D:\study\Electron
2>复制 my-player里的文件 但其中的node_modules不需要copy了（node_modules这个文件生产阶段是不需要的，只是开发阶段）
到D:\study\Electron\dist\resources\app （app是新建的）
3>回到D:\study\Electron\dist中占点electron.exe时
【发给别人时可直接发 dist这个文件 】？

PS：注意是复制my-player文件里的内容 不是复制music-player-vue里的
如果复制错误 可能会提示找不到模块

三、相关知识

1、package.json中
①“scripts”:{
“start”:”electron .”
},
其中”.”表示当前目录
②”devDependencies”{
“electron-perbuilt”:”^1.2.0”
}
为依赖包

2、main.js
① electron一开始会通过node执行当前main.js文件
② electron这个模块是electron这个平台内置的，提供了所有的API
③ app这个模块是用来控制整个应用程序
④ BrowserWindow 浏览器窗口的类型，可用来创建一个浏览器窗口
例：在createWindow ()中再创建
let newWindow = new BrowserWinow({width:1000,height:800})
再npm run start
界面上会有两个窗口弹出。

⑤ on 注册事件，当应用准备完成触发

⑥ mainWindow.loadFile(‘index.html’) 可改为
mainWindow.loadURL(‘file://’+__dirname+’/index.html’) 最好这个
其它mainWindow.loadURL(‘https://github.com’)等等

3、Mac环境变量
.bash_profile文件中加上（若没有这个文件自己加上）
export ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

4、Windows - Create and manage windows -
① Create a frameless window 即创建一个没有窗体边框的窗口(没有最大化。。的按钮)
Renderer Process
解释：
electron -
main process （主进程：让程序跑起来，main.js就是在主进程执行） -
renderer process（渲染进程，index.html中外代码就是渲染进程中执行）
即创建时注意是 main process 还是 rederer process

5、NATIVE USER INTERFACE -
① Open external links or system file manager
例：应用中有些链接，默认在应用程序显示，若想在浏览器显示链接内容则可使用

② Put your app in the tray 在任务栏中添加一个小图标
6、COMMUNICATION -
应用之间通讯
Asynchronous messages（让主进程与渲染进程相互调用 ）

7、SYSTEM -
获取文件根目录，剪贴等

8、官网的Guides、API Reference 、Advanced
把页面直接放在主进里面跑，而不是写一个web服务
设计结构、通过CSS+HTML等方式实现功能

ES6新特性：
let定义一个可变的量，const定义一个不可变的量