Electronjs入门

Electronjs 是什么?

Electronjs是由GitHub开发的,通过Electronjs 可以实现用HTML、CSS和Javascript来构建跨平台桌面应用程序的一个开源库。Electron通过将Chromium和Node.js合并到同一个运行环境中,并将其打包为Mac、Windows和Linux系统下的应用来实现这一目的。

Electronjs官网:http://www.electronjs.org/

特点:

1、上手简单,只要会前端的知识就可以做桌面应用

2、跨平台,通过Electron构建的桌面应用程序可以在Mac、Linux、Windows系统环境下运行

3、支持热更新

开发环境:

1、对于Windows系统,只需要支持win7以上即可

2、需要安装Node.js,并且在 v10版本以上

Electronjs 之 HelloWord

Electronjs 给我们创建一个简单的HelloWord项目,我们只需要将其下载到本地,然后运行即可,详细参见以下步骤:

1、首先通过 git 命令去将远程仓库中的代码下载到本地

git clone https://github.com/electron/electron-quick-start 

2、下载完成以后,进入到electron-quick-start项目的根目录下

cd electron-quick-start 

3、然后安装项目所需的依赖

npm install 

4、安装完成以后,运行该项目

npm start 

效果图如下

Electronjs 之 针对 Electron 的NPM淘宝镜像

npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/

Electronjs 之 进程调试

进程介绍

Electron 分为渲染进程主进程

渲染进程

渲染进程指的是用户可以看到的web界面就是由渲染进程描绘出来的,这其中包括HTML、CSS、JS

主进程

Electron运行package.json的main.js脚本的进程被称之为主进程,在主进程中运行的脚本可以通过创建Web页面来展示用户界面。一个Electron应用总是有且只有一个主进程。

渲染进程调试

1、首先需要通过npm start 命令将Electron项目运行起来

2、然后点击顶部菜单栏中的View>>Toggle Developer Tools以打开调试工具(该调试工具其实就是Chrome浏览器的调试工具)

主进程调试

方式一:

通过–inspect=自定义端口号 + Chrome浏览器的方式来进行调试

1、首先打开项目根目录下的package.json文件,然后在 scripts 对象中的 start 属性值后面添加 –inspect=8118 命令,表示通过8118端口调试主进程,如下所示

   "scripts": {
    "start": "electron --inspect=8118 ."
  }, 

2、然后打开Chrome浏览器,输入: chrome://inspect/#devices 然后点击Configure,然后输入 localhost:8118 然后点击Done

3、配置完成以后,通过 npm start 运行Electron项目

4、然后打开Chrome浏览器,查看是否连接成功,如若出现如下所示即表示连接成功

剩余70%内容付费后可查看
如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注