量化接口-go wails桌面应用开发股票数据接口调用

本示例仅是个人学习wails的demo,仅供学习使用，文末源代码下载地址：

前期准备：

walis

npm

股票数据API--Key获取

源代码块

股票数据布局和股票代码初始化：

初始化股票代码列表获取接口请求Key,并配置引入股票数据组件模块

单个股票数据展示组件：

通过接口获取股票交易数据信息，以及趋势k通过setInterval定时器，定时查询数据可控制交易K线是否显示


<script>
import {GetStockInfo} from "../../wailsjs/go/main/App"
export default {
  data() {
    return {
      stockInfo:[],
      addable :true,
      dataTime:"",
      appKey:"",
      timer:null,
      hasData:false,
      showImg:false,
      apiErr:false,
    }
  },
  props:{
    stockCode:{
      type:Object,
      required:true,
    }
  },
  mounted(){
    console.log("child - mounted")
    this.getStorckInfo()
    setTimeout(()=>{
      if(!this.apiErr){
        this.setIntervalStock();
      }
    },300)
  },
  created(){
    console.log("child - created")

  },
  methods:{
    appkeyError(){
      this.$emit("set-api-disable", false)
    },
    getStorckInfo() {
      this.dataTime=this.getDateTimeStr();
      console.log("当前时间",this.dataTime)
      const stockCode = this.stockCode.code

      // 接口出错，取消定时任务
      if(this.apiErr && this.timer){
        console.log("可以清除定时任务了：",this.apiErr ,this.timer)
        clearInterval(this.timer)
      }

      // 获取接口信息
      GetStockInfo(stockCode).then(result => {
        if(result.error_code !== 0) {
          if(result.error_code === 10012){
            this.$message.error("接口请求次数超限，如需无限制，请升级黑钻会员")
          }else {
            this.$message.error(result.reason)
          }
          if(result.error_code > 10000 && result.error_code < 10021) {
            this.apiErr = true;
            this.appkeyError()
          }
          console.log(result)
        } else {
          this.stockInfo = result
          this.hasData=true
          console.log("stockInfo",result)
        }

      });

    },
    setIntervalStock(){
      const stockCode = this.stockCode.code
      // 判断是否有定时器，有就清空
      if(this.timer){
        clearInterval(this.timer)
      }
      // 设置定时器
      console.log("开始设置定时器....",stockCode)
      this.timer = setInterval(()=>{
          this.getStorckInfo()
        },10000)

        console.log("设置定时器结束....",this.timer)

    },
    changeImageShow(){

    },
    getDateTimeStr(){
      Date.prototype.format = function(fmt)
      {
        var o = {
            "M+" : this.getMonth()+1, //月份
            "d+" : this.getDate(), //日
            "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时
            "H+" : this.getHours(), //小时
            "m+" : this.getMinutes(), //分
            "s+" : this.getSeconds(), //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S" : this.getMilliseconds() //毫秒
          };
          if(/(y+)/.test(fmt))
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
          for(var k in o)
            if(new RegExp("("+ k +")").test(fmt))
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
          return fmt;
      }
      return new Date().format("yyyy-MM-dd HH:mm:ss");
    }
}

}
</script>


<template>
  <p  class="main-child" >
    <el-container style="display:block">
      <el-header>{{stockCode.name}}({{ stockCode.code }}) - {{ dataTime }} |  <el-switch v-model="showImg" active-text="显示" inactive-text="隐藏" @change="changeImageShow">
</el-switch>
</el-header>
      <el-main>
        <p  v-if="hasData" class="table">
          <table>
            <tr>
              <th>名称</th>
              <th>当前价格</th>
              <th>涨量</th>
              <th>涨幅(%)</th>
              <th>成交额(万)</th>
              <th>成交量</th>
            </tr>
            <tr>
              <td>{{ stockInfo.result.daPan.name}}</td>
              <td>{{ stockInfo.result.daPan.dot}}</td>
              <td>{{ stockInfo.result.daPan.nowPic}}</td>
              <td>{{ stockInfo.result.daPan.rate}}</td>
              <td>{{ stockInfo.result.daPan.traAmount}}</td>
              <td>{{ stockInfo.result.daPan.traNumber}}</td>
            </tr>
          </table>
        </p>
        <p  v-if="showImg && hasData" class="images">
          <h4>趋势图</h4>
          </images/defaultpic.gif v-for="(/images/defaultpic.gif ,id) in stockInfo.result.images" :key="id" :src="/images/defaultpic.gif"/>
        </p>

      </el-main>

    </el-container>


  </p>
</template>

<style scoped>

.main-child{
  background-color: white;
  color: black;
}
.main-child  .table table{
  width: 100%;
}
.main-child  .images /images/defaultpic.gif{
}
.el-header {
    background-color: #b3c0d1;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 60px;
  }
</style>

最终应用展示：

源码下载

示例源码下载

提取码：988i

文章为作者独立观点，不代表股票程序化软件自动交易接口观点