使用electron-forge和cnpm命令来写一个简单的electron桌面应用

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当中。