简介 - Energy是Go基于Chromium构建Windows、Linux、MacOSX的跨平台桌面应用框架

教程-示例-文档


是Go基于Chromium构建Windows、Linux、MacOSX的跨平台桌面应用框架


Energy 使用JavaScript、HTML和CSS 构建桌面应用的框架, 是Golang基于 chromium 和 golcl 开发的框架,内嵌 chromium 二进制

可以让你使用 Web 前端技术构建在Windows, Linux, MacOS跨平台的应用

也可以使用 Energy 和 Golcl 单独构建小巧的系统UI跨平台应用程序

开发环境

只需要安装Chromium二进制框架到本机(可使用energy命令行工具自动安装,energy命令行工具安装文章后续有介绍),并配置到环境变量(ENERGY_HOME=框架根目录)

应用包环境 

只需要将编译好的Go执行程序放到Chromium框架根目录即可,无需配置环境变量。

安装包

energy 暂未提供打包管理,windows可使用msi或其它制作安装包程序,linux可使用deb,或rpm制作安装包程序, macosx 需要自己制作应用包


支持Windows 32、64, Linux 64, MacOSX 64


在Go和Web端技术中,基于IPC通信,你可以很方便的在Go和Web端交互数据,函数调用以及事件调用, 不需要Web Service接口,就像调用语言本身函数一样简单

在Go中还可以定义JS变量,提供给Web端JS使用,实现Go变量或结构对象数据同步

在Go中调用JavaScript函数,和JavaScript的监听事件

在JavaScript中调用Go函数,和Go的监听事件

开发环境 安装 

1. 安装Go环境

你需要安装 Golang 环境

2. 安装Energy环境

自动安装

使用命令行工具安装

手动安装

下载安装
你需要下载 CEF 和 Energy 框架
手动安装让你看到使用的框架文件

3. 创建应用

配置好go和energy环境后就可以创建桌面应用了

新建golang项目

package main

import (
	"github.com/energye/energy/cef"
)

func main() {
	//全局初始化 每个应用都必须调用的
	cef.GlobalCEFInit(nil, nil)
	//创建应用
	cefApp := cef.NewApplication(nil)
	//指定一个URL地址,或本地html文件目录
	cef.BrowserWindow.Config.DefaultUrl = "https://energy.yanghy.cn"
	//运行应用
	cef.Run(cefApp)
}

第一次使用会提示报错导致编译不通过。这时需要使用gomod下载依赖

energy 依赖下载

开启 gomod

go env -w GO111MODULE=on

配置代理

go env -w GOPROXY=https://mirrors.aliyun.com/goproxy,direct

拉取依赖

go mod tidy

4. 运行应用

在IDE中运行, 这个示例未在代码中指定CEF框架目录,而是通过环境变量 ENERGY_HOME 指定CEF框架目录

编译后运行, 放到CEF框架目录中可直接运行

不出意外你就会看到窗口了,更多使用方式参考 文档 和 示例

Golang编译命令

压缩并隐藏cmd窗口
go build -ldflags "-H windowsgui -s -w"
或 会压缩 不隐藏cmd窗口
go build -ldflags "-s -w"
或 不压缩 不隐藏cmd窗口
go build

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Electron是一个基于Chromium和Node.js的框架,可以帮助开发者使用Web技术(HTML,CSS,JavaScript)来构建跨平台桌面应用程序。VueCli是一个基于Vue.js的命令行工具,可以帮助开发者快速构建Vue.js项目。使用Electron7+VueCli4开发跨平台桌面应用的过程如下: 1. 安装Node.js和npm 在安装Electron和VueCli之前,需要先安装Node.js和npm。Node.js是一个基于Chrome V8引擎的JavaScript运行环境,npm是Node.js的包管理器。安装Node.js和npm可以让你在本地开发环境中运行和管理Electron和VueCli。 2. 安装Electron 在安装Electron之前,需要先创建一个空目录作为项目根目录,然后在命令行中切换到该目录下,执行以下命令: ``` npm init -y npm install electron --save-dev ``` 以上命令会创建一个package.json文件,并将Electron安装到本地项目中。 3. 创建Electron应用 在项目根目录下创建一个名为main.js的文件,这是Electron应用的主进程文件。在main.js中添加以下代码: ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载index.html文件 win.loadFile('index.html') } app.whenReady().then(() => { createWindow() }) ``` 以上代码创建了一个Electron窗口,并加载了一个名为index.html的文件。在项目根目录下创建一个名为index.html的文件,并添加以下代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html> ``` 以上代码创建了一个包含“Hello World!”文本的HTML页面。 4. 安装VueCli 在命令行中执行以下命令安装VueCli: ``` npm install -g @vue/cli ``` 以上命令会全局安装VueCli。 5. 创建Vue.js应用 在项目根目录下执行以下命令创建一个Vue.js应用: ``` vue create renderer ``` 以上命令会创建一个名为renderer的子目录,并在其中初始化一个Vue.js项目。 6. 集成Vue.js应用 在main.js中添加以下代码将Vue.js应用集成到Electron应用中: ```javascript const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, preload: path.join(__dirname, 'preload.js') // 加载preload.js文件 } }) // 加载renderer/index.html文件 win.loadFile(path.join(__dirname, 'renderer', 'dist', 'index.html')) } app.whenReady().then(() => { createWindow() }) ``` 以上代码添加了一个preload.js文件,并将Vue.js应用的入口文件设置为renderer/dist/index.html。 7. 编译Vue.js应用 在renderer目录下执行以下命令编译Vue.js应用: ``` npm run build ``` 以上命令会生成一个名为dist的子目录,并在其中包含一个编译后的Vue.js应用。 8. 运行应用 在命令行中执行以下命令启动Electron应用: ``` npm start ``` 以上命令会启动Electron应用,并在Electron窗口中显示“Hello World!”文本和一个Vue.js应用。通过Electron7+VueCli4开发跨平台桌面应用,你可以使用Web技术来构建跨平台桌面应用程序,为用户提供更好的体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yanghye

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值