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

所以需要一个简洁的看板。不会用elctron，vue，element-ui？然后使用上面的动态加载js脚本方式导入即可跨平台打包#macnpmrunbuild:mac#winnpmrunbuild:win使用方法npmrundev然后去aicoin选择自己想看的币和平台，然后粘贴右面币列表代码点击立即创建

一、前言

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

需求：

二、方案和工具

方案

简单来讲就是electron套个aicoin插件

分三步:

主要工具

三、项目结构

主要文件说明

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选择自己想看的币和平台，然后粘贴右面币列表代码

点击立即创建