一名UI设计师的Electron学习之路(一)

对Electron的接触也有一段时间了,大概是3个月,但仅仅是只是接触,并没有完全地深入学习,在网上找到的Electron教程少之又少,满地的HelloWorld看得心力交瘁,作为一名设计师,因为只懂前端的一些皮毛,对于逻辑层和底层业务开发完全是小白中的小白,在这里记录我的学习历程,分享一些学习经验,有像我一样从0开始学习编程的,可以相互学习。

学习electron,环境搭建这里就不详细赘述了,网上搜索electron一大把,所以简单讲述一下就好了,开发环境win10,开发工具VScode。

① 环境 & 开发工具

安装运行环境 【NodeJS】下载地址:https://nodejs.org/en/
安装开发工具【VScode】下载地址:https://code.visualstudio.com/

② 镜像工具安装

打开控制台【cmd】安装npm的淘宝镜像cnpm(可以翻墙的就不用安装了)

npm install -g cnpm --registry=https://registry.npm.taobao.org

③ electron运行环境安装

安装electron

cnpm install -g electron

④ electron模板下载

下载electron快速搭建模板
https://github.com/electron/e...

⑤ 运行electron模板

解压到英文路径里,例如 D:develectron,打开控制台cmd

cd D:\dev\electron

查询对应的环境和版本,确定都正常即可继续

解压electron-quick-start的文件结构

在控制台输入

npm start 

OK,已经跑起来了,这是万里长征的0.0000001步,完全可以忽略不记。

⑥ VScode的使用

接下来我们去到VScode来观察代码。

后面我们直接在VScode调试即可,菜单栏打开 终端->新建终端,底部出现powershell的控制台窗口,方便命令操作。

⑦ 模板代码了解

有网页设计相关知识的,对入门还是有帮助的,如果不懂HTML,CSS,Javascript,我推荐还是先找一些免费的课程学习一下。假定你跟我一样,懂一些相关知识,我们继续往下学习和了解。

以上截图的4个标签对应的文件是全村的核心文件,开发electron都是根据这几个进行扩展的。


#package.json
{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^7.1.0"
  }
}

package.json存储的是整个app的基本信息,就跟我们的个人介绍是一样的,可以细读一下,了解都包含些什么信息。






  
    
    Hello World!
  
  
    

Hello World!

We are using Node.js , Chromium , and Electron .

index.html和renderer.js是渲染层,也就是我们能看得见的层级,基本的视觉和交互操作都在这里编写。


// main.js

// 引入electron的app和BrowserWindow模块
const {app, BrowserWindow} = require('electron')
// 引入nodejs的path模块,用来处理文件路径
const path = require('path')

// 声明主窗体
let mainWindow
// 创建窗体函数
function createWindow () {
  mainWindow = new BrowserWindow({
  // 窗体属性很多,自己去了解一下https://electronjs.org/docs/api/browser-window#new-browserwindowoptions
    width: 800, // 宽度800
    height: 600, //高度600
    webPreferences: { // 网页功能,如预加载等可以附加进来,没有也没关系,一般在软件优化可以用上
      preload: path.join(__dirname, 'preload.js') // 预加载一些程序,提高运行效率
    }
  })
  // 主窗体载入网页,窗体相当于简化版的chrome浏览器
  mainWindow.loadFile('index.html')
  // closed就是关闭之后,当主窗体关闭之后,执行代码,将窗体置为null
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}
// app是这个应用程序的事件生命周期,每个周期可执行相应代码,如ready了之后要干嘛,activate之后要干嘛
// 这个我们去看electron的文档比较明了,连接https://electronjs.org/docs/api/app
app.on('ready', createWindow) // app触发【准备好】的时候,创建窗体
// app触发【窗体都关闭了】执行app退出命令
app.on('window-all-closed', function () { 
  if (process.platform !== 'darwin') app.quit()
})
// app触发【激活,活动中】的时候,保持主窗体显示
app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

main.js 是主进程,相当于后台控制程序,这部分是electron的核心部分,后期学习的难点也是在这部分。以上都做了注释,可以细看一下。

你可能感兴趣的