让前端飞基础资源

electron打包更新到集成sqlite

2019-04-03  本文已影响7人  coderLfy

本文主要讲以下几点

快速开始一个electron与简介

electron是什么

打开官网第一眼就是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用，更加通俗一点就是一个桌面浏览器，实际上这样理解也是对的。因为electron就是通过javaScript使chromium来展示web页面

我为啥用它

如何快速上手electron

我认为以下是快速开始的最好办法

直接使用electron官方提供的例子

// 看这个的源码，很简单可以快速上手
# 克隆这仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入仓库
$ cd electron-quick-start
# 安装依赖库
$ npm install
# 运行应用
$ npm start

如果想了解这个electron的API可以克隆这个库并运行

git clone https://github.com/electron/electron-api-demos

cd electron-api-demos

npm install

npm start

如何调试electron

渲染进程调试（web页面）
渲染器进程这chrome浏览器一样，BrowserWindow创建窗口后添加窗口实例.webContents.open

主进程Electron调试
使用vsCode中的debug,注意调试路径，如果需要增加变量环境依照配置增加即可

electron中主进程的生命周期以及常用事件和渲染层

主要聊electron中主进程的生命周期，渲染器的部分生命周期，一般只介绍通用都存在的，如果只有某个系统有的api就不写在这里了，大家可以自行查阅

主进程中的生命周期

生命周期图

生命周期图

正常流程会触发的生命周期

这里要注意如果是进程杀死退出的所有都不触发，如果是cmd+Q或者开发者使用app.quit()退出的window-all-closed是不会被触发的，基本操作一般在ready中处理

进程相关

其他

渲染进程--（浏览器）-BrowserWindow

渲染进程 BrowserWindow实例中的webContents

electron的进程与渲染层通讯

electron主进程与渲染进程

chrome浏览器由于每个标签页都是一个进程,而electron所运行的进程称为主进程并且只有一个，主进程要操控浏览器的每个标签的网页称为渲染器进程，如何通讯呢？

主进程和渲染器进程

进程

进程是正在运行的程序的实例（狭义定义）

electron中的主进程

Electron 运行 package.json 的 main 脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。

electron中的渲染器进程

由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。 每个 Electron 中的 web 页面运行在它自己的渲染进程中。

渲染器进程与主进程之间的区别

主进程使用 BrowserWindow 实例创建页面。 每个 BrowserWindow 实例都在自己的渲染进程里运行页面。 当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

主进程管理所有的web页面和它们对应的渲染进程。 每个渲染进程都是独立的，它只关心它所运行的 web 页面。

在页面中调用与 GUI 相关的原生 API 是不被允许的，因为在 web 页面里操作原生的 GUI 资源是非常危险的，而且容易造成资源泄露。 如果你想在 web 页面里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。

主进程与渲染器进程如何通讯

主进程与渲染器进程通过ipcMain与ipcRenderer来通讯

ipcMain与ipcRenderer通讯

主进程向渲染器进程通讯

这个方式主要是主进程中使用ipcMain使用on监听，监听获取后通过event.sender(相当于webContent)send来发送一个事件，渲染进程中使用ipcRenderer通过on来接收,如果是同步可以通过evnet.returnValue来返回主进程的结果代码如下：

渲染器进程向主进程通讯

渲染器进程主要通过ipcRenderer这个模块中的send来发送，该方法中可以同步与异步发送消息，接收消息使用on来接收

通讯简化

electron的打包

常用方式：

  1. electron-builder（本人主要用这个）
  2. electron-pakager
  3. electron-forge

electron-builder

electron-builder 是一个完整的解决方案，并且自带自动更新策略

electron-builder打包在package的script配置好

打包常用参数：

  "build": {
    "appId": "your.id", // appid
    "productName": "程序名称", // 程序名称
    "files": [    // 打包需要的不过滤的文件
      "build/**/*",
      "main.js",
      "node_modules/**/*"
    ],
    "directories": { 
      "output": "./dist-out", // 打包输出的目录
      "app": "./",  // package所在路径
      "buildResources": "assets"   
    },
    "nsis": {
      "oneClick": false,  // 是否需要点击安装，自动更新需要关掉
      "allowToChangeInstallationDirectory": true, //是否能够选择安装路径
      "perMachine": true // 是否需要辅助安装页面
    },
    "win": {
      "target": [
        {
          "target": "nsis",  // 输出目录的方式
          "arch": [ // 输出的配置ia32或者x64/x86
            "x64"
          ]
        }
      ],
      "publish": [ // 自动更新的配置
        {
          "provider": "generic", // 自己配置更新的服务器要选generic
          "url": "http://127.0.0.1:8080/updata/" //更新配置的路径
        }
      ]
    }
  }

在package.json中增加的快速启动项

"scripts": {
  "pack": "electron-builder --dir",
  "dist": "electron-builder"
}

启动打包

通常需要注意的点

如果配合create-react-app创建出来的应用

electron-builder的自动更新

如果在API中看到autoUpdater这个API，希望在看到这个API之前先参考官方的自动更新这样会让你少点坑，因为electron-builder的自动更新机制和electron提供有些不一样,electron-builder官网也有说明，否则就会一直报error了

这个更新实际上是对比例两个版本之间的版本号，如果当前版本小于，服务器版本的话就会进行下载更新

更新机制

在资料里有一篇专门讲更新机制的，很好。这里简单总结。


更新步骤.png

autoUpader生命周期

更新要注意的点：

//electron-quick-start 
//main.js 主进程中

// 可以没有这个
const { autoUpdater } = require('electron-updater')

// ================= start 非必须 ===============
const log = require('electron-log');
autoUpdater.logger = log;
autoUpdater.logger.transports.file.level = 'info';
// ================ end 非必须 ==================

// 封装
function sendStatusToWindow(text) {
  log.info(text);
  mainWindow.webContents.send('message', text);
}

/**
 * 自动更新
 */
function checkUpdata() {
  autoUpdater.setFeedURL('http://127.0.0.1:8080/updata/')
  // autoUpdater.on('error', (error) => {
  //   sendStatusToWindow( `[error]:${error}`)
  // })
  autoUpdater.on('checking-for-update', () => {
    sendStatusToWindow('Checking for update...');
    // mainWindow.webContents.send('downlaod')

  })
  autoUpdater.on('update-available', (info) => {
    sendStatusToWindow('Update available.');
  })
  autoUpdater.on('update-not-available', (info) => {
    sendStatusToWindow('Update not available.');
  })
  autoUpdater.on('error', (err) => {
    sendStatusToWindow('Error in auto-updater. ' + err);
  })
  autoUpdater.on('download-progress', (progressObj) => {
    let log_message = "Download speed: " + progressObj.bytesPerSecond;
    log_message = log_message + ' - Downloaded ' + progressObj.percent + '%';
    log_message = log_message + ' (' + progressObj.transferred + "/" + progressObj.total + ')';
    sendStatusToWindow(log_message);
    mainWindow.webContents.send('downloadExe', progressObj.percent)
  })
  autoUpdater.on('update-downloaded', (info) => {
    mainWindow.webContents.send('downloaded')


    sendStatusToWindow('Update downloaded');
    // autoUpdater.quitAndInstall();
  });

electron中添加sqlite3

需要的环境

如果是windows环境需要准备 vs2015 与python2.7的环境

  1. python2.7.x 网上下载安装即可
  2. vs2015 以下方式可选其一
    1. 工具包 npm install --vs2015 -g windows-build-tools（推荐）
    2. 安装visual studio 中安装vs2015工具包（超久）

程序中可添加的本地数据库，最多使用的两款

为自己的数据加上本地数据库sqlite3

sqlite3【gitHub】
为程序添加sqlite3npm i sqlite3 或者yarn add sqlite3

如何使用?

// 官网例子
var sqlite3 = require('sqlite3').verbose();
var db = new sqlite3.Database(':memory:'); // 这里是把数据存入内存
db.serialize(function() {
var db = new sqlite3.Database()
  db.run("CREATE TABLE lorem (info TEXT)");
  var stmt = db.prepare("INSERT INTO lorem VALUES (?)");
  for (var i = 0; i < 10; i++) {
      stmt.run("Ipsum " + i);
  }
  stmt.finalize();

  db.each("SELECT rowid AS id, info FROM lorem", function(err, row) {
      console.log(row.id + ": " + row.info);
  });
});

db.close();

sqilte3在安装的时候自动生成sqlite所需要的文件包，这个二进制文件需要使用node-pre-gyp或者是node-gyp这也就是为什么需要安装环境的原因，在这一步鬼知道当时报了多少东西，尤其是还要把这玩意弄进内网。
比如说：

node-gyp rebuild 
--target=4.0.4 --arch=x64
--target_platform=win32 --dist-url=https://atom.io/download/electron/
--module_name=node_sqlite3 --module_path=../lib/binding/electron-v4.0-win32-x64

// 使用到的模块解析
// target                => electron的版本号一定要一直
// target_platform       => 需要打包的平台ia32/x64等
// dist-url              => 这个是需要下载相关内容的地址
// module_name           => 需要打包的模块名称
// module_path           => 打包输出的地方

如果觉得麻烦可以试试npm i electron-rebuild -D然后在使用./node_modules/.bin/electron-rebuild重新编译一遍，有时候可能是缓存问题，把缓存清除npm cache clear -f清除一下，还有就是npm i重新安装一下，因为环境的问题会跳出各种问题，可以多多尝试这些方法

was compiled against a different Node.js version using
NODE_MODULE_VERSION 64. This version of Node.js requires
NODE_MODULE_VERSION 69. Please try re-compiling or re-installing

如让你选择node编译版本的github【issues】====>也有可能是编译问题，利用electron-rebuild 重新编译一遍或者把sqlite3降级

需要注意的

其他模块

内网开发需要注意

内网开发真的很烦。。
首先需要环境，然后就是需要下载的包，其次就是需要编译后的各种文件如sqlite3编译后的文件等如果在内网开发electron就需要把这些需要的包全都复制到对应位置

大部分需要配置的文件都在C:\Users\xxxxxx代表你所在的文件夹,
部分下载缓存文件在C:\Users\xxx\AppData\Local目录下的electron 和 electron-builderer里

内网01.png

参考的学习资料

以下文章大部分阅读过，觉得不错推荐给大家

electron

electron构建相关

electron打包相关

electron更新

electron

electron编译

electron tips

上一篇下一篇

猜你喜欢

热点阅读