本示例仅是个人学习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
文章为作者独立观点，不代表股票交易接口观点