使用wails构建桌面应用

使用wails构建桌面应用

wails 简介

‍

创建工程

wails init -n myproject -t vue-ts

添加图标

将需要的图片（png）格式，命名为appicon.png​ 并替换原有的build/appicon.png​文件。同时删除原有的build/windows/icon.ico​文件

构建应用

• 开发 wails dev​
• 编译发布 wails build​

使用简介

创建桌面应用

在脚手架生成的代码中，main.go中包含如下内容：

package main

import (
	"embed"

	"github.com/wailsapp/wails/v2"
	"github.com/wailsapp/wails/v2/pkg/options"
	"github.com/wailsapp/wails/v2/pkg/options/assetserver"
)

//go:embed all:frontend/dist
var assets embed.FS

func main() {
	// Create an instance of the app structure
	app := NewApp()

	// Create application with options
	err := wails.Run(&options.App{
		Title:  "mmpower",  // 应用的标题
		Width:  1024, // 应用的宽度
		Height: 768, // 应用的高度
		AssetServer: &assetserver.Options{
			Assets: assets, // 应用的静态资源
		},
		BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1}, // 应用的背景颜色
		OnStartup:        app.startup, // 应用启动时的回调函数
		Bind: []interface{}{
			app, // 绑定的数据和方法
		},
	})

	if err != nil {
		println("Error:", err.Error())
	}
}

前端调用go中的方法

‍

使用event实现go与js数据交互

• 在go中使用event和js交互

import (
    wailsruntime "github.com/wailsapp/wails/v2/pkg/runtime"
)

//ctx 为wails.Run传入的App结构体中OnStartup回调函数中获取的ctx
wailsruntime.EventsEmit(ctx, "data", data)

• 在js中使用event

import { EventsOn } from "../wailsjs/runtime/runtime"

  EventsOn("data", (recvData: any) => {
    console.log("recvData: ", recvData)
  })

安装element-ui组件库

• 进入前端代码目录 cd frontend​

• 通过npm安装element-plus，npm install element-plus --save​

• 在main.ts​中增加添加element引用

  • import {createApp} from 'vue'
    import App from './App.vue'
    import './style.css';
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    
    const app = createApp(App)
    
    app.use(ElementPlus)
    app.mount('#app')
    
    

安装echart组件

• 在项目中引入 npm install echarts --save​

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});