Превратите свою веб-страницу в приложение Electron за десять минут

Electron
Превратите свою веб-страницу в приложение Electron за десять минут

Десктопное киноприложение Douban на основе Electron, React, React-router, Typescript

Исходный код:Github.com/yangfan2016...
исходный код веб-проекта:GitHub.com/yangfan2016…
автор:github.com/Yangfan2016

предисловие

618 нашла на сайте MOOC электронный курс за 1 юань, базовый вводный курс, неплохой, поэтому несколько дней назад я задумался о его написании.React+Typescript реализует простое приложение для создания фильмов Douban.В процессе обновления на этот раз также находится пользовательский интерфейс (cao) экзамена (xi) видео Tencent (приложение для Mac) (видео Tencent, пожалуйста, дайте мне денег, 😄)

Посмотрим на конечный эффект

001
002
003
004

Готов к работе

Во-первых, вы должны иметь следующие базовые знания

  • Базовые знания Интернета (html, css, javascript)
  • Знание http части nodejs (построение простого веб-сервера),
  • Базовые знания об электроне (создание простой демонстрации электрона, связь между основным процессом и процессом рендеринга)

каталог проекта

Давайте сначала посмотрим на окончательную структуру каталогов.

можно использоватьtreerдля создания структуры каталогов

$ npx treer -i "/^(node_modules|dist|build|notes|\.git|\.DS_Store)$/" >tree.txt

douban-movie-electron
├─.yarnrc                                # yarn 的配置文件
├─app.config.js                          # app 的全局配置
├─main.js                                # app 的主进程
├─package.json
├─src                                    # 原有 web 项目的源码（这里忽略展开）
|  |......   
├─server                                 # api 代理服务器
|   ├─app.js
|   ├─package.json
|   └yarn.lock
├─scripts
|    ├─build.js
|    ├─start.js
|    └test.js
├─public
|   ├─favicon.ico
|   ├─index.html                         # 主窗口
|   ├─manifest.json
|   ├─play.html                          # 播放窗口
|   └renderer.js                         # 播放窗口的渲染进程
├─config
|   ├─env.js
|   ├─paths.js
|   ├─webpack.config.js
|   ├─webpackDevServer.config.js
|   ├─jest
|   |  ├─cssTransform.js
|   |  └fileTransform.js
├─assets                                 # app 的logo
|   ├─icon.png
|   └logo.png

внимание к развитию

  • Установить

Следующие зависимости пакета должны быть установлены

"devDependencies": {
    "electron": "4.1.3",              # electron 本体
    "electron-builder": "^20.40.2",   # electron 打包工具
    "nodemon": "^1.18.10"             # 监听文件，重启 node 应用
}

Загрузка электронных пакетов медленная, нужно настроить и добавить в проект файлы .npmrc или .yarnrc (если ваш проект не использует sass, адрес зеркала node-sass указывать не нужно)

.npmrc

registry=https://registry.npm.taobao.org/
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
electron_mirror=https://npm.taobao.org/mirrors/electron/

.yarnrc

registry "https://registry.npm.taobao.org/"
sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
electron_mirror "https://npm.taobao.org/mirrors/electron/"

Реновация проекта

  • Сначала напишите простое электронное демо

const { app, BrowserWindow } = require('electron')
const path = require("path");

app.on('ready', () => {
  // 新建一个窗口
  let mainWindow = new BrowserWindow({
    width: 1160,
    height: 720,
  });
  // 原有的项目开发环境下的 devServer 的端口是 3000 ，我们这里以 url 形式把原有项目加载进来
  mainWindow.loadURL('http://localhost:3000');
});
  • Затем мы настраиваемpackage.jsonСкрипт (nodemon будет прослушивать ваши изменения в файле и перезапускать электрон без необходимости запускать его каждый раз)

"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
    "server": "node server/controllers/index.js",
    "electron-dev": "nodemon --watch ./main.js --exec 'NODE_ENV=development electron .'"
}
  • Выполните следующую команду
# 并行执行
$ yarn start & yarn electron-dev
  • Поскольку это приложение, оно отличается от Интернета, поэтому нам нужно оптимизировать стиль и сначала нарисовать прототип.

Рекомендовать этот онлайн-инструмент прототипированияwhimsical.com/

yuanxing

  • Затем реализуем детали, и вы сможете увидеть следующий эффект 😂

photo-001

  • Преобразовать всплывающее окно предыдущего игрока

Также обратитесь к Tencent Video.При воспроизведении видео появится новое окно для воспроизведения.В Electorn будет создано новое окно.

new BrowserWindow({
  width: 1100,
  height: 500,
  titleBarStyle: "hiddenInset",
});

Теперь есть проблема, то есть нажмите на фильм в главном окне, чтобы открыть окно воспроизведения, то как передать информацию (например, адрес src видео), мы можем найти его из документации электрона,ipcMainа такжеipcRendererЭти два API используют их для связи между основным процессом и процессом рендеринга.

flow

Конфигурация производственной среды проекта

  • Производственная среда
    Поскольку электрон использует файловый протокол, последний запущенный нами не может быть загружен в виде URL-адреса, и преобразование выглядит следующим образом.

const { app, BrowserWindow } = require('electron')
const path = require("path");
const isProd = process.env.NODE_ENV !== "development";

app.on('ready', () => {
  // 新建一个窗口
  let mainWindow = new BrowserWindow({
    width: 1160,
    height: 720,
  });
  // 生产环境 
  if (isProd) {
    // cra 默认的打包目录是 build，我们生产环境需要这么引入
    mainWindow.loadFile(path.join(__dirname, "./build/index.html"));
  } else { // 开发环境
    mainWindow.loadURL('http://localhost:3000');
  }
});
  • Преобразование API-сервиса nodejs Нам нужно ввести файл запуска nodejs, чтобы его не нужно было запускать отдельно в производственной среде.
  1. Во-первых, мы открываем стартовое приложение nodejs.

const Koa = require("koa");
const proxy = require("koa-server-http-proxy");
const app = new Koa();

// proxy
app.use(proxy('/api', {
  target: 'http://api.douban.com/',
  changeOrigin: true,
  pathRewrite: {
    '^/api': '/v2', // 重写路径
  },
}));
app.use(proxy('/bing', {
  target: 'https://www.bing.com/',
  changeOrigin: true,
  pathRewrite: {
    '^/bing': '/', // 重写路径
  },
}));

- app.listen(server.port, () => {
-     console.log(server.url);
- });
+ module.exports=app;
  1. Затем вводим в main.js
const apiServer = require("./server/app");

// 生产环境我们直接启动 我们的 nodejs 服务
if (isProd) {
    // start api server
    apiServer.listen(server.port, () => {
        console.log(server.url);
    });
} else {  // 开发环境 我们直接启动 webpackDevServer
    // start webpack-devserver
    require("./scripts/start");
}

Пакет

Упаковка с электрон-строителем


"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
    "server": "node server/controllers/index.js",
    "electron-dev": "nodemon --watch ./main.js --exec 'NODE_ENV=development electron .'",
    "dist": "rm -rf ./dist && electron-builder"
},
// electron-builder 的配置
"build": {
    "appId": "douban-movie-electron",
    // 打包的文件目录，这样可以减少安装包大小
    "files": [  
      "package.json",
      "node_modules/**/*",
      "build/**/*",
      "assets",
      "server",
      "main.js",
      "app.config.js"
    ],
    // mac 端的打包配置下，详细配置 https://www.electron.build/configuration/mac
    "mac": {
      "category": "public.app-category.video",  mac 应用程序分类 https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/LaunchServicesKeys.html#//apple_ref/doc/uid/TP40009250-SW8
      "target": [
        "dmg"
      ],
      "icon": "./assets/icon.png"
    }
},

Выполнение заказа


$ yarn dist

Установить

Запакованный файл будет в папке dist, находим dmg файл и устанавливаем его

После завершения установки я просматриваю ее и обнаруживаю, что не удалось загрузить изображение карусели на домашней странице (404). Я проверил пути и проблем нет, но я обнаружил, что их пути имеют особенность, которую они все начинаются с file:///static (на локальное изображение ссылается относительный путь, другие файлы js css также импортируются с относительным путем, только изображение 404, странно 😂)

img-404

После нескольких неудач я наконец нашел проблему.Для React-router я использую browserRouter, который основан на api истории браузера.Измените его на hashRouter.

Время ограничено. Чтобы узнать о методах упаковки и конфигурациях для других платформ, перейдите наelectron-builderОфициальный сайт

резюме

  • В Electron нет ничего нового. React-Native, Flutter, Weex и многие другие кросс-энд фреймворки появляются один за другим, что значительно расширяет наши возможности по глубокому совершенствованию в широкой области фронтенд-компьютеров. Не забывайте о прочном фундаменте. В конце концов, три мушкетера — html, css и JavaScript — являются нашими краеугольными камнями.

  • Этот проект только для практики, времени мало, и я написал его в свободное время.Все только для ознакомления.👏Приглашаю всех зайтиgithubпоиграй со мной 😄

  • Мир 👋 Желаю всем хорошего дня завтра 😄

Отказ от ответственности: API данных Douban поступает из Интернета, вторжение и удаление, это приложение предназначено только для обучения, пожалуйста, не используйте его в коммерческих целях.
автор:github.com/Yangfan2016
Исходный код:GitHub.com/yangfan2016…
протокол:MIT

Инструменты, используемые в этой статье:
Каталог связующего дерева:treer
Схема онлайн-прототипа:whimsical
Создать логотип онлайн:xzlogo

Категории