数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

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

来源:用户博客  责任编辑:小易  




前言


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


主要工具



  • 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

使用方法


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



点击立即创建


代码地址








? 著作权归作者所有


  • 本文相关:
  • 站长必读,如何真正写好一篇原创文章
  • 互联网之路细嗅蔷薇 资深站长分享掘金之道
  • 企业站的站长的工作重心究竟有哪些
  • 浅析:行业门户网站的一些盈利模式
  • 3000IP的企业网站每天订单不到30个的苦恼
  • 网站想内外兼修?先学习提高网站可用性的6大原则
  • 浅谈网页设计中的简约之美
  • 网页改版实战:日本设计师如何彻底优化旅游网站?
  • 网页改版实战!日本设计师如何彻底优化招聘网站?
  • 2015年值得关注的21个网页设计趋势
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved