Go Wails 框架构建桌面应用示例(2)-木庄网络博客

让我们通过简单地在屏幕上显示 CPU 使用值来测试它是否工作。

1 2	`wails build -d` `./cpustats`

事件

我们使用绑定将 CPU 使用值发送到前端，现在让我们尝试不同的方法，让我们在后台创建一个计时器，它将使用事件方法在后台发送 CPU 使用值。然后我们可以订阅 Javascript 中的事件。

在 Go 中，我们可以在 WailsInit 函数中实现：

func (s *Stats) WailsInit(runtime *wails.Runtime) error {
    s.log = runtime.Log.New("Stats")
 
    go func() {
        for {
            runtime.Events.Emit("cpu_usage", s.GetCPUUsage())
            time.Sleep(1 * time.Second)
        }
    }()
 
    return nil
}

在 Vue.js 中，我们可以在组件挂载(或任何其他地方)时订阅此事件：

mounted: function() {
    wails.events.on("cpu_usage", cpu_usage => {
        if (cpu_usage) {
            console.log(cpu_usage.avg);
        }
    });
}

测量条

如果使用一个测量条来显示 CPU 的使用情况就好了，因此我们将包含一个第三方依赖项，只需使用 npm 即可：

1 2	`npm install --save apexcharts` `npm install --save vue-apexcharts`

然后导入 main.js 文件:

import VueApexCharts from 'vue-apexcharts'
 
Vue.use(VueApexCharts)
Vue.component('apexchart', VueApexCharts)

现在，我们可以使用 apexcharts 显示 CPU 使用情况，并通过从后端接收事件来更新组件的值:

<template>
  <apexchart type="radialBar" :options="options" :series="series"></apexchart>
</template>
 
<script>
export default {
  data() {
    return {
      series: [0],
      options: {
        labels: ['CPU Usage']
      }
    };
  },
  mounted: function() {
    wails.events.on("cpu_usage", cpu_usage => {
      if (cpu_usage) {
        this.series = [ cpu_usage.avg ];
      }
    });
  }
};
</script>