chalypeng/electron-cn-docs

前言:

Electron中文文档! 精心翻译,完美排版,实时同步更新! (本文档未经同意不得传播!) , 最后同步:2017-05-23

QQ交流群:

群名称：Electron/Nw.js开发交流群
群号：535260421
创建：2017-05-19
宗旨：严禁广告,仅为Electron/Nw.js应用开发交流,译者群主将不定期分享DEMO文件给大家交流学习使用.

群内DEMO文件教程列表:

001自定义托盘菜单界面.zip

002迅雷悬浮窗右键快捷菜单.zip

003渲染进程内实时在线或离线提示.zip

004系统托盘闪烁图标提示用户示例.zip

延伸拓展:

如果API中所列功能无法满足你的需求时,chrome-app-samples是你最好的选择.

多平台支持:

众所周知,目前的Electron主要支持桌面版系统的跨平台,例如Win,Linux,MacOS.并不支持(未来可能也不会支持)移动端如Android,iOS等.

相对而言,Electron的门槛非常低,仅需掌握少量Web语言即可入门,但是更多人的需求是:'Write once, run anywhere'(一次撰写，多端运行).

比如,对**用户而言,Win+Android+iOS三平台支持就是最大的需求主流.

所以此处列举了常见的跨平台开发工具,也欢迎大家推荐更多优秀工具:

原生应用

React-Native - 作者Facebook,Javascript/React,目标平台:iOS/Android
nativescript - JavaScript,目标平台:iOS/Android/Windows
CrossAPP - C++,目标平台:iOS/Android
Xamarin - C#,目标平台:iOS/Android/Windows/Mac
QT - C++,Android/iOS/Windows 10 Mobile/BlackBerry 10/Ubuntu/Sailfish
JUniversal - Java,目标平台:iOS/Android
Kivy -Python,目标平台:iOS/Android/Windows/Mac/Linux
Weex - 作者阿里巴巴,Web,目标平台:iOS/Android
Flutter - 作者谷歌团队,目标平台:iOS/Android

混合应用

Electron通用安装(第一二步请选择适合自己的系统):

1.Node.js安装
2.git安装
3.开始菜单中运行cmd或终端中,粘贴下方命令: 没有翻墙VPN的同学使用:

npm install cnpm -g --registry=http://registry.npm.taobao.org
cnpm install electron -g

可翻墙的同学使用:

npm install electron -g

没有error错误提示的话,这样就安装完成了

你可以在cmd或终端中输入命令 electron -v 如果出来个版本号就可以了.

4.创建demo应用:将quick-start目录中的四个文件放到任意目录,点击 start.bat,弹出 安装成功啦!提示,即创建成功.

注意:quick-start目录为示范文件,你可以任意修改.

5.electron 常用的npm命令:

安装:npm install electron -g 
升级:npm update electron -g
卸载:npm uninstall electron -g

Electron学习要点:

由于Electron基于Node.js,对于新手而言,入门第一关应当稍微熟悉Node.js的文档.

特别是如os,path等常用模块化的引用,这是非常必要的.

Electron文档的学习,本文档中的方法,属性等列举的非常明细,它们的使用方法,你只需稍微观察quick-start目录即可明白.

只有一点,你需要特别的记住,Electron分为主进程和渲染进程,这两个进程的概念贯穿全程!

当你遇到需求进行查阅文档时,你需要先判断所属进程,再判断功能区域,这样即可确定API所在章节,例如,调用系统打印机进行打印小票:

调用系统打印机(与系统交互类的多数为主进程)
打印内容发生在页面内容即功能区域为webcontents(网页内容章节)
API需求为打印,搜 print(打印窗口页面)

常见问题:

提交issue前(欢迎提出各种自己想做但不知如何实现的需求),请详读以下常见问题:

Electron 常见问题

兼容注意:

与Jquery等第三方js插件的兼容相关

<script src=`jquery.min.js`></script>
<script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>

开发指南目录:

教程目录:

API接口目录:

公用:

主进程:

渲染进程:

API中的结构列表:

About