文档章节

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

sharpcx
 sharpcx
发布于 2018/05/23 17:04
字数 650
阅读 1.8K
收藏 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
粉丝 23
博文 11
码字总数 10082
作品 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

去中心不是没有中心,而是弱中心化
开源中国首席罗纳尔多
开源中国首席罗纳尔多
去中心是每个人都带一个完整的数据库吗?
比特币实时价格接收与显示代码【Swift】

在这篇文章中,我们将学习如何利用websocket开发一个可以实时接收并显示比特币/Bitcoin价格行情的Swift应用。 先看一下我们最终的成果: 比特币开发相关链接: Java比特币对接教程 C#比特币对...

ezpod
02/20
0
0
7个值得关注的区块链数据可视化工具

t在这篇文章中,我们将介绍7个顶级的数据驱动的区块链可视化工具,涵盖区块链节点/区块/交易/运营人/市场行情等各方面的数据可视化,相信你会喜欢! 区块链开发教程链接:以太坊 | 比特币 | ...

ezpod
03/27
0
0
2018-08-15日数字货币行情分析

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

币洛克
2018/08/16
0
0
Bitcoin价格行情GraphQL API封装实战【Node.js】

在这篇文章中,我们将学习如何使用Node.js开发一个比特币实时价格行情的GraphQL API。 比特币开发相关链接: c#比特币开发详解 Java比特币开发详解 PHP比特币开发详解 比特币数据分析工具 比...

ezpod
02/25
0
0
惊!老美证监会推迟比特币ETF批复的真正原因!8月2日行情解码

石破天·奇点区块·Singularity Blockchain 石破天拥有多年数字货币投资分析经验,擅长趋势把握以及短线波段投资分析。 1 谈东说西 据ZERO Hedge报道,有两位接近SEC(老美证监会)和CFTC(老...

奇点区块
2018/08/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot 如何以 Web 应用的方式启动

在 Spring Boot 启动的时候,在进程完成后会自动退出。 如何让 Spring Boot 以 Web 方式启动,并且进程不退出呢? 需要确定下 Web 的这个依赖是否在你的依赖中。 <dependency> ...

honeymoose
28分钟前
48
0
leetcode892(三维形体的表面积)--C语言实现

求: 在 N * N 的网格上,我们放置一些 1 * 1 * 1 的立方体。 每个值 v = grid[i][j] 表示 v 个正方体叠放在对应单元格 (i, j) 上。 请你返回最终形体的表面积。 示例 1: 输入:[[2]] 输出:...

拓拔北海
33分钟前
48
0
使用* args和** kwargs [重复] - Use of *args and **kwargs [duplicate]

问题: This question already has answers here : 这个问题已经在这里有了答案 : What does ** (double star/asterisk) and * (star/asterisk) do for parameters? **(双星号/星号)和*(......

技术盛宴
38分钟前
48
0
spring-boot之@ConfigurationProperties的使用

@ConfigurationProperties是什么? Using the @Value("${property}") annotation to inject configuration properties can sometimes be cumbersome, especially if you are working with mu......

书中迷梦
39分钟前
67
0
让你快速掌握_正则表达式_的技巧(二)

经过上篇的快速入门了正则表达式,今天就带你快速掌握正则表达式的技巧, 话不多说,直接上干货! 正则表达式-附录【重点】 一. 规则 规则:. 含义:代表的是某一位,可以是任何字符 例如:匹配规...

煌sir
42分钟前
49
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部