文档章节

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

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

去中心不是没有中心,而是弱中心化
开源中国首席罗纳尔多
开源中国首席罗纳尔多
去中心是每个人都带一个完整的数据库吗?
比特币熊市来了,区块链牛市还有多远

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

每日区块先知
2018/06/26
0
0
比特币行情冲高回落,等跨过期货交易割日这个槛后再创高峰|Ebit解析

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

易比区块链
2018/07/26
0
0
数字货币熊市是否见底,行情趋势如和发展?币市小姐姐是这样分析的

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

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

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

ACE_cfe7
2018/08/02
0
0
淘宝网禁售比特币等虚拟货币及软件教程

淘宝网发布公告,宣布将于1月14日起全面禁售比特币及相关产品,包括: 1) 比特币、莱特币、比奥币、夸克币、无限币、可可币、便士币、PPCoin、NameCoin等虚拟币; 2) 比特币挖矿教程等虚拟币...

oschina
2014/01/09
3.6K
55

没有更多内容

加载失败,请刷新页面

加载更多

a标签点击浏览器下载图片,不打开

网上好多给a标签加download属性的,但都不好使。 <!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Auth......

S三少S
7分钟前
14
0
搭建私有maven仓库并在项目中使用

这是一篇写给女朋友看的教程...前方高能,注意避让~ 1.私有maven仓库的搭建 搭建环境为阿里云ESC服务器,CentOS.确保服务器已经安装Jdk。然后我要手把手教你安装和启动nexus。 Step1:新建一个...

liululee
10分钟前
1
0
js 写文件

//写文件function doSave(value, type, name) {    var blob;    if (typeof window.Blob == "function") {        blob = new Blob([value], {type: type});    }......

重城重楼
19分钟前
1
0
Ubuntu and Apache 搭建 Let's Encrypt SSL Https

本文参考来着来自https://www.howtoing.com/install-free-lets-encrypt-ssl-certificate-for-apache-on-debian-and-ubuntu 感谢作者的分享 本事例环境介绍 ubuntu (Version 16.04.1 LTS) ubu......

罗培海
23分钟前
16
0
如何优雅的使用RabbitMQ

目录 RabbitMQ无疑是目前最流行的消息队列之一,对各种语言环境的支持也很丰富,作为一个.NET developer有必要学习和了解这一工具。消息队列的使用场景大概有3种: 1、系统集成,分布式系统的...

编程SHA
26分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部