Electron开发 —— 简单demo
2020-08-24 本文已影响0人
潇潇剑_易水阁
总得有个开始
前置条件：
- Electron开发 —— 配置环境
- 官方快速简便Demo模板
- 官方API演示Demo模板 （API演示模板，但注意本文截稿时该模板引用的electron版本仍然为7.2.4，请自行斟酌参考）
- vscore编辑器（非必须，自选喜欢即可）
- 本系列始终以win系统描述、mac和linux各大发行版操作基本相同，命令或许不同，请自行查阅官网
一：步骤：
1. 创建项目，选择自己项目位置创建项目文件，本文项目名为Demo，CMD（PowerShell或vscore打开文件）切换到项目根目录下，设置包声明文件后安装Electron：
// 一路默认即可，后续可以按自己需要修改，当然手动创建或者命令后修改package.json亦可
npm init
npm install --save-dev electron
下载慢解决之一，若Downloading electron-vX.X.X-win32-x64.zip下载很慢或者遇到这个超时报错RequestError: read ECONNRESET，则依下所行，个人已证实的做法：请先切换淘宝源（其他源亦可，看你的喜好，就编辑此文时，该源依然是首选），然后指定下载源位置，当前项目根目录位置新建.npmrc文件（不推荐直接修改npm默认的.npmrc文件，但是单独的需要每次项目都需要这样操作，除非版本固定下来，谦麻烦可以直接修改），内容如下
electron_mirror=https://npm.taobao.org/mirrors/electron/
后面的项目不需要在这样，因为已经在全局Cache保存了这个，至于另外那些更新node的，其实没必要，只要符合官方指定最低版本即可，解决的依然是源的问题，非node本身，下载文件和处理文件是两码事，以及那些在淘宝源或者其他源下载后再放在全局Cache路径的，个人认为还不如这种来得快捷，这些，官方均已有文档，看下即可。。。
下载慢解决之二，无需切换源，当然有些包在国内还是淘宝源快，仅指定安装包路径，全局安装，安装一次即有对应版本的安装包，下次就无需指定代理，除非下载其他版本
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install -g electron
2.在项目根目录下创建默认执行脚本和默认首页，名称都是可以在package.json里面进行修改，然后在创建对应的，项目结构如下：
Demo/
├── node_modules（忽略）
├── package.json
├── package-lock.json （忽略）
├── index.js（官方demo为main.js，感觉main这个单词比index在此处的表述更恰当，建议改这个，本文沿用main.js）
└── index.html
3.修改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.whenReady().then(createWindow)
4.修改index.html，内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<h1>潇风剑易水</h1>
</body>
</html>
5.修改package.json，添加Electron运行时
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "yishui",
"license": "ISC",
"devDependencies": {
"electron": "^9.2.1"
}
}
6.运行
npm start
demo运行图：
demo运行图.png
7.至此demo完毕，想参考更多，请git下官方demo
git clone https://github.com/electron/electron-quick-start
git clone https://github.com/electron/electron-api-demos
