Electron 应用实例

Electron 应用实例。(Example Electron app)

  • Owner: atom-archive/electron-starter
  • Platform: Linux, Mac, Windows
  • License:: MIT License
  • Category::
  • Topic:
  • Like:
    0
      Compare:

Github stars Tracking Chart

这个REPO已被弃用

这个 repo 代表了创建和发布Electron应用程序的 "老方法",基于 Atom 的构建过程 -- 虽然这种方法仍然有效,而且这个 repo 中仍然有一些好的想法,但实际上使用 electron-prebuiltelectron-packager 来入门要容易得多。

Electron 入门应用

electron-starter 是一个基础应用,你可以通过 Electron 开始编写自己的跨平台(Win/Mac/Linux)桌面应用。这个模板是从 Atom 源码中提取出来的,经过清理后更加通用,是一个生产应用程序的良好起点。

入门

Electron Starter 中的所有内容均通过 package.json 文件进行配置 -- 有一些额外的字段值得关注:

  • name -- 将在构建工具中使用的应用程序的名称。让它变得简单。
  • productName -- 产品名称 -- 您的可执行文件将被称为此文件(即“MyApp.app”)

默认项目名为 EightOhEight(明白吗?因为它是一个sample(r))。

一旦你设定好了,就去做:

  1. script/bootstrap -- 每次结帐运行一次。
  2. script/build -- 每当更改 package.json 或更改早期启动代码时运行此命令
  3. script/run -- 运行应用程序。使用此功能以开发人员模式运行应用程序

另一个有用的脚本是 script/grunt ,它将运行本地版本的 Grunt。 script/grunt --help 会告诉你可用任务的列表。

使用 JavaScript ES6

对于几乎所有文件,JavaScript ES6/ESNext都可以通过Babel项目获得,除了非常早的启动。要使用它,请在您的文件顶部添加'使用babel'; 。查看 https://babeljs.io 了解更多信息。

什么是“浏览器”与“渲染器”代码?

Electron 有(至少)两个不同的上下文 -- 当你的应用第一次启动时,它运行在一个无 DOM 的 node.js 循环中 -- 没有窗口。这被称为浏览器上下文。内置代码继续启动一个 BrowserWindow 对象,然后创建一个 Rendering 上下文,这更符合你的习惯 - 它具有 Chrome DevTools 和一个 DOM,但它仍然可以使用 node.js,以及几个可用的 Electron API。查阅 Electron 文档,了解更多关于您可以做的事情。

您的应用程序的大部分代码理想情况下都应位于渲染 环境中,因为浏览器环境难以调试和测试 -- 没有 Chrome 开发工具,仅基于 printf 调试。

为什么$MY_FAVORITE_LIBRARY不能工作/做奇怪的事情?

一些 JavaScript 库试图通过探测 module 或 require 来检测它们是否在 node.js 中,并假定它们不在浏览器中。你可能会发现,你需要给这些库打上补丁,让它们始终在浏览器模式下运行。

(The first version translated by vz on 2020.08.22)

Overview

Name With Owneratom-archive/electron-starter
Primary LanguageCoffeeScript
Program languageCoffeeScript (Language Count: 5)
PlatformLinux, Mac, Windows
License:MIT License
Release Count0
Created At2014-11-12 17:59:42
Pushed At2016-07-06 04:27:44
Last Commit At2015-07-18 12:55:07
Stargazers Count530
Watchers Count20
Fork Count69
Commits Count204
Has Issues Enabled
Issues Count59
Issue Open Count0
Pull Requests Count29
Pull Requests Open Count0
Pull Requests Close Count6
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private

THIS REPO IS DEPRECATED

This repo represents the "old way" of creating and publishing Electron applications, based on Atom's build process - while this way still works and there are still some good ideas in this repo, it's actually far easier to use electron-prebuilt and electron-packager to get started.

Electron Starter App

electron-starter is a base application that you can use to get started writing your own cross-platform (Win/Mac/Linux) Desktop apps via Electron. This template is extracted from the Atom source code, cleaned up to be more generic, and to be a great starting point for a production app.

Getting Started

Everything in Electron Starter is configured via the package.json file - there are some extra fields that are of interest:

  • name - The name for your app that will be used in the build tools. Make it something simple.
  • productName - The name of your product - your executable will be called this (i.e. "MyApp.app")

The default project is called EightOhEight (get it? Cause it's a sample(r)).

Once you've set that up, do:

  1. script/bootstrap - Run this once per checkout.
  2. script/build - Run this whenever you change package.json or change early startup code
  3. script/run - Run the app. Use this for running the app in developer mode

Another useful script is script/grunt, which will run the local version of Grunt. script/grunt --help will tell you the list of available tasks.

Using JavaScript ES6

JavaScript ES6 / ESNext is available via the Babel project for almost all files except for very early in startup. To use it, add 'use babel'; to the top of your file. Check out https://babeljs.io for more information.

What's the "browser" vs "renderer" code?

Electron has (at least) two separate contexts - when your app first starts up, it is running in a DOM-less node.js loop - there are no windows. This is called the Browser context. The built-in code proceeds to start up a BrowserWindow object, which then creates a Rendering context, which is what you are more used to - it's got the Chrome DevTools and a DOM, yet it can still use node.js, as well as several Electron APIs that are made available. Check out the documentation for Electron for more about what you can do.

Most of your app's code should ideally live in the Rendering context, because the Browser context is difficult to debug and test - there is no Chrome DevTools, solely printf-based debugging.

Why does $MY_FAVORITE_LIBRARY not work / do weird stuff?

Some JavaScript libraries try to detect whether they're in node.js via probing for module or require, and assume that they aren't in a browser. You might find that you need to patch these libraries to always operate in Browser Mode.

To the top