{"id":16119528,"url":"https://github.com/downgoon/hello-electron","last_synced_at":"2026-02-23T17:40:56.299Z","repository":{"id":77273870,"uuid":"94098110","full_name":"downgoon/hello-electron","owner":"downgoon","description":"HelloWorld for electron","archived":false,"fork":false,"pushed_at":"2017-06-20T10:03:55.000Z","size":578,"stargazers_count":1,"open_issues_count":4,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-07T17:31:21.772Z","etag":null,"topics":["electron","helloword"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/downgoon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-12T13:16:20.000Z","updated_at":"2021-07-12T08:09:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"b715bc03-cf95-4ce1-a852-41ba0dbd0bb3","html_url":"https://github.com/downgoon/hello-electron","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/downgoon/hello-electron","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/downgoon%2Fhello-electron","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/downgoon%2Fhello-electron/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/downgoon%2Fhello-electron/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/downgoon%2Fhello-electron/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/downgoon","download_url":"https://codeload.github.com/downgoon/hello-electron/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/downgoon%2Fhello-electron/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29749246,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","helloword"],"created_at":"2024-10-09T20:54:23.331Z","updated_at":"2026-02-23T17:40:56.285Z","avatar_url":"https://github.com/downgoon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hello-electron\n\n\u003c!-- toc --\u003e\n\n\u003c!-- TOC depthFrom:1 depthTo:6 withLinks:1 updateOnSave:1 orderedList:0 --\u003e\n\n- [hello-electron](#hello-electron)\n\t- [QuickStart](#quickstart)\n\t\t- [start](#start)\n\t\t- [package](#package)\n\t- [index.html](#indexhtml)\n\t- [server.js](#serverjs)\n\t- [main.js](#mainjs)\n\t- [网页交互](#网页交互)\n\t- [调用node](#调用node)\n\t- [electron 本质](#electron-本质)\n\t- [打包发布](#打包发布)\n\t\t- [安装打包工具](#安装打包工具)\n\t\t- [执行打包任务](#执行打包任务)\n\t\t- [多平台打包](#多平台打包)\n\t- [installer 包制作](#installer-包制作)\n\t- [jquery-electron](#jquery-electron)\n- [附录-1： git 提交历史](#附录-1-git-提交历史)\n- [参考资料](#参考资料)\n\n\u003c!-- /TOC --\u003e\n\n\n## QuickStart\n\n### start\n\n```\n$ git clone https://github.com/downgoon/hello-electron.git\n$ cd hello-electron\n$ npm start\n```\n\n### package\n\n直接运行：\n\n``` bash\n$ electron-packager . --overwrite --out=target  --icon=img/hello\n```\n\n如果每次写那么多参数，嫌麻烦，也可以：\n\n``` bash\n$ npm run-script package\n```\n\n原因是命令参数提前配置到``package.json``里面了：\n\n\u003e\n``` json\n\"scripts\": {\n\t\"start\": \"electron .\",\n\t\"package\": \"electron-packager . --overwrite --out=target  --icon=img/hello\"\n},\n```\n\n其中``package``字段是自定义命令（``start``命令是``npm``的自有命令）。\n\n在``Mac``下生成的可执行文件：``target/helloworld-electron-darwin-x64/helloworld-electron.app``\n\n## index.html\n\n刚开始，只有一个 ``index.html``页面，显示``Hello World``：\n\n``` html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003ctitle\u003eHello World!\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ch1\u003eHello World!\u003c/h1\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n这个页面可在本地直接用浏览器打开，提交``c1-index.html``。\n\n## server.js\n\n除了本地直接用浏览器打开``index.html``，我们还可以用``node.js``写一个web server，以便在浏览器中输入：http://127.0.0.1:8080/index.html\n\n``` javascript\n\nvar http = require('http');\nvar fs = require('fs');\n\nhttp.createServer( function (request, response) {\n\n  console.log('request comming: ' + request.url);\n\n  fs.readFile('index.html', function (err, data) {\n    response.writeHead(200, {'Content-Type': 'text/html'});\n    response.write(data.toString());\n    response.end();\n  });\n\n}).listen(8080);\n\nconsole.log('server running at http://127.0.0.1:8080/');\n```\n\n这段代码逻辑比较简单，加载了两个模块：``http``和``fs``，前者是Web服务器，后者是文件系统。用``http``在8080端口启动一个Web服务，对任何请求，都读取``index.html``并写入客户端做HTTP响应（文件读取是异步的）。\n\n\n运行 ``server.js``：\n\n``` bash\n$ node server.js\nserver running at http://127.0.0.1:8080/\nrequest comming: /index.html\n```\n\n上述代码提交日志是：``c2-server.js``。\n\n## main.js\n\n基于node的B/S结构，并不是我们的目标。我们期望用``electron``来加载``index.html``，而无需网络通信，我们要构建桌面程序。\n\n``` javascript\nvar electron = require('electron');\n\nelectron.app.on('ready', function createWindow () {\n\n  new electron.BrowserWindow(\n      {width: 800, height: 600}\n    ).loadURL('file://' + __dirname + \"/index.html\")\n\n} );\n```\n\n上述``main.js``代码，不再需要用户在浏览器上输入URL，而是主动加载URL：\n\n\u003e``.loadURL('file://' + __dirname + \"/index.html\")``\n\n这个``loadURL``的能力，是``electron``模块的，因此开头``var electron = require('electron');``。\n\n``electron``有两个重要对象：\n- ``app``: 管理应用程序的声明周期。代码``app.on('ready', function () {})``表示当应用初始化完毕后，创建一个窗口。\n- ``BrowserWindow``: 浏览器窗口对象。可以用 ``new electron.BrowserWindow()`` 的方式创建一个窗口，并``loadURL``一个html页面。\n\n组成结构和加载过程如下图所示：\n\n![](assets/electron.png)\n\n直接运行``node main.js``会报错，找不到``electron``模块，原因是它不是node的内置模块，我们借助``npm``包管理器来运行。\n\n``` bash\n$ node main.js\n\nError: Cannot find module 'electron'\n    at Function.Module._resolveFilename (module.js:325:15)\n    at Function.Module._load (module.js:276:25)\n```\n\n\u003e``npm``之于``node.js``，犹如``maven``之于``java``。``maven``用``pom.xml``描述依赖关系；而``npm``用``package.json``描述依赖关系。\n\n``package.json``内容：\n\n``` json\n{\n  \"name\": \"hello-electron\",\n  \"version\": \"0.0.1-SNAPSHOT\",\n  \"description\": \"HelloWorld electron\",\n  \"main\": \"main.js\",\n  \"scripts\": {\n    \"start\": \"electron .\"\n  },\n  \"devDependencies\": {\n    \"electron\": \"~1.6.2\"\n  }\n}\n```\n\n上面主要描述了3个信息：\n\n- **meta**: 关于项目本身的描述，比如``name``，``version``等。\n- **入口**：程序的入口是``main.js``，需要用``electron .``来启动。这里的``electron``是``npm``的全局模块，可提前安装``npm install -g electron`` （一定要以``-g``选项安装）。\n- **依赖**：描述项目依赖``electron-1.6.2``版本。\n\n完后，在项目根目录下直接运行：\n\n``` bash\n$ npm start\n```\n\n或者 ``electron .`` 也可以。\n\n![](assets/markdown-img-paste-2017061217281508.png)\n\n代码提交日志：``c3-main.js``\n\n\n## 网页交互\n\n接着丰富下``index.html``，在页面上弄个输入框和按钮。用``CSS``样式渲染下输入框；并用``javascript``响应按钮点击事件。\n\n- 按钮响应动作\n\n``` html\n\u003cbody\u003e\n  \u003ch1\u003eHello World!\u003c/h1\u003e\n  \u003ctextarea rows=\"10\"\u003e\u003c/textarea\u003e\n  \u003cbutton onclick=\"alert('you click write');\"\u003eWrite\u003c/button\u003e\n\u003c/body\u003e\n```\n\n- 输入框渲染\n\n``` html\n\u003chead\u003e\n  \u003cstyle type=\"text/css\"\u003e\n  body {\n    margin: 0;\n  }\n\n  textarea {\n    width: 100%;\n    border: none;\n    background: #eee;\n    margin: 10px 0;\n    padding: 0;\n    outline: none;\n  }\n  \u003c/style\u003e\n\u003c/head\u003e\n```\n\n- 运行效果\n\n![](assets/markdown-img-paste-20170612184937198.png)\n\ngit提交日志：``c4-interaction``\n\n\n## 调用node\n\n刚才演示的跟传统网页没任何区别，依然是纯前端技术（指基于浏览器的）。但是``electron``是桌面程序，它的特别之处在于：在``.html``网页中，可以直接引用``node.js``，相当于直接从前端跨入了后端，而且无需网络通信。\n\n- renderer.js\n\n``` javascript\n\nvar fs = require('fs');\n\nvar myTextarea = document.getElementsByTagName('textarea')[0];\nvar myButton = document.getElementsByTagName('button')[0];\n\n// get input from textarea and write it into message.txt\n\nfunction writeFile() {\n  var text = myTextarea.value;\n  fs.writeFileSync('message.txt',\n  text, 'utf8');\n}\n\nmyButton.onclick = writeFile;\n\n```\n\n这段javascript是node，但是它却可以访问网页的DOM对象，这就是``electron``的神奇之处。\n\n- 引用js\n\n在``index.html``中，引用JS：\n\n``` html\n\u003cbody\u003e\n  \u003ch1\u003eHello World!\u003c/h1\u003e\n  \u003ctextarea rows=\"10\"\u003e\u003c/textarea\u003e\n  \u003cbutton\u003eWrite\u003c/button\u003e\n\u003c/body\u003e\n\n\u003cscript\u003e\n   require('./renderer.js')\n\u003c/script\u003e\n```\n\ngit提交日志：``c5-callnode``\n\n\n## electron 本质\n\n看到这 ``electron`` 似乎没有太多原创的东西，依赖的是``node.js``和``chromium``。官方的概括图是：\n\n![](assets/markdown-img-paste-20170612203435767.png)\n\n看完这个图，让人觉得非常类似微信的``小程序``：提供了一个``Runtime``，给第三方开发者，第三方开发者可以用类似JavaScript的语言来操作手机硬件资源和微信用户信息，因为微信这个母体把手机操作系统层的差异都屏蔽，并抽象出API了。\n\n\n## 打包发布\n\n### 安装打包工具\n\n``` bash\nnpm install electron --save-prod\nnpm install electron-packager -g\n```\n\n执行完，会在``package.json``下自动添加：\n\n``` json\n\"dependencies\": {\n    \"electron\": \"^1.6.11\",\n}\n```\n\n**npm安装指令详解**\n\n\u003e详细了解``npm install``，请前往：[npm install](npm-install.md)\n\n### 执行打包任务\n\n``` bash\nelectron-packager \u003csourcedir\u003e \u003cappname\u003e --platform=\u003cplatform\u003e --arch=\u003carch\u003e [optional flags...]\n```\n\n最简单的，直接执行：\n\n``` bash\n$ electron-packager .\n```\n\n生成的安装包结构：\n\n``` bash\n$ tree helloworld-electron-darwin-x64 -L 1\nhelloworld-electron-darwin-x64\n├── LICENSE\n├── LICENSES.chromium.html\n├── helloworld-electron.app   // Mac 程序\n└── version\n```\n\n**参数解释**\n\n- ``sourcedir``： 源文件目录，属必选参数。表示需要把哪些东西打包。通常可以是项目的根目录，或者如果把源文件都放``app``子目录的话，那就是``app``子目录。\n\n- ``appname``: 应用程序名称，也就是打包后，可执行文件的文件名。它实际是一个可选参数，如果为空，则会取``package.json``里的``productName``或``name``字段（前者优先，以便开发时内部叫``name``，但是发布时外部叫``productName``）。\n\n- ``发布平台``：``electron``是跨平台的，可以打包到``Mac``，``Windows``和``Linux``三个主流平台。可通过参数``--platform=\u003cplatform\u003e``和``--arch=\u003carch\u003e``来指定。通常有三种组合：\n\t- **当前平台**：如果不指定``--platform``和``--arch``，打包时，会默认生成当前平台的包（比如打包命令在``Mac``下运行，那就生成``Mac``平台的）。\n\t- **所有平台**: 如果参数为``--all``，打包时，会生成3套平台。\n\t- **特定平台**：如果``--platform=darwin --arch=x64``，则表示``Mac``平台64位机；如果``--platform=win32 --arch=x64``，则表示``Win``。\n- **常见Flags**：除了上面3个参数外，还有一些可选标志\n\t- ``--overwrite``： 表示覆盖。如果没这个参数，打包过一遍的，再打包会提示已经打包了；如果有这个参数，就会直接覆盖过去的打包。\n\t- ``--icon=./img/hello``： 应用程序图标。注意：**图标的后缀名不用写**，因为它是跨平台的，在windows下，会取``hello.ico``；在Mac下会取``hello.icns``；如果写死了``.icns``，则在Windows平台，由于文件格式不对，会被忽略。\n\t- ``--out ./target``： 指定打包的生成目录，默认是当前目录。\n\n\n**平台有哪些？**\n\n\u003e- ``--platform``: linux, win32, darwin, mas, all\n\u003e - ``--arch``: ia32, x64, armv7l, all\n\n### 多平台打包\n\n除了上文的依据当前平台，自动决策打包外，还可以显示指定打包特定平台，比如我们可以在``package.json``中配置：\n\n``` json\n\"scripts\": {\n\t\"start\": \"electron .\",\n\t\"package\": \"electron-packager . --overwrite --out=target  --icon=img/hello\",\n\t\"package-mac\": \"electron-packager . --overwrite --platform=darwin --arch=x64 --out=target  --icon=img/hello.icns\",\n\t\"package-win\": \"electron-packager . --overwrite --platform=win32 --arch=ia32 --out=target  --icon=img/hello.ico\",\n\t\"package-linux\": \"electron-packager . --overwrite --platform=linux --arch=x64 --out=target  --icon=img/hello.png\"\n},\n```\n\n然后运行：\n\n``` bash\n$ npm run package-linux   // 打包Linux\n$ npm run package-win   // 打包Windows\n$ npm run package-mac\t\t// 打包Mac\n```\n\n顺便提一下，指定特定平台时，icon图片，可以跟平台相关，后缀分别是：``.ico``，``.png``和``.icns``。\n\n## installer 包制作\n\n刚才的打包，还仅仅是打包成了可执行文件，但是并不能一键安装，而是带着目录的绿色软件。\n\n- mac installer\n\n```\n$ npm run installer-mac\n```\n\n前提是先执行上面的``package``操作：``npm run package-mac``\n\n**详细安装包制作**\n\n\u003e 请参考: [installer-made.md](installer-made.md)\n\n## jquery-electron\n\n通常在前端使用jquery的时候，这么引用：\n\n``` javascript\n\u003cscript src=\"js/jquery.js\"\u003e\n\u003c/script\u003e\n```\n\n但是，这样不能在``electron``里面工作，详情请见 [issues-1](https://github.com/downgoon/hello-electron/issues/1)。\n\n网友有人提出了一个引用方式，它能同时让 ``jquery`` 在浏览器里面和``electron``里面工作，方式如下：\n\n``` javascript\n\n\u003c!-- Insert this line above script imports  --\u003e\n\u003cscript\u003eif (typeof module === 'object') {window.module = module; module = undefined;}\u003c/script\u003e\n\n\u003c!-- normal script imports etc  --\u003e\n\u003cscript src=\"js/jquery.js\"\u003e\n\u003c/script\u003e\n\n\u003c!-- Insert this line after script imports --\u003e\n\u003cscript\u003eif (window.module) module = window.module;\u003c/script\u003e\n\n```\n\n详细见 [jquery-electron-demo.html](jquery-electron-demo.html) 页面。\n\n---\n\n# 附录-1： git 提交历史\n\n``` bash\ncommit ebe00af32992041    c1-index.html\ncommit b730d4a1c605f6     c2-server.js\ncommit 230a72cac9104364   c3-main.js\ncommit be3f65bce233fd     c4-interaction\ncommit b6f9befb7ac67c5    c5-callnode\ncommit 25093f4ba4ccd13    c6-electron-summary\n```\n\n如果想看 ``c3-main.js`` 提交点的代码，请执行：\n\n``` bash\n$ git checkout 230a72cac9104364\n```\n\n---\n\n# 参考资料\n\n- [官方 electron-quick-start](https://github.com/electron/electron-quick-start)\n\n- [用node写简易的静态Web服务器](http://www.runoob.com/nodejs/nodejs-web-module.html)\n\n- [用electron写的扬声器应用](http://get.ftqq.com/7870.get)\n\n- [electron本质](https://segmentfault.com/a/1190000007503495)\n\n- [electron-packager-tutorial](https://www.christianengvall.se/electron-packager-tutorial/)\n\n- [electron-develop-practice](https://sneezry.com/2016/01/05/electron-develop-practice-part2/)\n\n- [electron-packager API](https://github.com/electron-userland/electron-packager/blob/master/docs/api.md)\n\n- [electron-packager-tutorial](https://www.christianengvall.se/electron-packager-tutorial/)\n\n- [mac installer DMG](https://www.christianengvall.se/dmg-installer-electron-app/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdowngoon%2Fhello-electron","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdowngoon%2Fhello-electron","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdowngoon%2Fhello-electron/lists"}