自定义跨平台比特币实时行情看板

一、前言

前段时间跟朋友炒币，总是需要打开交易平台才能看行情，有点麻烦，而且那个窗口也特别大，内容也很杂。所以需要一个简洁的看板。下面是需求。

需求：

• 首先是可以看各种币行情的看板
• 关注的币种都不同，所以需要支持自定义交易币种
• 由于大家使用的系统不同，要支持跨平台。

二、方案和工具

方案

简单来讲就是electron套个aicoin插件
分三步:

• 用vue来做个设置页面
• 用vue做个看板页面，把aicoin套到vue里
• 用vue-router组合起来放到electron里

主要工具

• electron
• vue
• element-ui
• aicoin

三、项目结构

主要文件说明

• MainPage用来配置要显示的货币类型
• ShowPage是看板页面
• aicoin是下载到本地的aicoin脚本，因为要翻墙所以先下好
• showcoin是具体显示数据的脚本。

electron和vue安装

这个教程比较多,参考链接，install的时候，建议使用cnpm快一些尤其是electron如果用npm特别慢。

不会用elctron，vue，element-ui？

自己找一下官方文档吧，找对版本哈~

四、遇到的问题和说明

如何在vue中导入非npm js脚本

由于aicoin脚本为普通js脚本不能直接import所以这里使用动态 html tag的方式来导入，有两个小问题：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 {
    //Others
    script.onload = function() {
      callback();
    };
  }

  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
};

如何控制导入顺序

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

Electron展示线程和主线程如何通信

electron分主线程和展示线程通过事件方式进行通信
注册事件

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

触发

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

如何避免aicoin脚本被打到bundle里

我看了一下打包脚本，其中静态内容是这样打包的：

new CopyWebpackPlugin([
      {
        from: path.join(__dirname, '../static'),
        to: path.join(__dirname, '../dist/web/static'),
        ignore: ['.*']
      }
    ]),

所以可以把不希望打到bundle里的js放到根目录的static下面。然后使用上面的动态加载js脚本方式导入即可

跨平台打包

#  mac
npm run build:mac
# win
npm run build:win

使用方法

npm run dev然后去aicoin选择自己想看的币和平台，然后粘贴右面币列表代码

点击立即创建

代码地址