原electron桌面应用技术栈背景：
- electron：跨端桌面应用支持，调用底层api等
- vue：编写纯web界面，在electron壳子上展示
- better-sqlite3：缓存支持
- electron-vue：脚手架
把electron桌面应用改造为在安卓或者ios上面运行（即纯web），网上几乎搜不到这种改造方案，为了做到最小改动量，只改造出入口逻辑，也就是修改底层调用，遵循业务逻辑一概不动的原则。
一、需要的改造点：
主要分为三种：修改底层通信方式、修改底层存储方式、其他细节
二、进程通信方法改造：
electron的主进程和渲染进程通信是基于 node事件系统events 进行改造的。因此我们可以通过使用events来模拟通信。
改造方案：
首先先使用events模拟electron的主、渲进程通信。生成ipcRender、ipcMain两个实例。
// myEvents.js文件
import EventEmitter from 'events'
class ipcMainEmitter extends EventEmitter {}
class ipcRenderEmitter extends EventEmitter {
constructor() {
super()
}
emit (event, payload) {
super.emit(event, event, payload) //这个方法是我为了兼容以前传参需要的
}
}
const ipcRenderMy = new ipcRenderEmitter()
const ipcMainMy = new ipcMainEmitter()
export {ipcRenderMy, ipcMainMy}
1、electron的异步通信 ---双向
原先使用双向通信的图例，我整理了一张：
2022.10.12_e9d46b6ebb66d87de2f36012118dc0cc.png
原先代码结构如下：
//在主进程中.
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
console.log(arg) // prints "ping"
event.reply('asynchronous-reply', 'pong')
})
//---------------------------------------------------------------------------//
//在渲染器进程 (网页) 中。
const { ipcRenderer } = require('electron')
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')
改造后的方案如下：
我整理了一张改造的双向通信的示例图：
2022.10.12_&f33e21173898cad0ece90f88310457d5.png
如上图所示，这样就能保证到在异步通信上我们不用改到原先的代码，只需要修改引入的文件即可。
// const { ipcRenderer } = require('electron')
// const { ipcMain } = require('electron')
// 改为如下
import {ipcMain, ipcRender} from './myEvents'
2、electron的同步通信
//在主进程中
ipcMain.on('synchronous-message', (event, arg) => {
console.log(arg) // prints "ping"
event.returnValue = 'pong'
})
//---------------------------------------------------------------------------//
//在渲染器进程 (网页) 中
const { ipcRenderer } = require('electron')
cosnt data = ipcRenderer.sendSync('synchronous-message', 'ping')
console.log(data ) // prints "pong"
可以看到同步的话是用event.returnValue返回数据（我这里项目是用来等待接口请求返回数据），所以我们可以用es6的async await来模拟这个功能（可能这个需要在原来的方法前面加上async并且await数据返回，暂时没有其他更好的做法）
改造为：
// 例子，直接在sendSync时候发请求返回数据
async sendSync(methodName, payload = {}) {
if (methodName) {
return await fetchData(payload)
}
}
三、sqlite3改造为浏览器的 idnexedDB：
（这需要根据实际业务情况来，即你业务层调用的方式）
以下是数据库增删改查的对应4种办法，值得注意的是，因为indexedDB是异步操作所以需要使用promise，来等待异步完成，以及将对应的sql语句替换为indexdb的写法。
let IDBOpenRequest = null //打开数据库连接对象
let IDBDatabase = null //连接的数据库,后面对数据库操作都通过这个对象完成
const indexPrimaryKeys = 'KEY_TYPE'
/**
* 在创建好的数据库上新建仓库（即新建表）
*/
const createTable = ({}) => {
if (!IDBDatabase.objectStoreNames.contains('cache_records')) {
let objectStore = IDBDatabase.createObjectStore('cache_records', { autoIncrement: true })
//新建索引
// objectStore.createIndex(indexName, keyPath, objectParameters) 语法
objectStore.createIndex('key', 'key', { unique: false })
objectStore.createIndex('type', 'type', { unique: false })
objectStore.createIndex('last_modify', 'last_modify', { unique: false })
objectStore.createIndex(indexPrimaryKeys, ['key', 'type'], { unique: false })
}
if (!IDBDatabase.objectStoreNames.contains('common_configs')) {
const objectStore = IDBDatabase.createObjectStore('common_configs', { autoIncrement: true })
objectStore.createIndex('setting_value', 'setting_value', { unique: false })
objectStore.createIndex('setting_key', 'setting_key', { unique: true })
}
}
/**
* 打开数据库连接，并创建一个数据库对象
* @param databaseName 数据库名称
* @param version 版本号
*/
function initIDB({ databaseName = 'myDatabase', version = 1 }) {
console.log('|||||||||||---数据库初始化程序开始---||||||||||||')
if (!indexedDB) {
alert('indexdb does not support in this browser!')
return
}
IDBOpenRequest = indexedDB.open(databaseName, version)
//数据库的success触发事件
IDBOpenRequest.onsuccess = function (event) {
IDBDatabase = IDBOpenRequest.result //拿到数据库实例
console.log('数据库打开成功')
}
//错误时候事件
IDBOpenRequest.onerror = function (event) {
console.log('数据库打开出错:', event)
}
//指定版本号大于实际版本号时候触发，它会优先执行
IDBOpenRequest.onupgradeneeded = function (event) {
IDBDatabase = event.target.result //若升级，此时通过这里拿到数据库实例
createTable({})
}
}
initIDB({})
class Sqlite {
/**
* 处理不同字段情况下查询数据返回IDBRequest
* @param objectStore
* @param search
* @returns {IDBRequest<IDBCursorWithValue | null>}
*/
static returnIDBCursorForGetPrimaryKey({ objectStore, search }) {
try {
const getIndexKeyBySearchKey = Object.keys(search)
const getIndexValuesBySearchValues = Object.values(search) || ['']
const singleParams = getIndexKeyBySearchKey.length === 1
const index = objectStore.index(singleParams ? getIndexKeyBySearchKey[ 0 ] : indexPrimaryKeys)
return index.openCursor(IDBKeyRange.only(singleParams ? getIndexValuesBySearchValues[ 0 ] : [search.key, search.type]))
} catch (e) {
throw `openCursor查找方式出错！！！${e}`
}
}
/**
* 新增
* @param {String} tableName 表名
* @param {Object} value 插入的值 例如: {字段名: 值}
*/
insert({ tableName, value = {} }) {
const objectStore = IDBDatabase.transaction([tableName], 'readwrite').objectStore(tableName)
let valueEdit = value.key ? value : { ...value, key: null }
// objectStore.add(value, key) 语法
const objectStoreRequest = objectStore.add(valueEdit)
objectStoreRequest.onsuccess = function (event) {
console.log('=====insert=====：数据写入成功', { tableName, value })
}
objectStoreRequest.onerror = function (event) {
console.warn('数据写入失败!!!', event.target.error.message)
}
}
/**
* 查询表=>查询索引
* @param {String} tableName 表名
* @param {Object} search 查询条件 例如: {字段名1: 值, 字段名2: 值}
*/
queryOne({ tableName, search }) {
if (!search) return
try {
const objectStore = IDBDatabase.transaction([tableName]).objectStore(tableName)
return new Promise(((resolve, reject) => {
const request = Sqlite.returnIDBCursorForGetPrimaryKey({ objectStore, search })
request.onsuccess = function (event) {
console.log('=====queryOne=====：成功', { tableName, search }, request.result && request.result.value)
resolve(request.result && request.result.value)
}
request.onerror = function (event) {
console.warn('查询事务失败!', event.target)
reject({})
}
}))
} catch (e) {
throw `查询出错了:${e}`
}
}
/**
* 查询多条
* @param {String} tableName 表名
* @param {Array} field 查询的字段 例如: [字段名1, 字段名2]
* @param {Object} search 查询条件 例如: {字段名1: 值, 字段名2: 值}
*/
query({ tableName, field, search }) {
const data = []
const list = []
const objectStore = IDBDatabase.transaction([tableName]).objectStore(tableName)
if (field && field.length > 0) { //向上兼容，保持调用方法不变
const index = objectStore.index('type')
return new Promise((resolve) => {
index.openCursor().onsuccess = function (event) {
let cursor = event.target.result;
if (cursor) {
list.push(cursor.value)
cursor.continue();
} else {
list.filter(item => item.type === search.type).forEach(item => {
if (item && item.key) data.push({ key: item.key, last_modify: item.last_modify })
})
console.log('======query=====：=查询所有=', { tableName, field, search }, data)
resolve(data)
}
}
})
} else {
return new Promise((resolve, reject) => {
objectStore.openCursor().onsuccess = function (event) {
const cursor = event.target.result;
if (cursor) {
data.push(cursor.value)
cursor.continue();
} else {
console.log('======query=====：=查询所有=', { tableName, field, search }, data)
resolve(data)
}
};
})
}
}
/**
* 删除
* @param {String} tableName 表名
* @param {Object} search 删除条件 例如: {字段名: 值}
*/
async delete({ tableName, search }) {
const objectStore = IDBDatabase.transaction([tableName], 'readwrite').objectStore(tableName)
const request = Sqlite.returnIDBCursorForGetPrimaryKey({ objectStore, search })
request.onsuccess = function (event) {
const objectStoreRequest = objectStore.delete(event.target.result && event.target.result.primaryKey)
objectStoreRequest.onsuccess = function (event) {
console.log('=====delete=====：删除成功🙂', { tableName, search }, event.target.result)
}
}
}
/**
* 修改
* @param {String} tableName 表名
* @param {Object} field 更新的字段 例如: {字段名: 值}
* @param {Object} search 查询条件 例如: {字段名: 值}
*/
async update({ tableName, field, search }) {
try {
const objectStore = IDBDatabase.transaction([tableName], 'readwrite').objectStore(tableName)
const request = Sqlite.returnIDBCursorForGetPrimaryKey({ objectStore, search })
request.onsuccess = function (event) {
// objectStore.put(item, key) 语法
const objectStoreRequest = objectStore.put(field, event.target.result && event.target.result.primaryKey)
objectStoreRequest.onsuccess = function (event) {
console.log('=====update=====：成功', { tableName, search })
}
}
} catch (e) {
console.warn('update失败!')
}
}
}
export default Sqlite
四、其余需要改造功能点：
- 下载功能：原本的文件下载，改为直接浏览器原生下载
- 缓存存储功能：sqlite数据库缓存改为浏览器的indexedDB
- 请求功能改造：原有在主进程里面的请求改为web请求
- 新开窗口：electron新开弹窗改为web的弹窗
以上算是完成了基本改造，已经把界面从electron上面移植出来，并且可以在浏览器上面跑的通了。
