zoukankan      html  css  js  c++  java
  • electron --- 构建桌面应用

      最近无意间看到了electron和nw的相关信息,感到很惊讶,因为学习前端也有一段时间了,竟然发现js还有这么强大的功能,因为js不仅可以写网页、写webapp、写hybrid,以及前不久出现的小程序,现在甚至已经可以用来写桌面应用了,从github上的star数已经快到50000就可以知道electron是多么火了,所以这里简单了解一下,以后有机会还是可以使用起来。

      electron官网

      github

      必看文章

      官网介绍如下:electron使用html、css、js构建跨平台的桌面应用。当前版本是1.6.11,所以还是很新的一个框架,但是就目前的star数而言,可知其发展前景还是很不错的。并且使用electron会比你想象的更加简单,因为如果你会写网站,那么你就可以构建一个桌面app。 Electron是一个使用html、css、js构建原生app的框架。它帮你解决了最困难的部分,所以你只需要关注于应用的核心部分即可。

      Electron三大特点

    • 使用web技术更易构建 --- Electron使用chromium以及nodejs,这样就可以使用html、css、js来创建桌面app。
    • 开源。
    • 跨平台 --- Electron兼容Mac、Windows以及Linux平台,即使用Electron创建的app可以在这三个平台上跑起来。

     

      使用了Electron创建的桌面app

      最初使用Electron创建的是 Atom 编辑器,随后又开始被例如微软、脸书等大公司开始使用。

      

      

    开始

      在https://electron-api-demos.githubapp.com/updates/ElectronAPIDemosSetup.exe这个链接中,我们可以下载使用Electron构建的app,这个app里介绍了使用electron的一些主要的功能。 如下所示:

      

    这里可以看到,和chrome浏览器非常类似,因为Electron就是使用chromium的,但是我们是可以通过设置去掉上面的toolBar和右边的滑动栏的,以更加接近原生的app。

    https://electron.atom.io/docs/api/ 这里是使用electron所需要的所有的api。 

    对于Electron我们主要可以使用的功能有:

    • 窗口:创建一个窗口、创建无边界窗口、控制窗口状态、控制窗口的获得焦点和失去焦点、在app崩溃时重新加载、在app挂起时重新加载。
    • 菜单:自定义的菜单、右键菜单、键盘快捷键设置。
    • 原生用户接口:打开文件、浏览器中打开一个链接、使用系统的对话框 --- 错误对话框、提示对话框、保存对话框。
    • 通信: 在主进程和渲染进程之间进行通信 --- 包括同步通信和异步通信, 和一个隐藏的窗口通信。
    • 系统: 获取app的位置信息、获取app的版本信息、获取系统信息、获取屏幕信息、使用剪切板等。
    • 媒体: 打印为PDF、截屏。 

    官方electron推荐app:https://github.com/electron/electron-quick-start

    这个项目中就是最简单的electron构建的桌面应用。 

  • 相关阅读:
    JS 中 原生方法 (四) --- Object
    在 JavaScript 中 prototype 和 __proto__ 有什么区别
    VueJs 源码分析 ---(一) 整体对 vuejs 框架的理解
    Node.js API 初解读(三)
    npm 包的 发布 流程
    JS 中 原生方法 (三) --- Date 日期
    JS 中 原生方法 (二) --- 数组 (修---添加ES6新增)
    Mac 下VIM配置
    css预处理器(sass)
    BFC 神奇背后的原理
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/7148378.html
Copyright © 2011-2022 走看看