前言

前端开发桌面程序这个概念已经出现有一段时间了,这项技术也已经走向成熟,Github上nw和光electron的star就差不多有10w颗星了,github也衍生出了很多开源的桌面项目俨然成了一个热门项目。既然这么热,那就一个字:学。

本文主要帮助js基础比较薄弱,又没有接触过electron的同学更好的学习electron,文中有什么不足之处或者错误,欢迎指出。

electron 安装

npm命令安装electron库

npm install electron --save-dev --save-exact

传送门:electron官方Github

如何快速上手electron

刚接触一个新东西,难免一头雾水,如果多看一点相关的文章势必会有一个方向感,去更好的上手新东西。上手electron,官方提供了一个非常好的快速上手实例。

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

这个仓库给我们初始化了一个electron项目,结构非常纯净,克隆下来你就可以直接改造成自己的项目。

electron API

官方api(英文) 官方docs

翻译API(版本有偏差)翻译版docs

国内也有翻译版的API文档,但是不能保证是最新的,使用时一定要看好自己的版本和翻译版。使用翻译版API。同时可以看看官方的更新日志,看看有什么新功能。官方社区有很多有用的工具,开始学习欠务必了解,涉及到项目开发调试和项目构建。这里推荐一个仓库,这个仓库收录了一些比较常用的API,克隆后跑起来你就可以快速查看这些常用API

git clone https://github.com/fuchao2012/zh-cn-Electron-API-Demos
cd zh-cn-Electron-API-Demos
npm install
npm start

electron项目和web项目的区别

electron核心我们可以分成2个部分,主进程和渲染进程。主进程连接着操作系统和渲染进程,可以把她看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉前端环境了。只是载体改变了,从浏览器变成了window。传统的web环境我们是不能对用户的系统就行操作的。而electron相当于node环境,我们可以在项目里使用所有的node api 。

简单理解:

给web项目套上一个node环境的壳。

相比web项目,桌面项目多了一个进程

项目迁移

如果要迁移项目到web端,就需要把项目中的electron提供的API和node的API完全剥离出来,只能遗留web的代码,比如 node fs模块,electron提供ipc 模块,都需要剥离。

如果你一开始就打算双端程序,在开始写代码时应该对web代码和elecctron的代码进行分离,以便后期的迁移。

项目开发打包工具

这里推荐devtron 和 electron-builder 2个开发工具,配置简单,功能强大。这里不详细介绍工具的使用。官方都有非常好的文档。

传送门: devtron

传送门: electron-builder

社区还有很多好用的工具,可以自行查阅,选择使用。

传送门:community

ps: electron打包的时候需要下载一个版本库,速度会非常慢,可以通过淘宝镜像源解决

>就是在你的命令前加ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/及空格

$ ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ npm run build

Electron介绍差不多就到这里,框架有了。然而一大堆配置头都晕了,从0-1非常困难,我们不妨从1到0,可以先找个模版做个小demo感受一下electron的魅力,在做项目中学习electron。

传送门: react模版

传送门: vue模版

electron-vue经验分享

官方文档中作者提供了很多对开发有用的东西,我推荐学习的同学都通读一遍

传送门: electron-vue文档

electron-vue,作者为我们封装好了一个基于vue框架的脚手架,包括electron所有基本的开发构建工具 和vue配套的请求,路由以及vuex等插件。

通过脚手架我们可以直接进入开发阶段,开发的同时,去了解electron的工作机制,之后再开始深入去理解她更深层次的代码逻辑。 先走形,再走心。

不迁移项目就可以打包双版本的可行方案

作者并未提供web开发的支持,但是提供了非常好的web打包支持。

只要写好逻辑我们可以不用迁移项目就可以打包桌面项目和web项目。

process.env.IS_WEB是暴露的一个全局变量,我们可以在渲染进程中获取,项目在electron环境下,返回false。否则为true。于此,我们可以通过设置她的值来达到web dev的效果,也可以处理不同环境的不同逻辑,一些示例:

打开新窗口的“最佳”做法

因为是webpack配置,入口只有index.html ,所以打开新窗口,一般会再配置一个入口。其实还有一种更佳的做法。

>>> 主进程 定义好监听事件
ipc.on('newPage', function(e) {
const modalPath = process.env.NODE_ENV === 'development'
? 'http://localhost:9080/#/newPage'
: `file://${__dirname}/index.html#newPage`
let win = new BrowserWindow({
width: 1024,
height: 724,
webPreferences: {
webSecurity: false
}
})
win.on('close', function() {
win = null
})
win.loadURL(modalPath) }) >>> router/index.js 定义路由
// import 你的新页面 .vue 文件
{
path: '/newPage',
name: 'newPage',
component: newPage,
} 》》》配置完成 任意进程调用ipc.send('newPage') 完美解决

页面之间的数据共享问题

electron项目可以通过本地数据库去做一个数据存储,这样你就可以在任何需要的地方调用这份数据。我的做法:

1.首先选择一个 本地数据库插件 ,我用的 nedb

>>> 新建db.js
import Datastore from 'nedb'
import path from 'path'
import { remote } from 'electron' const db = {
tableData: new Datastore({filename: path.join(remote.app.getPath('userData'), '/tableData.db')}),
chartData: new Datastore({filename: path.join(remote.app.getPath('userData'), '/chartData.db')}),
cfgData: new Datastore({filename: path.join(remote.app.getPath('userData'), '/cfgData.db')}),
} export default {
db
} >>>> 引入数据库
/**
* 本地数据库导入
* web模式注释该代码
*/
import db from '../db'
Vue.prototype.$db = db.db >>>> 任意页面调用数据库
this.$db.chartData.loadDatabase();
this.$db.chartData.find({}, (err, docs)=> {
// console.log(docs);
if(docs && docs.length > 0){
this.totalOptionList = docs;
}
});

根据自己的习惯选择数据库,我自己对mongodb数据库比较熟悉,所以采用了nedb。语法糖类似,基本直接拿来就能用,不需要再次学习。

后记

最后说一些可以帮助你更好学习electron的基础知识:

webpack: 最强构建工具,没有之一,了解webpack,你才能更好编写项目配置。

node: electron是搭载谷歌v8内核的高性能的node环境 ,所有node能用的东西,我们都能用。是不是很酸爽?

奉上一个demo项目,简单的相册程序。还有一个项目涉及公司,代码就不好上了,只能分享经验。

传送门: 相册Github

如果觉得本文对你有所帮助,就star一下吧~大传送之术! 我的博客Github

electron入门心得的更多相关文章

  1. electron 入门小白贴

    electron 入门小白贴 electron demo 跑起来! 毕设准备是做个 跨平台的做题的客户端,打算用 electron 来弄. 然而今天折腾了半天才终于吧demo给跑起来了.经历了许多的问 ...

  2. AngularJS入门心得4——漫谈指令scope

    上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...

  3. AngularJS入门心得3——HTML的左右手指令

    在<AngularJS入门心得1——directive和controller如何通信>我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文 ...

  4. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

  5. AngularJS入门心得1——directive和controller如何通信

    粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...

  6. 我的 OneNote 入门心得

    Microsoft OneNote 是老牌笔记类软件,在如今百花齐放的笔记类市场仍然有众多死忠粉的拥护,比如我.也试过其它笔记类软件,近年推出的 Notion 就不错,但仍然无法取代 OneNote ...

  7. Electron入门应用打包exe(windows)

    最近在学习nodejs,得知Electron是通过将Chromium和Node.js合并到同一个运行时环境中,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一门技术.对于之前一直从 ...

  8. electron入门教程

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  9. 1、Electron入门HelloWorld案例

    一.Electron是什么? 官网:https://electronjs.org/ Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. ...

随机推荐

  1. python进阶学习(二)

    本节学习图形用户界面 ------------------------ 本节介绍如何创建python程序的图形用户界面(GUI),也就是那些带有按钮和文本框的窗口.这里介绍wxPython : 下载地 ...

  2. PHP第一天

     2017年7月10日是在汉企第一天接触PHP课程,感觉公司很正规,有各种管理和考核制度,管理比较严格.下午看了他们做的第一阶段的项目,感觉挺有意思的,个人感觉PHP不仅要学会,还要熟练作用,需要多加 ...

  3. [转]Java se 7 最新特性研究(一)

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp81   从2006到现在等待了多年的jdk7终于发布了.这里将对它的一些 ...

  4. Linux下的I/O模型以及各自的优缺点

    其实关于这方面的知识,我阅读的是<UNIX网络编程:卷一>,书里是以UNIX为中心展开描述的,根据这部分知识,在网上参考了部分资料.以Linux为中心整理了这篇博客. Linux的I/O模 ...

  5. grunt之clean、copy

    心情不太好,正好这部分比较简单,记个流水账. ----------流水很清楚惜花这个责任,真的身份不过送运---------- clean.copy算是很重要也很简单的基本组件了. clean(V0. ...

  6. nhibernate教程(4)--条件查询(Criteria Query)

    NHibernate之旅(4):探索查询之条件查询(Criteria Query) 2008-10-16 18:20 by 李永京, 44341 阅读, 43 评论, 收藏,  编辑 本节内容 NHi ...

  7. 转深入Java虚拟机 之四:类加载机制

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17881581 类加载过程     类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个 ...

  8. 201521123103 《Java程序设计》第三周学习总结

    一.本周学习总结 二.书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; pub ...

  9. Python的变量参数

  10. 201521123062《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synch ...