微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

使用Angular与TypeScript构建Electron应用(一)

2017-03-02 20:18 伯乐在线

(点击上方公众号,可快速关注)


作者:伯乐在线专栏作者 - WittBulter 

如有好文章投稿,请点击 → 这里了解详情

如需转载,发送「转载」二字查看说明


Electron是一个构建桌面应用的框架,它与传统的桌面级应用开发方式有一些区别,它使用的是现在流行的Javascript。这个系列的文章可能需要你有一些ES6与Angular2基础知识,不过即便是没有尝试过它们也没有关系,你可以打开编辑器跟随教程一步一步搭建应用。有关Electron你可以参考这里的文档


介绍


在此教程中,我们会使用Electron与流行的Angular最新版本构建一个桌面应用。 我们暂定应用叫做news-feed,它至少拥有以下几种功能:


  1. 抓取流行的一些新闻,并且储存在本地

  2. 列表显示新闻,提供文章详情查看

  3. 可以下载感兴趣的文章到本地


基础


Angular


Angular目前版本较多,脚手架也比较复杂,在写这篇文章时,Angular最新版本是4.beta,我们也采用它来构建。


  1. 运行npm i angular-cli@1.0.0-beta.25.5 -g,安装全局的angular命令行工具。

  2. 在项目根目录下运行ng new news-feed --style=scss开始创建一个angular应用。(这一步需要一些时间,取决于你的网络。如果发生node-sass错误,请确保你拥有c++编译环境,具体可以参考github的node-sass项目来安装)

  3. 运行ng server,打开浏览器127.0.0.1:4200即可看到Angular已经正常运行了。


至此,Angular已经可以正常运行,但值得一说的是ng server命令并不能输出文件,我们需要的是即时监视并编译出文件来供作electron渲染才行,所以我们需要为package.json文件的script这一栏添加一行命令:"watch": "ng build -watch -o dist/"。这样,每次我们运行npm run watch时便可以自动监视文件并帮我们编译文件了。


还有一个小问题存在,我们这样编译出来的文件路径会无法正确的在electron中渲染,这是因为我们没有指定资源的相对路径,可以在src/index.html中修改<base href="/">为<base href="./">。直到这一步,我们的Angular所有问题都已经解决。


Electron


有关electron的介绍有很多,具体你也可以参考其他教程来搭建,这里仅仅提供一些基础环境的提示。如果你需要参考更多的资料,可以参考官方文档或是在GITHUB上搜索相关项目。


这里系统默认为MAC,默认你已经拥有基础的c++编译环境与其他基础的开发设施。(它们在编译一些库时可能需要)


  1. 安装全局electron-prebuilt: npm i electron-prebuilt -g,它用来运行一些electron命令。如果需要权限,请尝试sudo npm i electron-prebuilt -g安装。完成后可通过electron -v来查看版本。

  2. 进入news-feed目录,我们在package.json文件中新增"main": "index.js",为electron指定入口文件。

  3. 运行npm i electron --save安装electron依赖。(可能需要很长一些时间,如果一直卡在electron install中,说明你需要一些比较好的命令行代理,或者你可以尝试这个命令来从淘宝源安装:ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm i -save electron)。

  4. 在根目录下添加index.js,并填充一些基础代码:


const {app, BrowserWindow} = require('electron')

let win;

const createWindow = () =>{

    win = new BrowserWindow({

        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('ready', _ => createWindow())

app.on('window-all-closed', _ => process.platform !== 'darwin'&& app.quit())

app.on('activate', _ => win === null&& createWindow())


现在整体的项目结构应该像是这样:



现在先运行npm run watch开始编译angular,再打开一个新的命令行窗口运行electron ./即可看到运行后的效果。 怎么样,是不是很酷?


架构


先别急着开发,我们再来梳理一下项目结构以及具体应该怎样开发。 Electron虽然有很多API可以使用,但其中大部分都不可以在渲染进程中使用。所谓的渲染进程,大家可以简单的理解为前端视图层,每当我们需要借助系统API或NODE原生的模块,就需要向主线程发送申请,然后获得一些数据来计算与填充模板。


当然,也有一部分人使用remoteAPI在渲染进程来使用主进程的对象,但是我并不推荐大家这样做,因为在渲染进程也就是你的Angular中任何的代码都有可能引起全局的内存泄露,特别在复杂业务中使用事件监听时。这类问题非常难以定位,即便是刷新窗口也无法解决,因为主线程不会随着页面刷新而重启。


在Angular中,我们可以将每次请求的数据包装成Rx对象,就像是使用http一样使用它们。Electron则负责抓取相应的数据返回或存储。这里我们可以采用一些nodejs中通用的库来解决这些琐碎的事情。我们希望每次抓取数据后处理成比较好的json格式返回给前端,所以还需要对字符串进行筛选和组装。


这个应用没有权限的控制,但为了大家学习这一点,我们可以假使它是一个注册收费软件,每次需要登录后才能使用,便于我们学习一些路由的权限控制。


一个好的应用不仅要有好的基础逻辑,细节也是决定成败的关键一点,这就像是《西部世界》里面Ford说的,『他们会为细微(subtleties)而来,为细节(Details)而来,因为爱上(In love)而来』。比如我们可以记录用户的一些习惯,窗口被拖动到多大,窗口位置被拖动到了哪里,文章基础字体多大等等,在下次启动时为他们配置好。为用户准备足够好的字体与阅读感受,更新的速度,方式,机会,阅读与下载的方式等等,在这次开发时我们不妨考虑一下这些细节,在学习新技术时,尝试做一个让人称赞的产品!



觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

 
前端大全 更多文章 不装逼地说,在 Google 到底能学到啥:重温 10 篇热文 小公司的前端应该怎么做? 给编程生涯充电的 10 本书 给编程生涯充电的 10 本书 写一个网页进度loading
猜您喜欢 如何规模化 React 应用 给你马化腾书单,看完阅兵回家好好读书吧|九合荐书 独家 | 清华大学朱小燕教授做客 AI 科技评论,分享 NLP 和& 这可能是全球最好的Oracle数据库健康检查平台 前端Talk月刊第四期