Борьба за разработку Electron-vue 3 — некоторые меры кроссплатформенной совместимости

Windows Vue.js Electron macOS

предисловие

Некоторое время назад я использовалelectron-vueРазработано кросс-платформенное (в настоящее время поддерживающее Mac и Windows) бесплатное приложение для загрузки изображений с открытым исходным кодом——PicGo, я наступил на много ям в процессе разработки, причем не только со стороны бизнес-логики самого приложения, но и со стороны самого электрона. В процессе разработки этого приложения я многому научился. Поскольку я также начал изучать электрон с нуля, такой большой опыт также должен вдохновить и дать инструкции начинающим ученикам, которые хотят изучать разработку электронов. Поэтому я написал практический опыт разработки Электрона и объяснил его с точки зрения наиболее близкой к разработке реальных инженерных проектов. Надеюсь помочь всем.

Ожидается, что он будет расширен за счет нескольких серий статей или аспектов:

  1. Начало работы с электрон-вью
  2. Простая разработка основного процесса и процесса визуализации
  3. Представляем базу данных JSON на основе Lodash - lowdb
  4. Некоторые меры кроссплатформенной совместимости
  5. Выпуск и обновление через CI
  6. ... (подумайте о написании снова)

иллюстрировать

PicGoсостоит в том, чтобы принятьelectron-vueразработан, поэтому, если выvue, то учиться вместе будет быстрее. Если ваш технический стек похож наreact,angular, то чисто по этому туториалу, хотя построение рендерной стороны (которую можно понимать как страницу) может и не многому научиться, но основная сторона (основной процесс электрона) все же должна суметь усвоить соответствующие знания.

Если вы не читали предыдущую статью, вы можете сначала прочитать ее из предыдущей статьи.

Важность кроссплатформенности

Хотя кроссплатформенность электрона в большинстве случаев помогла нам сделать хорошую работу. Однако следует отметить, что между разными платформами обязательно будут различия в деталях. Когда мы пишем кроссплатформенные приложения, недостаточно доказать, что наше приложение надежно, если мы только пройдем тест на нашей собственной платформе для написания. (Конечно, если вы хотите предоставить его только для определенной платформы, это другое дело). Поэтому для разных издательских платформ вам необходимо выполнить некоторые меры совместимости.

Что касается моего собственного опыта, платформа macOS поддерживает относительно много функций, и многие из них уникальны, поэтому многие функции, которые могут быть реализованы в macOS, не обязательно могут быть реализованы в Windows. Поэтому для пользователей Windows в случае обеспечения доступности всего приложения можно пойти на некоторые компромиссы и соответствующие жертвы. Тем не менее, некоторые операционные привычки в Windows, в свою очередь, также могут служить платформе macOS. Ниже я приведу пример, чтобы проиллюстрировать это подробно.

Следите за уникальными функциями на разных платформах

При разработке электронных приложений мы часто обращаем внимание только на имя API, но легко игнорировать платформу, которую может использовать API. В официальной документации для некоторых эксклюзивных API большинство из них будут помечены:

Однако следует отметить, что некоторые элементы конфигурации в API без идентификации платформы также могут быть эксклюзивными для определенной платформы:

В обычном процессе разработки все равно нужно обращать внимание на места, где используются документы, чтобы избежать лишних хлопот в доработке.

Начало работы с кросс-платформенными показателями

Столько всего было сказано выше, пора привести пример. В электронных приложениях обычноrendererПроцессу не нужно делать слишком много кросс-платформенных мер — в конце концов, независимо от того, какая это платформа, это страница, работающая в Chrome. Так что в большинстве случаев работа в этой области будет поставлена ​​наmainв процессе. Хотя есть исключения:

Обработка рабочей области заголовка

Вот версия PicGo для Windows:

Вот версия PicGo для macOS:

Можно обнаружить, что, помимо некоторых различий в цвете, верхниеtitle-barПанель действий также немного отличается. Окно программы macOS используется для размещения кнопок масштабирования и закрытия окна в верхнем левом углу окна. Программы Windows, с другой стороны, предпочитают размещать в правом верхнем углу окна. Таким образом, чтобы удовлетворить рабочие привычки пользователя, мы также должны обращать внимание на это при разработке электронных программ.

Конечно, если через обычнуюBrowserWindowСозданное окно автоматически будет иметь общие для macOS, верхнюю панель Windows и стили по умолчанию.

Здесь я хочу сказать, что если мы хотим более красивый интерфейс, обычно нам нравится «иммерсивная» верхняя панель. Для macOS иммерсивная верхняя панель предназначена для «встраивания» трех кнопок действий верхней панели непосредственно в верхний левый угол темы окна. Для окон вы можете удалить только три кнопки управления вверху и реализовать их самостоятельно во внешнем интерфейсе. Вот и проявляется разница между двумя платформами в этом месте.

существуетmainКогда окно создается в процессе, основной код выглядит следующим образом:

const createSettingWindow = () => {
  const options = {
    height: 450,
    width: 800,
    show: false, // 当window创建的时候不用打开
    center: true,
    fullscreenable: false,
    resizable: false,
    title: 'PicGo',
    vibrancy: 'ultra-dark', // 窗口模糊的样式
    transparent: true,
    titleBarStyle: 'hidden', // title-bar的样式——隐藏顶部栏的横条，把操作按钮嵌入窗口
    webPreferences: {
      backgroundThrottling: false
    }
  }
  if (process.platform === 'win32') { // 如果平台是win32，也即windows
    options.show = true // 当window创建的时候打开
    options.frame = false // 创建一个frameless窗口，详情：https://electronjs.org/docs/api/frameless-window
    options.backgroundColor = '#3f3c37'
  }
  settingWindow = new BrowserWindow(options)

  settingWindow.loadURL(settingWinURL)

  settingWindow.on('closed', () => {
    settingWindow = null
  })
}

Основной инструмент черезprocess.platformсудить о разных платформах. Текущие возможные значения:

  • 'aix'
  • 'darwin'
  • 'freebsd'
  • 'linux'
  • 'openbsd'
  • 'sunos'
  • 'win32'

Здесь нам в основном нужно заботитьсяdarwin(макОС),win32(окна),linux(Linux) Этих трех платформ достаточно. Обратите внимание, что из-за того, что электронrendererБлагословение процесса, вrendererтакже может использоваться непосредственно в процессеprocess.platformдля определения текущей операционной системы. Это удобная функция.

Для платформы Windows из-за использованияframeless-window, поэтому нам нужно вручную «нарисовать» кнопки масштабирования и закрытия вверху и сопоставить их с соответствующими событиями, чтобы имитировать настоящие кнопки.

<div class="fake-title-bar">
  PicGo - {{ version }}
  <div class="handle-bar" v-if="process.platform === 'win32'"><!-- 如果是windows平台 -->
    <i class="el-icon-minus" @click="minimizeWindow"></i>
    <i class="el-icon-close" @click="closeWindow"></i>
  </div>
</div>

Соответствующие события следующие:

minimizeWindow () {
  const window = BrowserWindow.getFocusedWindow()
  window.minimize()
},
closeWindow () {
  const window = BrowserWindow.getFocusedWindow()
  window.close()
},

Проще говоря, звонитеBrowserWindowчтобы получить текущее активное окно, а затем сжать или закрыть окно. На самом деле это не так сложно, не так ли?

Взаимодействие со значком панели задач

Для разных платформ у меня также есть различия во взаимодействии значков панели задач PicGo. Для macOS при нажатии на верхнюю строку меню появляется небольшое окно:

Поскольку значок верхней панели macOS может принимать события перетаскивания, для верхней панели macOS создается небольшое окно, соответствующее значку верхней панели. Сделайте большинство операций возможными, не заходя в главное окно. Для окон нет верхней панели, вместо этого есть панель задач, расположенная справа от нижней панели.Обычно щелчок по значку на панели задач вызывает главное окно приложения. Поэтому, чтобы удовлетворить рабочие привычки разных платформ, я также сделал соответствующие адаптации совместимости для этого места:

tray.on('click', () => { // 不管是顶部栏的图标还是任务栏的图标都是Tray组件生成的
  if (process.platform === 'darwin') { // 如果是macOS平台
    let img = clipboard.readImage()
    let obj = []
    if (!img.isEmpty()) {
      // 从剪贴板来的图片默认转为png
      const imgUrl = 'data:image/png;base64,' + Buffer.from(img.toPNG(), 'binary').toString('base64')
      obj.push({
        width: img.getSize().width,
        height: img.getSize().height,
        imgUrl
      })
    }
    toggleWindow() // 打开小窗口
    setTimeout(() => {
      window.webContents.send('clipboardFiles', obj)
    }, 0)
  } else {
    window.hide()
    if (settingWindow === null) { // 如果主窗口未创建
      createSettingWindow() // 创建
      settingWindow.show() // 并打开
    } else {
      settingWindow.show() // 如果已存在，打开
      settingWindow.focus() // 并激活
    }
  }
})

Закрытие окна и выход из приложения

На платформе Windows мы обычно выходим из приложения по умолчанию после закрытия всех окон приложения. Это не относится к системам MacOS. Мы закрыли окно приложения, но не закрыли его полностью. Таким образом, для достижения этой операционной привычки мы также можем добавить ситуационное суждение:

app.on('window-all-closed', () => { // 当窗口都被关闭了
  if (process.platform !== 'darwin') { // 如果不是macOS
    app.quit() // 应用退出
  }
})

Суммировать

В этой статье кратко описаны некоторые меры предосторожности при разработке электронных приложений для разных платформ. Многим может показаться странным, почему я выделил именно эту главу. Часто мы сосредотачиваемся только на процессе разработки приложения, и во многих случаях реализация функций приложения является «конечной» целью. Однако реальность такова, что функциональная реализация приложения является лишь «основной» целью. Если приложение должно использоваться пользователями, оно должно учитывать не только функции приложения, но и привычки пользователей. Чтобы стоять в точке зрения пользователя, чтобы сделать приложение. Вместо того, чтобы делать самовосстанавливающиеся приложения. Так что эта статья также надеется помочь вам, кто хочет разрабатывать электронные приложения.

Большая часть этой статьи разработана мнойPicGoВозникшие проблемы и ямы, на которые наступили. Возможно, за простыми предложениями в тексте кроются мои бесчисленные чтения и отладки. Надеюсь, эта статья даст вамelectron-vueРазвитие приносит некоторое вдохновение. Соответствующий код в тексте, вы можете найти его вPicGoНайдено в репозитории проекта, добро пожаловать в звезду~ Если эта статья поможет вам, это будет мое самое счастливое место. Если вам нравится, пожалуйста, следуйте за мнойблоги последующие события в этой серии статей.

Примечание: фотографии в этой статье принадлежат моей личной работе, если не указано иное, если вам нужно перепечатать, пожалуйста, отправьте личное сообщение

Категории