【easy-invoices】electron-vue、sqlite3 项目初探

父母都是做出纳相关的工作,希望我能给他们做个简单的进销存,在上班的时候使用。开发一个不需要花钱买服务器,不需要依赖网络(更新除外),单机版的程序,对于前端出身的我来说,那么electron或nwjs是最好的选择。
electron官网对electron与nwjs的比较
这里我选择了electron,因为很熟悉vue,就使用国人集成的electron-vue进行快速开发。本地数据库采用轻量嵌入型数据库sqlite3,不二之选。UI组件为iview。
  • 本次项目【easy-invoices】github地址:https://github.com/CaanDoll/easy-invoices (求一波star~)
  • 软件下载(目前只构建了windows版本):https://github.com/CaanDoll/easy-invoices/releases
  • electron官网:https://electronjs.org/
  • electron-vue官网:https://electron.org.cn/vue/index.html
  • 界面预览:

物品管理

进出明细


一、环境准备

安装python2.7 和 Visual Studio 2015


二、安装vue-cli脚手架,初始化electron-vue目录

$ npm install -g vue-cli
$ vue init simulatedgreg/electron-vue easy-invoices

打包选择electron-builder。builder可以打包成具体文件,也可以是exe安装程序,而packager只能打包具体文件。下面会具体说明打包。
该命令会生成一个easy-invoices文件夹,大致目录如下(有细微变动)

  • .electron-vue:主要是webpack配置,还有一些封装好了的命令行的输出,供开发、打包调试用。可以自行添加一些配置,如在webpack.render.config.js里添加less-loader和eslint-loader。
  • build:打包需要的素材,例如icon。打包后的默认目录也在于此
  • src:源码,main是主进程部分,render是渲染进程部分,下文会讲到这两个概念。index.ejs会被编译为html的入口。
  • static:静态资源
  • 有一些文件是我后来加上去的,比如eslint相关(.eslintrc.js,.eslintignore),与commit信息校验相关(verify_commmit_msg.js)等
  • .travis.yml为linux构建平台的配置,appveyor.yml为windows构建平台的配置。之后也会详细提到自动化构建。

三、sqlite3集成

nodejs中使用c++模块会涉及到编译问题,该编译常常会导致一些问题发生。
详细的操作请见我的另外一篇文章《electron项目中使用sqlite3的编译问题(windows)》


四、开始开发

在使用electron开发之前,我们需要注意以下几点

  • electron的运行依托于nodejs环境,渲染界面使用chromium。因此,我们开发界面实则编写html,并且在开发的过程中,可以使用nodejs原生模块,比如fs文件模块、os系统模块等。这使得我们的程序有更多的权限和功能,可以非常强大。但在强大的同时,开发者需要担起自身的责任,需要更多的去注意安全问题。
  • 在electron里,最核心的两个概念就是主进程和渲染进程。主进程负责整个程序的调度,控制一些功能,只有一个。而渲染进程负责界面的渲染。他们之间可以相互通信。
  • electron加载html有两种方式,一种通过本地路径读取,一种通过http远程读取。远程读取会有许多限制,防止引起不必要的安全隐患。electron-vue封装好了开发模式和生产模式,开发模式启动webpack-dev-server,渲染进程远程读取,生产模式打包至本地,渲染进程本地路径读取。
  • electron-vue将vue与webpack集成进来快速开发。前端界面使用vue去开发,并使用vue-router做单窗口路由控制。webpack进行模块打包与开发时的监听。electron-vue脚手架提供了vue-electron,并已经封装了这个方法,当运行环境为electron的时候,会将electron挂载在Vue.prototype上。electron对象上有许多api,详情请参考文档。
// vue入口文件
// src/renderer/main.js
if (!process.env.IS_WEB) Vue.use(require('vue-electron'));

...

1.主进程与渲染进程通信

主进程向渲染进程发送消息:

// src/main/index.js
import { BrowserWindow } from 'electron';
const mainWindow = new BrowserWindow();
mainWindow.webContents.send('messageOne', 'haha');

// 某vue组件

2.导出excel(下载文件)

如果在服务端进行导出,有两个步骤,第一步是将数据填充并生成excel,第二步是将文件发送出去。使用electron本地进行导出也不例外,但因为不是调用http接口,会有一些差异。
nodejs生成excel在这里就不多描述,以后我会补充相应的文章。在这里先推荐这两个库,如果生成的excel比较简单,横行数列并没有任何样式的,可以使用node-xlsx。如果需要生成较为复杂的excel,比如有样式要求,有合并单元格的需求,可以使用ejsExcel。
假设我们已经导出了一个名为test.xlsx的excel在系统临时目录(os.tmpdir()):C:UsersusernameAppDataLocalTempappnametest.xlsx

// src/main/index.js
import { ipcMain } from 'electron';
// mainWindow来自new BrowserWindow
ipcMain.on('download', (event, downloadPath) => {
  mainWindow.webContents.downloadURL(downloadPath);// 这个时候会弹出让用户选择下载目录
  mainWindow.webContents.session.once('will-download', (event, item) => {
    item.once('done', (event, state) => {
      // 成功的话 state为completed 取消的话 state为cancelled
      mainWindow.webContents.send('downstate', state);
    });
  });
});

// 渲染进程
ipcRenderer.send('download', 'C:\Users\username\AppData\Local\Temp\appname\test.xlsx');
ipcRenderer.once('downstate', (event, arg) => {
  if (arg === 'completed') {
    console.log('下载成功');
  } else if (arg === 'cancelled'){
    console.log('下载取消');
  } else {
    console.log('下载失败')
  }

3.窗口相关

① 窗口栏

原生的窗口栏不是那么美观,我们可以去掉原生窗口栏,自己写一个。
主进程

// src/main/index.js
import { BrowserWindow、ipcMain } from 'electron';
// 创建窗口时配置
const mainWindow = new BrowserWindow({
    frame: false, // 去掉原生窗口栏
    ...
});

// 主进程监听事件进行窗口最小化、最大化、关闭  
// 窗口最小化
ipcMain.on('min-window', () => {
  mainWindow.minimize();
});
// 窗口最大化
ipcMain.on('max-window', () => {
  if (mainWindow.isMaximized()) {
    mainWindow.restore();
  } else {
    mainWindow.maximize();
  }
});
// 关闭
ipcMain.on('close-window', () => {
  mainWindow.close();
});

头部组件或其他组件,这样就可以在自己定义的元素上去执行窗口操作了

css设置拖拽区域,拖拽区域会自动有双击最大化的功能,注意:拖拽区域内的点击、移入移出等事件将无效,需要将拖拽区域内的按钮等元素设为非拖拽区域即可

    header {
        -webkit-app-region: drag; // 拖拽区域
        .version {
            .ivu-tooltip {
                -webkit-app-region: no-drag; // 非拖拽区域
            }
        }
        .right {
            a {
                -webkit-app-region: no-drag; // 非拖拽区域
            }
        }
    }
② 启动时窗口白屏

程序启动时,界面渲染需要一定时间,导致白屏一下,体验不好。解决方案一种是将程序的背景色设为html的背景色,另外一种就是等界面加载完毕之后再显示窗口,代码如下:
主进程中

// src/main/index.js
import { BrowserWindow} from 'electron';
const mainWindow = new BrowserWindow({
    show: false,
    ...
 });
// 加载好html再呈现window,避免白屏
mainWindow.on('ready-to-show', () => {
    mainWindow.show();
    mainWindow.focus();
});

结语

electron非常好玩,它解放了我们在浏览器中开发界面的束缚。C/S架构也有很多不同于功能点需要多多考虑。第一次写比较长的文章,个中可能会有手误或者知识错误,顺序也不是最理想的。欢迎讨论,也请各路大牛多多指教,指出不正!

你可能感兴趣的:(vue.js,node.js,javascript,sqlite3,electron)