精华内容
下载资源
问答
  • 1.https://github.com/SimulatedGREG/electron-vue//项目下载地址 开始步骤 windows electron安装原生node模块 首先安装 vs2015 包括vsc++ 接着安装: 1. npm install -g node-gyp npm install -g node-pre-gyp ...

    1.https://github.com/SimulatedGREG/electron-vue//项目下载地址

    开始步骤

    windows electron安装原生node模块
    首先安装 vs2015 包括vsc++
    接着安装:
    1.  npm install -g node-gyp
        npm install -g node-pre-gyp
        npm install --global --production windows-build-tools
    
    2.然后安装sqlite3
        npm install sqlite3 或则 yarn add sqlite3(需要安装yarn)
        接着cd到node_module/sqlite3
    3.执行以下命令
    node-gyp rebuild --target=1.7.12 --arch=x64 --target_platform=win32 --dist-url=https://atom.io/download/electron/ --module_name=node_sqlite3 --module_path=../lib/binding/electron-v1.7-win32-x64
    
    --target是electron的版本 这里使用了1.4.3才成功安装
    --module_path 设置路径 注意 electron-v1.4这个 必须和--target一样的版本
    
    展开全文
  • vue-sqlite-:vue + sqlite前十年
  • 电子演示2 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification ... 电子vue-sqlite3-demo
  • Vue-ElementUI-Electron-Sqlite3入门 Vue + Electron + Element UI + SQLite入门套件/样板,带有Babel,热重载,测试,整理和内置的工作示例应用程序。这是@iswoter的vue-cli-plugin-electron-builder的一个分支 ...
  • 2、服务器使用sqlite数据库。3、服务器使用vue技术搭建信息实时展示平台,使用echarts做酷炫实时展示界面,数据量很小。4、服务器不连外网,通过解析指定目录文件获取实时数据。 前端提问:...
  • <p><img alt="" height="803" src="https://img-ask.csdnimg.cn/upload/1610673688937.png" width="1264" /></p>
  • nodejs中内置了变量__dirname,electron-vue中内置了变量__static。在开发阶段的过程中,使用这两个变量来创建文件是没有问题。 例如当我使用path.join(__static,‘password.db’),然后想要创建这个password.db文件...

    1 问题来源

    在使用sqlite3的时候,需要创建数据库表时,这时候很容易出现这个问题!!!提示:SQLITE_CANTOPEN unable to open database file
    nodejs中内置了变量__dirname,electron-vue中内置了变量__static。在开发阶段的过程中,使用这两个变量来创建文件是没有问题。
    例如当我使用path.join(__static,‘password.db’),然后想要创建这个password.db文件时,在开发阶段是没有问题,会成功创建。程序也能正常运行。但是!!打包之后,__dirname和__static的路径会被改写!!!我测试了一下,打包过后__dirname和__static的路径一致,不知道其他人是不是这样。
    但是最关键的一点是:

    • 假设打包过后的项目根路径为:F:\Learning information\HTML_CSS_JavaScript\myPro\password-utils\dist_electron\win-unpacked
    • 我在主程序中使用了__dirname或者__static
    • 在打包后的程序中,这两个路径变为了:F:\Learning information\HTML_CSS_JavaScript\myPro\password-utils\dist_electron\win-unpacked\resources\app.asar
      • 路径多了resources\app.asar
      • 并且app.asar本身是electron打包生成的资源文件!!本身存在。你无法创建基于__dirname或者__static创建文件夹!!所以导致path.join(__dirname,‘password.db’)的文件无法被创建出来。

    2 解决方案

    由于__dirname或者__static 多了 \app.asar,那么我们可以直接把这个替换为空字符串即可。
    即使用path.join(__dirname.replace(“app.asar”,’’),‘password.db’)即可。

    这个错误我查了好久。。。直到我在界面当中展示了这个路径才知道这么回事。

    展开全文
  • electron-vue使用sqlite的踩坑之路

    千次阅读 2020-08-13 11:50:19
    Windows x86-64 MSI installer // 安装sqlite3依赖 npm install sqlite3 --save 注:安装完成之后,需要再运行一下npm install(否则会出现找不到sqlite3.node) 如果npm报错就下载淘宝镜像 然后使用npm install -g ...

    //安装环境

    1. npm install -g node-gyp
      npm install -g node-pre-gyp
      //注:要在C:\Windows\System32以管理员的身份打开cmd.exe执行命令
      npm install --global --production windows-build-tools

      安装Python27
      https://www.python.org/downloads/release/python-2712/
      选择win7-64位 Windows x86-64 MSI installer

    // 安装sqlite3依赖
    npm install sqlite3 --save
    注:安装完成之后,需要再运行一下npm install(否则会出现找不到sqlite3.node)
    如果npm报错就下载淘宝镜像
    然后使用npm install -g cnpm --registry=https://registry.npm.taobao.org安装淘宝的cnpm
    cd到node-module模块目录下
    npm install sqlite3 --save //cnpm install sqlite3 --save 淘宝镜像下载模块
    npm install nan --save
    npm run prepublish //如果失败可以跳过

    npm install --global --production windows-build-tools 
    npm install -g node-gyp
    
    npm install --unsafe-perm
    npm config set msvs_version 2017
    npm install electron-builder
    npm install --save-dev electron-rebuild
    # Every time you run "npm install", run this
    ./node_modules/.bin/electron-rebuild
    # On Windows if you have trouble, try:
     .\node_modules\.bin\electron-rebuild.cmd
    在package的script中添加脚本:rebuild:electron-rebuild -f -w sqlite3
    npm run rebuild
    

    //报错找不见electron-v2.0-win32-x64

    解决方案 : cd到node-modules 的sqlite目录下,执行以下命令
    node-gyp rebuild --target=1.7.12 --arch=x64 --target_platform=win32 --dist-url=https://npm.taobao.org/mirrors/atom-shell --module_name=node_sqlite3 --module_path=…/lib/binding/electron-v2.0-win32-x64
    注:/可能报其他版本错误只需要将末尾electron-v2.0-win32-x64改为报错需要的版本即可

    //报错 node 和electron版本冲突,57,54
    错误信息:was compiled against a different Node.js version usingNODE_MODULE_VERSION 54. This version of Node.js requiresNODE_MODULE_VERSION 57. Please try re-compiling or re-installingthe module (for instance, using npm rebuild or npm install).
    解决方案: 在项目目录下cmd执行下边的命令即可
    .\node_modules.bin\electron-rebuild.cmd

    //报错MSBUILD : error MSB4132: 无法识别工具版本“2.0”。可用的工具版本为 “4.0”。
    1,下载 Visual C++ 2015 Build Tools,安装时,选择自定义安装,勾选系统版本对应的Windows SDKs ,直至安装完毕;
      2,下载 Python2.7,安装时,勾选将 Add Python.exe to PATH,即添加至环境变量,直至安装完毕;
    3,在报错的项目内,重新执行 npm install --msvs_version 2015 进行安装项目依赖,即可完美解决问题了;
    /npm config set msvs_version 2012 —global
    MSBUILD : error MSB4132: 无法识别工具版本“2.0”。可用的工具版本为 “14.0”, “4.0”
    PS E:\Project\nodejs\Study> npm install --msvs_version 2015
    PS E:\Project\nodejs\Study> npm config set msvs_version 2015 --global```

    大功告成后开始使用sqlite

    新建一个db.js
    内容如下:
    import sq3 from ‘sqlite3’
    const path = process.cwd() + ‘\src\renderer\utils\MyDatabase.db’
    //注意’\src\renderer\utils\MyDatabase.db’为我自己的路径,需切换成你自己使用的路径
    const sqlite3 = sq3.verbose()
    const db = new sqlite3.Database(path)
    export default db

    然后在需要的文件中引入
    import db from “…/utils/db”;
    // “…/utils/db”; 请切换成自己的路径
    db.all(“sql语句”, function (err, res) {
    console.log(res)
    })

    展开全文
  • 电子-VUE-SQLITE3 该项目是与sqlite3一起使用的电子战入门套件,该项目的灵感来自邮递员( )。 邮递员是最流行的应用之一,它可以与电子React。 我们在此项目中附加了一些流行的javascript脚本,这些脚本可立即...
  • 本人最近在开发一个基于electron桌面端的项目,需要使用sqlite3做数据的本地化存储,技术路线是这样的:先用vue编写,然后使用electron-build打包桌面端,至此前面的内容都已走通。但是,在使用sqlite3进行本地化...
  • 父母都是做出纳相关的工作,希望我能给他们做个简单的进销存,在上班的时候使用。开发一个不需要花钱买服务器,不... 这里我选择了electron,因为很熟悉vue,就使用国人集成的electron-vue进行快速开发。本地数据库...

    父母都是做出纳相关的工作,希望我能给他们做个简单的进销存,在上班的时候使用。开发一个不需要花钱买服务器,不需要依赖网络(更新除外),单机版的程序,对于前端出身的我来说,那么electron或nwjs是最好的选择。
    electron官网对electron与nwjs的比较
    这里我选择了electron,因为很熟悉vue,就使用国人集成的electron-vue进行快速开发。本地数据库采用轻量嵌入型数据库sqlite3,不二之选。UI组件为iview。

    物品管理
    物品管理

    进出明细
    进出明细

    目录

    一、环境准备

    安装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组件
    <script>
    export default {
    	created(){
    		this.$electron.ipcRenderer.on('messageOne', (event, msg) =>{
    			console.log(msg); // 'haha'
    		}
    	}
    }
     <script>
    

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

    // src/main/index.js
    import { ipcMain } from 'electron';
    ipcMain.on('messageTwo', (event,msg) => {
    	console.log(msg) // 'haha'
    });
    
    // 某vue组件
    <script>
    export default {
    	created(){
    		this.$electron.ipcRenderer.send('messageTwo', 'haha');
    	}
    }
     <script>
    

    也可以用once,代表只监听一次。通讯的方法还有多种,比如remote模块等。

    2. vue路由

    程序刚启动的时候会在根路径下,我们需要进行根路径的路由开发,或者将根路径重定向至开发的路由上。否则会一片白不显示

    3. 前端日志

    封装一个在开发环境下(环境变量:NODE_ENV=development)打印的函数,在关键的节点进行调用方便调试,比如sql语句等。我仅仅是使用console.log,也有其他的第三方浏览器日志插件可以使用。
    本项目里因为没有服务器可上报,所以没有做程序日志的收集,必要时可以去做一些本地日志存储,并且上报,比如错误信息、一些有意义的数据等。

    4. sql语句编写

    程序启动的时候执行建表的sql并捕获错误,如果表存在会抛出错误,这里我们不用管。暴露出去db对象挂载在Vue.prototype上,即可全局调用,接下来就是在业务中各种拼接编(e)写(xin)sql语句了。
    这里我并没有封装数据模型或者使用sequelize等orm库,有兴趣的同学可以尝试。
    网上SQL教程与sqlite3教程也比较多,这么不一一描述,下面是代码片段:

    // src/renderer/utils/db.js
    // 建表脚本,导出db对象供之后使用
    import fse from 'fs-extra';
    import path from 'path';
    import sq3 from 'sqlite3';
    import logger from './logger';
    import { docDir } from './settings';
    // 将数据存至系统用户目录,防止用户误删程序
    export const dbPath = path.join(docDir, 'data.sqlite3');
    fse.ensureFileSync(dbPath);
    
    const sqlite3 = sq3.verbose();
    const db = new sqlite3.Database(dbPath);
    db.serialize(() => {
      /**
       * 物品表 GOODS
       * name 品名
       * standard_buy_unit_price 标准进价
       * standard_sell_unit_price 标准售价
       * total_amount 总金额
       * total_count 总数量
       * remark 备注
       * create_time 创建时间
       * update_time 修改时间
       */
      db.run(`CREATE TABLE GOODS(
        id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
        name VARCHAR(255) NOT NULL,
        standard_buy_unit_price DECIMAL(15,2) NOT NULL,
        standard_sell_unit_price DECIMAL(15,2) NOT NULL,
        total_amount DECIMAL(15,2) NOT NULL,
        total_count DECIMAL(15,3) NOT NULL,
        remark VARCHAR(255) NOT NULL,
        create_time INTEGER NOT NULL,
        update_time INTEGER NOT NULL
        )`, err => {
        logger(err);
      });
    
      /**
       * 进出明细表 GOODS_DETAIL_LIST
       * goods_id 物品id
       * count 计数(+加 -减)
       * actual_buy_unit_price 实际进价
       * actual_sell_unit_price 实际售价
       * amount 实际金额
       * remark 备注
       * latest 是否某物品最新一条记录(不是最新操作无法删除)(1是 0不是)
       * create_time 创建时间
       * update_time 修改时间
       */
      db.run(`CREATE TABLE GOODS_DETAIL_LIST(
        id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
        goods_id INTEGER NOT NULL, 
        count DECIMAL(15,3) NOT NULL,
        actual_sell_unit_price DECIMAL(15,2) NOT NULL,
        actual_buy_unit_price DECIMAL(15,2) NOT NULL,
        amount DECIMAL(15,2) NOT NULL,
        remark VARCHAR(255) NOT NULL,
        latest INTEGER NOT NULL,
        create_time INTEGER NOT NULL,
        update_time INTEGER NOT NULL,
        FOREIGN KEY (goods_id) REFERENCES GOODS(id)
        )`, err => {
        logger(err);
      });
    });
    
    export default db;
    
    

    5. 数据文件及用户配置、

    考虑到用户手误卸载或者删除程序安装目录,将数据文件和用户配置存放在C:\Users${username}\easy-invoices路径下。这样如果不小心删了,重新安装还是可以和之前一样。做得更好一些可以在卸载的时候询问是否删除数据和配置(还没尝试过,不知道electron-builder是否支持)

    6. 升级方案

    不同于B/S架构,C/S架构必须要做好自己的升级方案,否则用户装好了程序就无法再进行更新了。
    主进程使用electron-updater来控制自动更新,渲染进程来做更新的逻辑,每个程序更新的流程都不一样,我的程序是每次启动检测更新,如果有更新就自动下载,下载完成后提示用户是否需要重启更新,用户选择取消则每次开启的时候都会提示一下,用户选择升级那么就重启升级。
    因为我的程序是托管在github上,所以不需要设置feedurl(feedurl有默认值,和打包设置有关,我的项目中默认会去github的release api上检测)。如果放在其他服务器上,需要编写检测接口并设置url。electron-updater官方文档

    下面是代码片段

    $ npm i electron-updater
    

    主进程中

    // src/main/index.js
    import { autoUpdater } from 'electron-updater';
    
    app.on('ready', () => {
      if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdatesAndNotify();
    });
    
    function sendUpdateMessage(message, data) {
      //往渲染进程发送消息,mainWindow来自new BrowserWindow
      mainWindow.webContents.send('update-message', { message, data });
    }
    
    // 阻止程序关闭自动安装升级
    autoUpdater.autoInstallOnAppQuit = false;
    
    autoUpdater.on('error', data => {
      sendUpdateMessage('error', data);
    });
    
    /* // 检查更新
    autoUpdater.on('checking-for-update', data => {
      sendUpdateMessage('checking-for-update', data);
    });*/
    
    // 有可用更新
    autoUpdater.on('update-available', data => {
      sendUpdateMessage('update-available', data);
    });
    
    // 已经最新
    autoUpdater.on('update-not-available', data => {
      sendUpdateMessage('update-not-available', data);
    });
    
    // 更新下载进度事件
    autoUpdater.on('download-progress', data => {
      sendUpdateMessage('download-progress', data);
    });
    
    // 更新下载完成事件
    autoUpdater.on('update-downloaded', () => {
      sendUpdateMessage('update-downloaded', {});
      ipcMain.once('update-now', () => {
        autoUpdater.quitAndInstall();
      });
    });
    
    

    注意:在升级中可能会有改表结构的操作,我在settings.json里存有版本信息,启动的时候将程序的版本号与settings里面的版本号对比,进行升级,升级完成之后将settings里的版本设置为程序版本

    // src/renderer/utils/upgrade.js
    import settings from './settings';
    import packageJson from '../../../package.json';
    // 程序当前版本
    const appCurrentVersion = packageJson.version;
    
    import db from './db';
    
    // 罗列增量升级脚本
    const incrementalUpgrade = {
      '1.0.1':()=>{
        db.run(
        //修改表数据、结构的脚本等
        );
      },
      '1.0.2':()=>{
        db.run(
        //修改表数据、结构的脚本等
        );
      },
    }
    
    // 升级前版本
    const beforeUpgradeVersion = settings.get('version');
    // 用户可能有很多个版本没有升级,寻找执行的脚本 增量执行。
    // 遍历incrementalUpgrade对象,大于beforeUpgradeVersion的脚本都要依次执行。(比较时可以把点去掉转为数字类型比较)
    ...
    
    // 脚本执行完毕
    settings.set('version', appCurrentVersion);
    
    

    下载前可以拿到更新日志、时间、版本号和包大小,下载时可以拿到速度。部分效果展示:
    这里写图片描述
    这里写图片描述

    7. 打包

    前文提到,我采用的是electron-builder进行打包。electron-builder官方文档
    打包的主要配置在package.json里:

    {
    	"scripts":{
    		"build": "node .electron-vue/build.js && electron-builder",
    	    "build:dir": "node .electron-vue/build.js && electron-builder --dir"
    	},
    	"build": {
    	    "productName": "easy-invoices",
    	    "copyright": "caandoll",
    	    "appId": "org.caandoll.easy-invoices",
    	    "directories": {
    	      "output": "build"
    	    },
    	    "files": [
    	      "dist/electron/**/*"
    	    ],
    	    "dmg": {
    	      "contents": [
    	        {
    	          "x": 410,
    	          "y": 150,
    	          "type": "link",
    	          "path": "/Applications"
    	        },
    	        {
    	          "x": 130,
    	          "y": 150,
    	          "type": "file"
    	        }
    	      ]
    	    },
    	    "mac": {
    	      "icon": "build/icons/icon.png"
    	    },
    	    "win": {
    	      "icon": "build/icons/icon.png"
    	    },
    	    "linux": {
    	      "icon": "build/icons/icon.png"
    	    },
    	    "nsis": {
    	      "oneClick": false,
    	      "allowToChangeInstallationDirectory": true
    	    }
    	}
    }
    

    scripts:

    • build:打包成exe安装程序
    • build:dir:打包成文件形式
      build:
    • productName:项目名
    • copyright:版权
    • directories:打包目录
    • win: windows配置。icon为程序图标目录,windows图标至少需要320 x 320,否则报错
    • nsis:windows安装程序exe配置,如果不配置,那么一键安装至C盘User一个local app目录下,不符合程序使用要求,这里我设置了oneClick:false和allowToChangeInstallationDirectory:true,就是不让程序一键安装,让用户去选择安装目录。
    • 其他如appId,dmg,linux、mac都是macOS和linux系统配置,没有仔细研究

    8. CI自动构建发布

    travis和appveyor是开源的两个自动化构建平台,免费服务于github等开源项目(不开源项目貌似要给钱)。如果你是在其他这两个CI平台不支持的仓库,可使用其他构建工具,原理相同。

    ①. 在https://github.com/settings/tokens Generate new token,写上描述,勾上发布权限,生成token。该token只可见一次,注意保存。

    token设置

    ②. https://www.appveyor.com/注册用户,使用github登录。然后开启该项目的构建。

    新建项目
    新建项目

    ③. 将第一步生成的token填至项目环境变量,参数名为GH_TOKEN。发布的时候会自动使用GH_TOKEN进行github release api的调用。

    环境变量

    ④. package.json
    {
    	"repository": {
    	    "type": "git",
    	    "url": "https://github.com/CaanDoll/easy-invoices.git"
        },
    	"scripts":{
    		"build:ci": "node .electron-vue/build.js && electron-builder --publish always"
    	},
    }
    
    • build:ci:执行后,不仅打包,还会将打包后程序上传,发布成github的release草稿,手动编辑后即可发布。
    ⑥. appveyor.yml
    version: 0.0.{build}
    
    branches:
      only:
        - master
    
    image: Visual Studio 2017
    platform:
      - x64
    
    cache:
      - node_modules
      - '%APPDATA%\npm-cache'
      - '%USERPROFILE%\.electron'
      - '%USERPROFILE%\AppData\Local\Yarn\cache'
    
    init:
      - git config --global core.autocrlf input
    
    install:
      - ps: Install-Product node 8 x64
      - yarn
    
    build_script:
      - yarn build:ci
    
    test: off
    
    • version:为构建的版本号,会自增,这个和程序的版本号没有关系
    • branches:指定在哪个分支进行构建
    • image:基础镜像,windows程序构建会用到vs
    • platform:系统位数:如x86(32位),x64(64位)
    • cache:npm缓存目录
    • init:初始执行命令,将所有代码换行符改为CRLF模式
    • install:安装包
    • build_script:执行命令

    接下来提交在github master分支或者merge到master分支(申请merge之后也会触发)就可以触发构建了,在appveyor平台上可以看到。


    五、其他一些细节

    1.打开系统默认浏览器对应链接或者打开我的电脑对应文件目录

    如果使用一般的a标签,会直接将程序的界面跳转至这个链接,因为本身就是浏览器内核。加上target:_blank的话更会没有反应了。这个时候需要调用electron.shell。上面的**openExternal(url)**方法就是打开浏览器,**openItem(path)**打开文件目录。

    // vue入口文件
    // src/renderer/main.js
    if (!process.env.IS_WEB) Vue.use(require('vue-electron'));
    
    // 某页面组件xxx.vue
    <script>
    export default {
      methods: {
        openUrl(url) {
          this.$electron.shell.openExternal(url);
        },
        openPath(path) {
          this.$electron.shell.openItem(path);
        },
      }
    };
    </script>
    

    2.导出excel(下载文件)

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

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

    <script>
    export default {
      methods: {
        minWindows() {
          this.$electron.ipcRenderer.send('min-window');
        },
        maxWindows() {
          this.$electron.ipcRenderer.send('max-window');
        },
        closeWindows() {
          this.$electron.ipcRenderer.send('close-window');
        },
    };
    </script>
    

    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架构也有很多不同于功能点需要多多考虑。第一次写比较长的文章,个中可能会有手误或者知识错误,顺序也不是最理想的。欢迎讨论,也请各路大牛多多指教,指出不正!

    展开全文
  • electron-vue+sqlite3集成遇到的一些问题

    千次阅读 2019-11-18 21:57:32
    首先要确保python2.7和vs2015环境的安装 python2.7的安装配置可以自行百度。 vs2015可用这个命令:npm install windows-build-...当我执行安装sqlite3命令时出现这种错误 检查安装后的路径,却只有 D:\web\e...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,366
精华内容 946
关键字:

vue操作sqlite

vue 订阅