electron入门

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

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.

    <br>
    <button id="hiBtn">hi</button>
    <script>
        document.getElementById('hiBtn')
        .onclick = function(){
            alert('hi')
        }
    </script>
  </body>
</html>

// 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 运行

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```

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

解压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-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解压到第三步的目录下，根据错误提示的版本在对于的包下面新建对于的版本，并把文件移动到目录下，便可正常打包，如图：

最后编辑于：2019.08.14 13:55:32