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

字号+ 编辑: 呆头鹅甲 修订: 呆头鹅甲 来源: 原创 2018-04-28 23:11:13 我要说两句(2)

本文简述如何建立一个pc桌面应用的Windows程序demo

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


阅完此文,您的感想如何?
  • 鼓掌

    4

  • 鄙视

    2

  • 开心

    4

  • 愤怒

    2

  • 可怜

    3

1.如文章侵犯了您的版权,请发邮件通知本站,该文章将在24小时内删除;
2.本站标注原创的文章,转发时烦请注明来源;
3.本站QQ群: 2702237

相关课文
  • ueditor在使用严格模式时报错Uncaught TypeError: 'caller', 'callee', and 'arguments'

  • UEditor百度编辑器中各种html标签被过滤掉的解决办法

  • JS的Timeout定时器怎么写成无限循环的?

我要说说
网上宾友点评
IP121.69.77.*的嘉宾 说道: 反正还行吧,,,,我在尝试cordova的
IP106.50.192.*的嘉宾 说道: nw.js了解一下。
使用electron-forge和cnpm命令来写一个简单的electron桌面应用