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

一、前言

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

需求：

• 首先是可以看各种币行情的看板

• 关注的币种都不同，所以需要支持自定义交易币种

• 由于大家使用的系统不同，要支持跨平台。

二、方案和工具

方案

简单来讲就是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# winnpm run build:win

使用方法

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

点击立即创建