Кросс-платформенная система для создания пользовательских реальных торговых панелей

Введение

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

Основные инструменты

• electron
• vue
• element-ui
• aicoin

Установка electron и vue

Инструкций по установке достаточно много, но вы можете воспользоваться готовыми шаблонами, например этот. Для более быстрой установки рекомендую использовать cnpm, особенно если вы работаете с electron, так как npm может работать очень медленно в этом случае.

# Установите vue-cli и скелет вашего проекта
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# Установите зависимости и запустите ваш проект
cd my-project
yarn # или npm install
yarn run dev # или npm run dev

Структура проекта

Описание основных файлов

• MainPage используется для конфигурации типов валют, которые будут отображены
• ShowPage — это сама торговая панель
• aicoin — это локально скачанный скрипт aicoin, который требует доступа через прокси, поэтому его следует скачать заранее
• showcoin — это скрипт, который отвечает за отображение данных.#### Проблемы и объяснения

1. Как импортировать обычные JS-скрипты в Vue? Поскольку скрипт aicoin является обычным JS-скриптом, он не может быть импортирован напрямую. Здесь используется динамическое создание HTML-тегов для его импорта. Есть два небольших вопроса: 1) как импортировать, 2) как контролировать порядок импорта.

   Как импортировать

       let loadScript = function(url, callback) {
         var script = document.createElement("script");
         script.type = "text/javascript";
   
         if (script.readyState) {
           // IE
           script.onreadystatechange = function() {
             if (
               script.readyState === "loaded" ||
               script.readyState === "complete"
             ) {
               script.onreadystatechange = null;
               callback();
             }
           };
         } else {
           // Другие браузеры
           script.onload = function() {
             callback();
           };
         }
   
         script.src = url;
         document.getElementsByTagName("head")[0].appendChild(script);
       };

   Как контролировать порядок импорта

       loadScript("./static/aicoin.js", function() {
         loadScript("./static/showcoin.js", function() {});
       });

2. Как вызвать API электронной системы из Vue? Электрон использует IPC для связи между главным и отображаемым процессами Регистрация событий

ipcMain.on('resizeWindow', (event, arg) => {
  mainWindow.setSize(arg.width, arg.height)
})

Инициация

ipcRenderer.send("resizeWindow",  {width:1000, height:(dataitems.length+2)*34+38+30});

Кросс-платформенная сборка

# для macOS
npm run build:mac
# для Windows
npm run build:win
```#### Использование
Запустите `npm run dev`, затем перейдите на [aicoin](https://www.aicoin.net.cn/widgets/markets) и выберите нужные вам монеты и платформы, после чего скопируйте код с правой стороны списка монет  
![](media/15269811750411/15270646648479.jpg)
  
![](media/15269811750411/15270646958166.jpg)Нажмите "Создать сразу"  
![](media/15269811750411/15270647115421.jpg)


#### Код адреса()