Electron一句话简介
Electron允许web程序员用Javascript、HTML、CSS来编写运行于Windows、macOS、Linux跨平台的桌面应用。
环境安装
安装Node.js
到node.js下载最新稳定版本。
安装cnpm
大国程序员需要一个cnpm代替npm。在windows里开始->运行->cmd打开黑窗口, 输入
npm install -g cnpm --registry=https://registry.npm.taobao.org
注意, cmd的位置是在c:\windows\system32下, 如果需要管理员权限来运行的话, 你先要进到这个目录里面找到这个程序, 右键点击它, 再在菜单当中找到以管理员运行此程序来执行, 有助于你解决一些运行时的问题。
安装Electron
cnpm install -g electron
安装Electron-forge
Electron-forge到底是个什么东西呢? 类似于c++的MinGW, 或者像PHP的某些lib, 或者像是Composer, 让程序员通过简单的命令傻瓜式安装/引入复杂的依赖库。
cnpm install -g electron-forge
新建项目
假设项目要放到d:\env\electron目录下，项目名为notepad（字母全部小写，多个单词之间可以用“-”连接）。
打开cmd黑窗口，用cd命令切换到d:\env\electron。
在我的电脑目录下按住Shift+鼠标右键也可以打开cmd(power shell)窗口
执行下面的命令来生成名为notepad的项目文件夹，同时安装项目所需要的模块、依赖项等。
electron-forge init notepad
cd切到notepad目录下，
electron-forge start
或者
npm start
打开的界面会像chrome打开开发者工具一样的效果。
修改窗口图标
一般主窗体js文件都被命名为main.js或者Index.js, 在文件里找到类似如下代码:
const createWindow = () => {
// 创建浏览器窗口。
mainWindow = new BrowserWindow({
width: 1366,
height: 768
});加一段icon路径代码, 改成如下:
const createWindow = () => {
// 创建浏览器窗口。
mainWindow = new BrowserWindow({
width: 1366,
height: 768,
icon: __dirname + '/favicon.ico'
});编译打包
键入以下命令进行编译打包：
npm run make
如果直接运行这个命令会将文件打包到当前项目目录下的out文件夹下。web源码直接暴露在[app项目目录]\out\notepad-win32-x64\resources\app\src目录下。
修改package.json，在electronPackagerConfig部分加入"asar": true。
"electronPackagerConfig": {
// ...
"asar": true
}源码文件会被打包进src/app.asar当中。
2 樓 IP 106.50.***.27 的嘉賓 说道 : 很久前