原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上面移植出来，并且可以在浏览器上面跑的通了。