开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约

sharpcx / coinboardJavaScript

Watch 19 Star 29 Fork 12
加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
跨平台自定义实时行情看板 展开 收起

xiangc 最后提交于 change readme
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

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

前言

前段时间跟朋友炒币,总是需要打开交易平台才能看行情和炒币,有点麻烦,而且那个窗口也特别大,内容也很杂,所以跟我说能不能搞个跨平台的可以自己定制的行情看板。

主要工具

  • electron
  • vue
  • element-ui
  • aicoin

安装electron和vue

这个教程比较多,不过不用自己做,有这种template,参考链接,建议使用cnpm快一些尤其是electron如果用npm特别慢。

# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev

项目结构

主要文件说明

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

遇到的问题和说明

  1. 如何在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() {});
        });
    
  2. vue如何调用electronAPI

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

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

触发

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

跨平台打包

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

使用方法

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

点击立即创建

代码地址

项目点评 ( 0 )

你可以在登录后,发表评论

搜索帮助

12_float_left_people 12_float_left_close