文档章节

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

sharpcx
 sharpcx
发布于 05/23 17:04
字数 650
阅读 1425
收藏 29

一、前言

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

需求:

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

二、方案和工具

方案

简单来讲就是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选择自己想看的币和平台,然后粘贴右面币列表代码

点击立即创建

代码地址

© 著作权归作者所有

共有 人打赏支持
sharpcx
粉丝 3
博文 5
码字总数 2748
作品 0
海淀
程序员
私信 提问
加载中

评论(22)

sharpcx
sharpcx

引用来自“绿林军”的评论

谷歌插件了解一下https://chrome.google.com/webstore/detail/aicoin-%E5%AE%9E%E6%97%B6%E8%A1%8C%E6%83%85%E6%89%A9%E5%B1%95/lhgicccdgiejdgelflccbepkghocaakn?hl=zh-CN

@绿林军 对其实我就是套了一下,后面会在这个基础上加功能
绿林军
绿林军
谷歌插件了解一下https://chrome.google.com/webstore/detail/aicoin-%E5%AE%9E%E6%97%B6%E8%A1%8C%E6%83%85%E6%89%A9%E5%B1%95/lhgicccdgiejdgelflccbepkghocaakn?hl=zh-CN
sharpcx
sharpcx

引用来自“久永”的评论

引用来自“sharpcx”的评论

引用来自“久永”的评论

引用来自“sharpcx”的评论

引用来自“久永”的评论

演示地址在哪里?

@久永 过几天有空了我打几个包出来吧,这几天有点忙,哈哈哈

回复@sharpcx : 直接做个网站,给大家用得了~
嗯,等有空的~我做个网站~

回复@sharpcx : 记得@我们这些关注者
嗯,好滴~小众小众~
久永
久永

引用来自“sharpcx”的评论

引用来自“久永”的评论

引用来自“sharpcx”的评论

引用来自“久永”的评论

演示地址在哪里?

@久永 过几天有空了我打几个包出来吧,这几天有点忙,哈哈哈

回复@sharpcx : 直接做个网站,给大家用得了~
嗯,等有空的~我做个网站~

回复@sharpcx : 记得@我们这些关注者
sharpcx
sharpcx

引用来自“久永”的评论

引用来自“sharpcx”的评论

引用来自“久永”的评论

演示地址在哪里?

@久永 过几天有空了我打几个包出来吧,这几天有点忙,哈哈哈

回复@sharpcx : 直接做个网站,给大家用得了~
嗯,等有空的~我做个网站~
久永
久永

引用来自“sharpcx”的评论

引用来自“久永”的评论

演示地址在哪里?

@久永 过几天有空了我打几个包出来吧,这几天有点忙,哈哈哈

回复@sharpcx : 直接做个网站,给大家用得了~
sharpcx
sharpcx

引用来自“久永”的评论

演示地址在哪里?

@久永 过几天有空了我打几个包出来吧,这几天有点忙,哈哈哈
久永
久永
演示地址在哪里?
ht896632
ht896632

引用来自“sharpcx”的评论

引用来自“开源中国首席睡觉专家”的评论

去中心是每个人都带一个完整的数据库吗?

@开源中国首席睡觉专家 localstorage

去中心不是没有中心,而是弱中心化
开源中国首席罗纳尔多
开源中国首席罗纳尔多
去中心是每个人都带一个完整的数据库吗?
比特币行情冲高回落,等跨过期货交易割日这个槛后再创高峰|Ebit解析

彭博日文版昨日发了一有趣的文章,称比特币似乎是中国股市提前六天的“领先指标”。看来A股是弱到要比特币来带一带节奏啊!回顾过去一年,投资比特币的回报率明显好过A股,老是被质疑要归零的...

易比区块链
07/26
0
0
比特币熊市来了,区块链牛市还有多远

比特币竟然破了今年的新低,最低达到了5760美元,刺激不刺激。 数字货币市场就是一个资本的战场,经过一轮又一轮的战争,有的人越来越富有,有的人越来越贫穷。 平台币随着热潮退去,再加上比...

每日区块先知
06/26
0
0
数字货币熊市是否见底,行情趋势如和发展?币市小姐姐是这样分析的

上一篇文章「熊市生存策略」之后,很多粉丝留言对如何判断熊市所处的阶段,后续是否还会继续探底等等这些问题非常关心。 理性的预测是基于分析的,而分析又要基于很多相关要素,而这些要素又...

币市小姐姐
09/02
0
0
本轮币市暴涨暴跌的幕后推手是谁,比特币ETF有什么背景

比特币自进入7月以来,受比特币ETF预期推出的消息影响,走出了一波波澜壮阔的行情,比特币价格在不到一个月的时间里从5800暴涨至最高接近8500点,涨幅达46%,然后8月1日跌到7400点后上扬,创...

ACE_cfe7
08/02
0
0
2018-08-15日数字货币行情分析

行情分析 比特币: 昨天放量拉出了下影线,今日出现缩量的反弹行情,空头的持续打压让一些人把筹码割在了6000附近,昨天狂人也给大家讲过,如果比特币能够持续下跌,放量跌破5800,那么将会加...

币洛克
08/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(7.6)shell脚本定时采集日志数据到hdfs

上一篇博客博主分享了hadoop内置rpc的使用案例,本节博主将为小伙伴们分享一个在实际生产中使用的日志搜集案例。前面的文章我们有讲到过用户点击流日志分析的流程,本节就是要完成这个分析流...

em_aaron
3分钟前
0
0
wave和pcm互转

wav->pcm pcm->wav c#代码: using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.IO;using Sys......

whoisliang
6分钟前
0
0
Win10:默认的图片打开应用,打开图片时速度明显很慢的解决办法

首先,我们随便地打开一张图片。然后,点击右上角的三个小点,最后点击弹出菜单最下面的“设置”。如下图: 在“设置”中找到下面的“人物”,把它关掉就好了。 原来,默认情况下,Win 10的图...

LivingInFHL
今天
3
0
js代码激发onchange事件,兼容谷歌火狐IE

var el = document.getElementsByName('role')[0]; el.value = '3'; var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); el.dispatchEvent(evt);......

我退而结网
今天
4
0
mysql客户端报错:libmysqlclient_16 not defined in file libmysqlclient.so.16

报错情况: 安装完mydumper之后(上一篇文章),登陆Mysql客户端报错:version libmysqlclient_16 not defined in file libmysqlclient.so.16 with link time reference 同样:mysql的其他客...

machogyb
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部