安装并创建 Electron 应用程序

2021-01-18 19:33:10 阅读：252 来源： 互联网

标签：npm package 创建 app electron 应用程序 js Electron

全局安装 electron

npm install electron -g
# 或者
yarn global add electron@latest

配置 Electron 源

启动应用时，需要下载已经构建好的 Electron dist 包，默认会从 Github 上下载，所以国内下载会很慢或根本无法下载，感谢淘宝提供了镜像源，设置后从国内服务器下载，速度很快。

Ubuntu 临时设置环境变量

# export ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/

Windows Powershell 临时设置环境变量

$Env:ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"

创建基本应用程序

mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron

文件结构如下：

my-electron-app/
├── package.json
├── main.js
└── index.html

创建主脚本文件（main.js）

// 文件路径：main.js

const {
    app,
    BrowserWindow,
    Notification
} = require('electron')

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            // 允许开发者调试工具
            devTools: true,
            // 允许 node.js 环境
            nodeIntegration: true,
        },
    })
    // 加载 index.html
    win.loadFile('index.html')
    // 打开开发者调试工具
    win.openDevTools();
}

app.whenReady().then(createWindow).then(showNotification)

app.on('window-all-closed', () => {
    if (process.platform != 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length == 0) {
        createWindow();
    }
})

function showNotification() {
    const notification = {
        title: 'Base Title',
        body: 'Main Content'
    }
    new Notification(notification).show()
}

创建网页

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
    <p>
        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>.
    </p>
</body>
</html>

修改 package.json 文件

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "author": "your name",
    "description": "My Electron app",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

运行您的应用程序

npm start

打包并分发应用程序

分发你新创建的应用最简单和快捷的方法是使用 Electron Forge。

npx @electron-forge/cli import

✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

创建一个分发版本

npm run make

> my-gsod-electron-app@1.0.0 make /my-electron-app
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

Electron-forge 会创建 out 文件夹，您的软件包将在那里找到

注意：
使用 Electron Forge 创建分发版本报错
命令：npm run make
错误：Making for the following targets: squirrel
解决方法：修改 package.json 里面的 author 和 description 的字段内容不为空

Electron 包含三个核心：

Chromium 用于显示网页内容。
Node.js 用于本地文件系统和操作系统。
自定义 APIs 用于使用经常需要的 OS 本机函数。
用 Electron 开发应用程序就像构建一个带有网页界面的 Node.js 应用程序或构建无缝集成的网页。

标签：npm,package,创建,app,electron,应用程序,js,Electron
来源： https://www.cnblogs.com/sochishun/p/14294570.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9