electron入门

electron入门_第1张图片

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

使用eletron前需要储备哪些知识

1、首先需要熟练掌握前端的基础知识html,css,js

2、有一定的node基础,知道npm怎么用

下面我们从electron的安装开始,了解下electron。

1. electron 安装

安装前先安装 node.js 与 yarn / npm

mkdir electron-demo
cd electron-demo
yarn init -y
yarn add --dev electron 
npx electron -v

2. 创建项目目录

main.js
index.html

在 package.json中添加script 
"start": "electron ."
修改main
"main": "main.js" 

3. 编写electron的demo




  
    
    Hello World!
  
  
    

Hello World!

We are using node , Chrome , and Electron .
// main.js
const { app, BrowserWindow } = require('electron')

function createWindow () {   
  // 创建浏览器窗口
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载index.html文件
  win.loadFile('index.html')
}

app.on('ready', createWindow)

使用 yarn start 运行

electron入门_第2张图片
image.png

electron入门_第3张图片
image.png

4. 使用electron-bulder打包项目

首先来看看什么是electron-builder:
简单的说,electron-builder就是将已有的electron应用打包成msi格式和exe可执行文件的工具。打包是一个成熟的应用程序一个重要的环节,希望这篇文章可以给大家一些参考,最后会讲到打包时遇到的一些坑,与大家分享。

// 安装electron-bulder依赖
yarn add electron-builder --dev

安装好之后会在package.json中的devDependencies生成代码:

"devDependencies": {
  "electron-builder": "^21.2.0"
}

package.json中做如下配置

 "build": {
    "appId": "com.hzlapp.app",
    "mac": {
      "category": "your.app.category.type"
    }
  },
  "scripts": {
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "postinstall": "electron-builder install-app-deps",
    "start": "electron ."
  }

在命令行中输入````yarn dist```

electron入门_第4张图片

打包后在dist目录生成如下文件:

electron入门_第5张图片

解压zip包或执行setup安装文件,应用启动后且没有报错,则说明本次打包成功。

特点:
1、electron-builder 可以打包成msi、exe、dmg文件,macOS系统,只能打包dmg文件,window系统才能打包exe,msi文件;
2、几乎支持了所有平台的所有格式;
3、支持Auto Update;
4、支持CLI和JS API两种使用方式;

electron-builder打包流程遇到的坑

在第一次输入yarn dist

electron入门_第6张图片

electron-builder有一些依赖包如 【winCodeSign】、【nsis】;在没墙的情况下,直接执行命令就会自动处理相关依赖,但天朝基本不行,所以会出现包安装超时等的一些情况,就算开了vpn也下载很慢,解决方法如下:

1.第一步:打开链接: https://github.com/electron-userland/electron-builder-binaries/releases 下载 winCodeSign 和 Source code

2.第二步:选择 winCodeSign-2.5.0.7z 和 Source code(zip)下载并解压,source code里面已经包含nsis

3.第三步:在%LOCALAPPDATA%(C:\Users\Administrator\AppData\Local)目录下新建electron-builder\cache\

4.第四步:将 winCodeSign-2.5.0.7z 中的文件 与 Source code(zip)中的nsis解压到第三步的目录下,根据错误提示的版本在对于的包下面新建对于的版本,并把文件移动到目录下,便可正常打包,如图:

electron入门_第7张图片
electron入门_第8张图片

你可能感兴趣的