Electron是一个构建桌面应用程序的框架。它与传统的桌面应用程序开发方法有一些不同。它使用现在流行的Javascript。本系列文章可能需要你具备一些ES6和Angular2的基础知识，但没试过也没关系，你可以打开编辑器按照教程一步步搭建应用。对于Electron，您可以参考此处的文档介绍在本教程中，我们将使用Electron和流行的Angular的最新版本来构建桌面应用程序。我们暂定的应用叫news-feed，它至少有以下功能：抓取一些热门新闻存入本地列表显示新闻，提供文章详情查看和下载感兴趣的文章到本地AngularAngular目前有很多版本，脚手架也比较复杂。在写这篇文章的时候，Angular的最新版本是4.beta，我们也用它来构建。运行npmiangular-cli@1.0.0-beta.25.5-g安装全局角度命令行工具。在项目根目录中运行ngnewnews-feed--style=scss以开始创建角度应用程序。（这一步会需要一些时间，具体取决于你的网络，如果出现node-sass错误，请确保你有c++编译环境，具体可以参考github上的node-sass项目安装）运行ng服务器，打开浏览器127.0.0.1:4200可以看到Angular运行正常。至此，Angular可以正常运行，但值得一提的是ngserver命令无法输出文件。我们需要的是对electron渲染的文件进行实时监控和编译，所以我们需要为package.json文件提供脚本，在这一栏添加一行命令："watch":"ngbuild-watch-odist/".这样，我们每次运行npmrunwatch，就可以自动监控文件，帮我们编译文件。还有一个小问题。我们这样编译出来的文件路径在electron中是不会正确渲染的。这是因为我们没有指定资源的相对路径。你可以修改为。到这一步，我们所有的Angular问题都解决了。Electron关于Electron的介绍很多。也可以参考其他教程搭建。这里我们只提供一些基本环境的提示。如果需要参考更多信息，可以参考官方文档或者在GITHUB上搜索相关项目。这里系统默认MAC，默认你已经有基本的c++编译环境和其他基本的开发工具。（编译一些库时可能需要它们）安装全局的electron-prebuilt：npmielectron-prebuilt-g，用于运行一些electron命令。如果您需要权限，请尝试sudonpmielectron-prebuilt-ginstall。完成后可以通过electron-v查看版本。进入news-feed目录，在package.json文件中添加"main":"index.js"指定electron的入口文件。运行npmielectron--save以安装电子依赖项。（可能需要很长时间，如果你卡在electroninstall，说明你需要一些更好的命令行代理，或者你可以试试这个从淘宝源安装的命令：ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/npmi-保存电子）。在根目录添加index.js并填写一些基本代码：const{app,BrowserWindow}=require('electron')letwin;constcreateWindow=()=>{win=newBrowserWindow({width:700,height:500,show:false,});win.loadURL(`file://${__dirname}/dist/index.html`);win.webContents.openDevTools();win.on('closed',()=>win=null)win.on('ready-to-show',()=>{win.show()win.focus()})}app.on('就绪',_=>createWindow())app.on('window-all-closed',_=>process.platform!=='darwin'&&app.quit())app.on('激活',_=>win===null&&createWindow())现在整个项目结构应该是这样的：现在运行npmrunwatch开始编译angular，然后打开一个新的命令行窗口，运行electron./运行后看效果.怎么样，是不是很爽？先不着急开发架构，先梳理一下项目结构，以及如何开发。虽然Electron有很多API可以使用，但是大部分都不能在渲染过程中使用。所谓渲染进程，可以简单理解为前端视图层。每当我们需要使用系统API或者NODE的原生模块时，我们需要向主线程发送一个应用程序，然后获取一些数据来计算和填充模板。当然也有人通过remoteAPI在渲染过程中使用主进程的对象，但是我不推荐这样做，因为渲染过程中的任何代码，也就是你的Angular，都可能造成全局内存泄漏，尤其是在当在复杂的业务中使用事件监控。这种问题很难定位，刷新窗口也解决不了，因为主线程不会随着页面刷新而重启。在Angular中，我们可以将每个请求的数据包装成Rx对象，像http一样使用。Electron负责抓取相应的数据并返回或存储。这里我们可以使用nodejs中的一些常用库来解决这些琐碎的事情。我们希望将数据处理成更好的json格式，每次爬取后返回给前端，所以我们还需要对字符串进行过滤和拼装。这个应用是没有权限控制的，但是为了大家学习这个，我们可以假设它是一个注册收费软件，每次登录后才能使用，这样我们就可以学习一些路由的权限控制。一个好的应用不仅要有好的基础逻辑，细节也是成败的关键。这就像福特在《西部世界》里说的，“他们会为细微之处而来，为细节而来（Details），因为坠入爱河（Inlove）”。比如我们可以记录用户的一些习惯，拖到多大的窗口，拖到哪里的窗口位置，文章的基本字体多大等等，在下次启动的时候给他们配置。为用户准备足够好的字体和阅读体验，更新速度、方式、机会、阅读和下载方式等等，在这个开发过程中，我们不妨考虑这些细节。在学习新技术的时候，尽量做一款用户友好的好评产品！注：原文首发于维特的博客。如果您需要演示项目，请看这里
