所以需要一个简洁的看板。不会用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选择自己想看的币和平台,然后粘贴右面币列表代码
点击立即创建