electron跳坑指南 1(electron的安装)

notebin 发布于2019-08-26 12:12 / 415人阅读

摘要：我们在执行首先全局安装或者可以用创建项目进入到项目里面运行项目这样就完成了

前言:

对于electron的介绍大家可以自己百度,这个使用写客户端软件很爽,写下心得以便于大家学习和使用!

我本地开发环境为:Mac OS
目录在 :/Volumes/lee/electron/
开发工具:phpstorm

第一章介绍electron的安装:

对于electron 的安装方式有很多

第1种方式:

非常的简单就是使用npm安装

npm install -g electron //全局安装 electron

第2种方式:

git clone一个仓库

# 克隆项目:
git clone https://github.com/electron/electron-quick-start.git

# 进入项目:
cd ./electron-quick-start

# 安装依赖并且运行:
npm install

npm start

第3种方式:

手动创建electron项目
我们在 /Volumes/lee/electron/目录下面创建一个 electron01目录
可以使用IDE创建也可以使用 mkdir electron01创建项目目录
之后使用IDE打开该项目
为了更好的使用代码提示,我们可以在改项目下执行:

npm install electron

在该项目目录中创建 index.html main.js 2个文件
index.html 我们暂且称作为页面文件吧可以在里面写css html 等
在main.js中创建以下代码:

var electron = require("electron"); //electron 对象的引用

const app = electron.app;   //BrowserWindow 类的引用

const BrowserWindow = electron.BrowserWindow;
let mainWindow = null;

/**
 * 监听应用准备完成的事件
 */
app.on("ready", function () {
    //创建窗口
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    });

    mainWindow.loadFile("index.html");
    mainWindow.on("closed", function () {
        mainWindow = null;
    })
});

/**
 * 监听所有窗口关闭的事件
 */
app.on("window-all-closed", function () {
    if (process.platform !== "darwin") {
        app.quit();
    }
});

之后使用 npm init 创建package.json 的文件
package.json 为:

{
  "name": "electron01",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "dependencies": {
    "electron": "^2.0.7"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

index.html 的代码为:




    
    Title


这是一个页面

之后使用 electron . 来启动项目就可以运行了

第4种方式:

使用官方提供的脚手架工具 electron-forge创建项目
electron-forge相当于electron的一个脚手架，可以让我们更方便的创建、运行、打包electron项目。
我们在 /Volumes/lee/electron/执行

首先全局安装 electron-forge

npm install -g electron-forge    

#或者可以用
cnpm install -g electron-forge

创建项目:

electron-forge init electron02

进入到项目里面

cd ./electron02

运行项目

npm start

这样就完成了!

GPU云服务器云服务器 electron webrtc electron electron使用webrtc electron结合webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108216.html

electron跳坑指南 2(主进程和渲染进程)

摘要：主进程和渲染器进程的脚本的进程为主进程在主进程中运行的脚本通过创建页面来展示用户界面一个应用总是有且只有一个主进程。在主进程和渲染进程中都可以使用。渲染进程因为安全限制，不能直接操作原生。主进程和渲染器进程： ackage.json 的 main 脚本的进程为主进程在主进程中运行的脚本通过创建 web 页面来展示用户界面一个 Electron 应用总是有且只有一个主进程。由于...

hzx 2019-08-26 12:13 评论0 收藏0
Electron指南 - 快速入门

摘要：快速入门提供了丰富的本地操作系统的，使你能够使用纯来创建桌面应用程序。这并不意味着是一个绑定图形用户界面的库。每个页面在里是运行在自己的进程里，这些进程被称为渲染进程。有些只能在该事件发生后才能被使用。快速入门 Electron提供了丰富的本地（操作系统）的API，使你能够使用纯JavaScript来创建桌面应用程序。与其它各种的Node.js运行时不同的是Electron专注于桌面...

SQC 2019-08-19 18:25 评论0 收藏0
开发了一款写作软件(OSX,Windows)，附带Electron开发指南

摘要：本来写这个项目时就没打算来自己实现富文本编辑器，本着能用开源就用开源的原则，在项目里测试了一些开源的编辑器，发现或多或少都有些问题，后来一琢磨，反正这个项目的富文本编辑器需求不复杂，就自己实现一个好了。断断续续写了个把月，终于在昨天完成了第一版… 笔落写作一款帮助网络写手更方便地进行小说创作的PC软件，目前支持 OSX/Windows 名字灵感来自于杜甫的一首诗，前两句是：《寄...

OnlyLing 2019-08-22 17:16 评论0 收藏0