[English](README.md) · [Simplified Chinese](README.zh-Hans.md)

Window Designer

666

This is a simple and easy-to-use visual interface design tool, developed in Go language using the Wails framework, supporting systems like Windows, MacOS, Linux, etc.

Main Repository: https://github.com/duolabmeng6/GoEasyDesigner

Mirror Repository: https://gitee.com/duolabmeng666/go-easy-designer

Project Progress:

The project is in active development. Front-end experts are welcome to contribute PRs.

Completed tasks:

[x] Cross-platform compatibility: Supports Windows, MacOS, and Linux systems.
[x] Interface design and functionality development: Completed overall layout design, functional process design, interface drawing, property modification, component dragging, double-clicking components to jump to corresponding event functions, and other core features.
[x] Intelligent code editor: Implemented the Chinese character initial letter input reminder function for the code editing box, enhancing coding efficiency.
[x] goefun library Chinese function library support: Developing using Chinese functions in Golang.
[x] Component library: Completed development of components like buttons, text boxes, labels, switches, radio buttons, checkboxes, common layouts, flex layouts, tree boxes, menus, tables, progress bars, file selectors, and more.
[x] Custom component support: Allows the creation of custom components, such as login boxes, for rapid application development.
[x] Integrated development environment: Provided a one-click environment setup package, simplifying the construction of the development environment.
[x] Multilingual support: The application supports multiple languages including Chinese and English.

Tasks to be completed:

[ ] jsefun library support: Planned and awaiting development.
[ ] Component library enhancement: Ongoing, further improvement of element-plus components.
[ ] Support for ElectronJS: Planned, will support ElectronJS as backend technology.
[ ] Custom cloud components: Users will be able to upload their templates for others to use.

Online Experience

Thanks to a friend's server, you can now enjoy an online experience.

International address: https://go-easy-designer.vercel.app

Download Window Running Project, during online experience, design the interface in the browser and save. Two files will be downloaded: design.json, __aux_code.js. Make sure your browser allows downloading multiple files, and place the design files in the specified location.

Video Tutorial: 10 Minutes to Get Started

Video Tutorial: 3 Minutes to Learn Custom Component Packaging

Environment Installation

Method 1

1. Install Node.js Development Environment

Node.js Download Page Version 18 or above

Domestic mirror: npm install -g cnpm --registry=http://registry.npmmirror.com

Install Vite: npm install vite@latest

2. Install Go Language Development Environment

Go Language Download Page Any version

Install Wails Wails Framework Documentation

Domestic mirror execution: go env -w GOPROXY=https://goproxy.cn,direct

go install github.com/wailsapp/wails/v2/cmd/wails@latest

After successful installation, run the Wails command. If there is content output, it means successful installation.

Method 2: Windows Complete Running Environment Package Download

Xiaofeiji Cloud Disk Download Address, No Login Required

Download GoEasyDesigner.2023.12.6.Including Running Environment.zip and unzip.

`env_soft.

7zRunning environment package includesgoandnode. Unzip and findOne-Click Environment Configuration.exe`, run as administrator.

If installation is successful, you can directly open GoEasyDesigner.exe.

If not configured successfully, add environment variables to the system's PATH. After adding, run One-Click Environment Configuration.exe.

C:\GoEasyDesigner\env_soft\go1.21.4\bin
C:\GoEasyDesigner\env_soft\go1.21.4\AppData\bin
C:\GoEasyDesigner\env_soft\node-v20.9.0-win-x64

go-easy-demo folder is a sample project.

Open go-easy-demo\frontend\src\win\design.json with Window Designer to design the interface or run and compile the project.

Open the go-easy-demo folder with Goland IDE to start coding.

Project Creation

Create Window Running Project

This project is for window running, your code will also be written here.

Create a project:

wails init -n "go-easy-demo" -t https://github.com/duolabmeng6/wails-template-vue-go-easy

Run window:

cd go-easy-demo
wails dev

Compile into executable file:

cd go-easy-demo
wails build

Front-end only debugging:

cd go-easy-demo/frontend
npm run dev

Usage Instructions

Download GoEasyDesigner

Download the latest version: https://github.com/duolabmeng6/GoEasyDesigner/releases

Interface design file location:

go-easy-demo/frontend/src/win/design.json

Webstorm IDE Code Jump Plugin

To experience double-clicking components in the IDE to automatically jump to the corresponding function, install the QtEasyDesigner plugin in Webstorm. In this project's files,

After installation, right-click in the IDE editor and select Configure QtEasyDesigner.

macOS path:

/Applications/GoEasyDesigner.app/Contents/MacOS/GoEasyDesigner

Windows path:

C:\GoEasyDesigner\GoEasyDesigner.exe

For subsequent use, open design.json in the editor, right-click and select Open QtEasyDesigner. The interface will appear.

JS code uses Webstorm IDE. Most coding should be done in JS. Use Go code only if JS cannot achieve the desired functionality. Go code is written in Goland IDE, typically in app.go.

For Window Designer Development

For debugging in the IDE, you need the following configuration:

Build package changeme.

Working directory /Users/ll/Documents/GitHub/GoEasyDesigner/GoEasyDesigner change to your path.

Environment variable CGO_LDFLAGS=-framework UniformTypeIdentifiers is needed for macOS, not for Windows.

Go tool arguments -tags dev -gcflags "all=-N -l".

Program arguments (optional) File Path=/Users/ll/Documents/GitHub/GoEasyDesigner/go-easy-demo/frontend/src/win/design.json port=8080 This is to work with the IDE plugin, where port is the plugin's port.

Now you can debug with breakpoints in app.go.

go-easy-demo is a template project

Interface data location:

go-easy-demo/frontend/src/win/design.json

Run to see the effects:

cd go-easy-demo
wails dev

Window Designer Development Cases

Duoduo Projection Screen Easily project video files from MacOS and Windows to TV, similar to mobile phone screen projection, no need for NAS or other cumbersome operations. Direct file projection.

Contribution

The contributor list is too large for the README file! All the outstanding individuals who have contributed to this project can be found here Contributor List. We will create a page later.

License

This project is licensed under the GNU Lesser General Public License (LGPL) Version 3. For detailed information, please refer to the license file.

Learning and Exchange

QQ Group: 927427009

duolabmeng6 / GoEasyDesigner

readme