教程九 在Go中使用Energy创建跨平台GUI应用 - Go绑定变量JS调用

news2024/11/26 8:26:55

 


 

介绍

Energy Go中定义的变量、结构和函数绑定,在JS中使用。

在Energy中不只可以调用 JS 和 事件机制,也可以通过Go绑定在Go中定义的一些变量函数在JS中调用,在使用的时候就如同在JS调用本身定义的函数一样方便。

运行此示例,需要安装好Go和Energy开发环境:教程一 环境安装

此示例中采用了内置http服务访问内嵌资源: 内置http服务


使用方式

在Go中绑定使用cef.VariableBind.VariableCreateCallback变量创建初始化函数绑定,

支持类型,目前只支持 String, Integer, Boollean, Double(float64), null, undefiend, function
不支持类型 Object, Array

绑定的变量区分为通用类型和结构类型,每个类型都有自己的根对象,在window下为

结构类型: window.goobj
通用类型: window.gocobj
在应用初始化时通过ApplicationConfig对象的SetCommonRootName和SetObjectRootName设置根对象名称

字段取赋值,函数调用

在html中取值、赋值、函数调用

通用类型和结构类型取赋值方式一样,直接通过变量名

字段取值 var demoVar = goobj.demo

字段赋值 goobj.demo='新值'

函数调用 goobj.funcName(xxx,xxx)

通用类型

在绑定变量初始化函数中使用bind.NewXXXX(“name”,[初始值])
通用类型变量可任意更改变量值的类型,在GO中使用时需要类型判断,否则取值失败。
变量值存放在主进程(browser)中,与渲染进程共享。
在Go和Web中共享这些变量可直接修改

结构类型

在绑定变量初始化函数中使用bind.NewObjects(…array)进行结构类型绑定
在Go中定义的struts类型, 该类型变量类型不可更改
变量值存放在主进程(browser)中,与渲染进程共享。
在Go和Web中共享这些变量可直接修改
结构内定义的字段为绑定的字段,首字母需大写,否则绑定不成功。

函数类型

结构类型和通用类型都可定义函数,函数名需首字母大写
入参最多9个,可带有1个返回值

Go代码示例

示例中,在cef.VariableBind.VariableCreateCallback变量绑定函数中对通用类型变量和结构类型进行了绑定

通用类型,使用bind.NewXXX的方式

结构类型,使用bind.NewObjects的方式

main.go

package main

import (
	"embed"
	"fmt"
	"github.com/energye/energy/cef"
	"github.com/energye/energy/common/assetserve"
	"github.com/energye/energy/example/browser-go-bind-js-var/src"
)

//go:embed resources
var resources embed.FS

func main() {
	//全局初始化 每个应用都必须调用的
	cef.GlobalCEFInit(nil, &resources)
	//创建应用
	cefApp := cef.NewApplication(nil)
	//指定一个URL地址,或本地html文件目录
	cef.BrowserWindow.Config.DefaultUrl = "http://localhost:22022/go-bind-js-var.html"
	cef.BrowserWindow.Config.Title = "Energy - execute-javascript"
	cef.BrowserWindow.Config.Icon = "resources/icon.ico"
	//内置http服务链接安全配置
	cef.SetBrowserProcessStartAfterCallback(func(b bool) {
		fmt.Println("主进程启动 创建一个内置http服务")
		//通过内置http服务加载资源
		server := assetserve.NewAssetsHttpServer()
		server.PORT = 22022
		server.AssetsFSName = "resources" //必须设置目录名
		server.Assets = &resources
		go server.StartHttpServer()
	})
	//变量创建回调-这个函数在主进程(browser)和子进程(render)中执行
	//变量的值绑定到主进程
	cef.VariableBind.VariableCreateCallback(func(browser *cef.ICefBrowser, frame *cef.ICefFrame, bind cef.IProvisionalBindStorage) {
		//初始化要绑定的变量
		//结构类型
		src.JSStructVarDemo = &src.StructVarDemo{}
		src.JSStructVarDemo.StringField = "初始的字符串值"
		bind.NewObjects(src.JSStructVarDemo)
		//通用类型
		src.JSString = bind.NewString("JSString", "初始的字符串值")
		src.JSInt = bind.NewInteger("JSInt", 0)
		src.JSBool = bind.NewBoolean("JSBool", false)
		src.JSDouble = bind.NewDouble("JSDouble", 0.0)
		_ = bind.NewFunction("JSFunc", src.JSFunc)
	})
	//运行应用
	cef.Run(cefApp)
}

src/common-var.go

定义了通用类型变量

package src

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

var (
	JSString *cef.JSString
	JSInt    *cef.JSInteger
	JSBool   *cef.JSBoolean
	JSDouble *cef.JSDouble
)

func JSFunc(p1 string) string {
	fmt.Println("Go中执行JSFunc 参数:", p1)
	var ret string
	//类型判断
	if JSString.IsString() {
		ret = JSString.Value()
	} else if JSString.IsInteger() {
		//web js 中改变成integer类型
		intVal, _ := JSString.IntegerValue()
		ret = fmt.Sprintf("%d", intVal)
	}
	fmt.Println("JSString:", ret, "JSInt:", JSInt.Value(), "JSBool:", JSBool.Value(), "JSDouble:", JSDouble.Value())
	return p1 + " Go返回的值: " + ret
}

src/struct-var.go

定义了结构

package src

import "fmt"

var JSStructVarDemo *StructVarDemo

//定义结构类型的变量
//结构类型将属性和函数导出为JS可调用类型
//大写字母开头
type StructVarDemo struct {
	StringField   string
	IntField      int32
	BoolField     bool
	FloatField    float64
	noExportField string //小写字母无法绑定到js
}

//结构类型的函数导出
func (m *StructVarDemo) StringValue(p0 string) string {
	fmt.Println("结构类型绑定函数 StringValue 被调用 入参:", p0)
	return m.StringField + p0
}

//结构类型的函数导出
func (m *StructVarDemo) IntValue(intParam int32) int32 {
	fmt.Println("结构类型绑定函数 IntValue 被调用 入参:", intParam)
	return m.IntField + intParam
}

//定义导出函数参数最多为9个
func (m *StructVarDemo) FuncMaxParam(p1, p2, p3, p4, p5, p6, p7, p8, p9 string) {
	fmt.Println("结构类型绑定函数 FuncMaxParam 被调用 入参:", p1, p2, p3, p4, p5, p6, p7, p8, p9)
}

html代码示例

在html中直接使用根对象调用函数

通用类型 gocobj.XXX

结构类型 goobj.XXX

通用类型可任意改变值类型(所支持的类型)

结构类型不可改变值类型(只能是go中定义的类型)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>execute-go-bind-js-var</title>
    <script type="application/javascript">
        function clearMessage() {
            document.getElementById("message").innerHTML = "";
        }

        function writeMessage(data) {
            let message = document.getElementById("message");
            message.innerHTML = message.innerHTML + data + "<br>"
        }

        //通过根对象 goobj 和 gocobj 获取或设置值
        //goobj   是结构类型的根对象
        //gocobj  是通用类型的根对象

        /** 结构类型 */
        //获取Go中定义的绑定变量值
        function getGoBindVar() {
            clearMessage()
            writeMessage("结构")
            //------------------------
            //获取结构类型的字段值 string
            writeMessage("StringField: " + goobj.StructVarDemo.StringField)
            writeMessage("IntField: " + goobj.StructVarDemo.IntField)
            writeMessage("BoolField: " + goobj.StructVarDemo.BoolField)
            writeMessage("FloatField: " + goobj.StructVarDemo.FloatField)
            try {
                writeMessage("noExportField 是未导出的字段,将获取失败")
                writeMessage("noExportField: " + goobj.StructVarDemo.noExportField)
            } catch (e) {
                writeMessage("异常: " + e)
            }
        }

        //设置Go中定义的绑定变量值
        function setGoBindVar() {
            clearMessage()
            writeMessage("结构")
            //设置结构类型的字段值 string
            //注意: 结构类型的字段,设置不同类型的值将出现JS异常
            goobj.StructVarDemo.StringField = "在Web中改变后的值"
            goobj.StructVarDemo.IntField = 999999
            goobj.StructVarDemo.BoolField = true
            goobj.StructVarDemo.FloatField = 99999.9999
            try {
                writeMessage("StringField=int 不同的类型赋值将出现异常")
                //不同的类型赋值将出现异常
                goobj.StructVarDemo.StringField = 1001
            } catch (e) {
                writeMessage("异常: " + e)
            }
        }

        //调用Go中定义的函数
        function callGoBindFunc() {
            clearMessage()
            writeMessage("结构")
            //在JS中调用Go的函数
            //注意:同字段一样函数首字母只有大写才能调用
            //     入参类型必须符合Go中函数定义的参数类型, 否则调用失败, 注意的是参数个数有限制
            let ret = goobj.StructVarDemo.StringValue(' JS传的入参')
            writeMessage("调用函数 StringValue(param0 string) string: " + ret)
            goobj.StructVarDemo.FuncMaxParam('参数1', '参数2', '参数3', '参数4', '参数5', '参数6', '参数7', '参数8', '参数9')
            try {
                writeMessage("FuncMaxParam 函数和入参个数大于9个调用失败")
                //参数个数大于9个调用失败
                goobj.StructVarDemo.FuncMaxParam('参数1', '参数2', '参数3', '参数4', '参数5', '参数6', '参数7', '参数8', '参数9', '参数10')
            } catch (e) {
                writeMessage("异常: " + e)
            }
        }

        /** 普通类型 */
        //获取通用变量类型值
        function getGoBindCVar() {
            clearMessage()
            writeMessage("通用类型")
            writeMessage('JSString: ' + gocobj.JSString)
            writeMessage('JSInt: ' + gocobj.JSInt)
            writeMessage('JSBool: ' + gocobj.JSBool)
            writeMessage('JSDouble: ' + gocobj.JSDouble)
        }

        function setGoBindCVar() {
            clearMessage()
            writeMessage("通用类型")
            //通用类型可以任意修改变量存放的值类型
            gocobj.JSString = 'JS中改变了通用类型字符串值'
            writeMessage('JSString值改变: ' + gocobj.JSString)
            //改变为其它类型后,在Go中使用时需要判断类型,否则类型不一样无法正确取值
            gocobj.JSString = 99999
            writeMessage('JSString值变成了Int类型: ' + gocobj.JSString)
            //将其它变量值改变
            gocobj.JSInt = 999911
            gocobj.JSBool = true
            gocobj.JSDouble = 999999.999
        }

        function callGoBindCFunc() {
            clearMessage()
            writeMessage("通用类型")
            writeMessage('调用JSFunc函数: ' + gocobj.JSFunc('JS传入的参数'))
        }

        /** to json */
        function toJSON() {
            clearMessage()
            writeMessage("ToJSON")
            writeMessage('结构类型-JSON: ' + JSON.stringify(goobj))
            writeMessage('通用类型-JSON: ' + JSON.stringify(gocobj))
        }
    </script>
</head>
<body style="overflow: hidden;margin: 0px;padding: 0px;">
execute-go-bind-js-var:<br>
<div style="margin: 10px">
    结构类型:
    <button onclick="getGoBindVar()">获取Go中定义的绑定变量值</button>
    <button onclick="setGoBindVar()">设置Go中定义的绑定变量值</button>
    <button onclick="callGoBindFunc()">调用Go中定义的函数</button>
</div>
<div style="margin: 10px">
    通用类型:
    <button onclick="getGoBindCVar()">获取Go中定义的通用类型绑定变量值</button>
    <button onclick="setGoBindCVar()">设置Go中定义的通用类型绑定变量值</button>
    <button onclick="callGoBindCFunc()">调用Go中定义的函数</button>
</div>
<div style="margin: 10px">
    <button onclick="toJSON()">toJSON</button>
</div>
<div id="message"></div>
</body>
</html>

效果图

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/52080.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Flutter FlutterActivity找不到

Flutter FlutterActivity找不到1.大多数报错应该都是这个样子2.接下来找到我们自己安装的 flutterSDK 路径我放在下面 flutterSdk\flutter_windows_3.3.4-stable\flutter\bin\cache\artifacts\engine\android-arm 3.这个界面大家应该都很熟悉吧(这是快捷键 ctrlshiftalts) …

力扣刷题记录163.1-----684.冗余连接

目录一、题目二、代码三、运行结果一、题目 二、代码 class Solution { public://并查集 基本步骤 初始化 并 查 判断int n1001;int father[1001];//并查集初始化void init(){for(int i0;i<n;i){father[i]i;}}//并查集查找int find(int u){return ufather[u] ? u : …

AI 作画领域中的“神笔马良”是怎样炼成的?

本文由行者AI携手亚马逊云科技共同推出 刷爆朋友圈的 AIGC 是什么&#xff1f; AI Generated Content (AIGC&#xff0c;利用人工智能技术来生成内容)&#xff0c;是继专业生产内容&#xff08;PGC, Professional-generated Content&#xff09;、用户生产内容&#xff08;UGC…

万字详细总结 Promise(期约)及其方法

万字详细总结 Promise&#xff08;期约&#xff09;及其方法 ES6之前的异步编程 异步行为是 javascript 的基础操作。我们在开发的过程中往往需要执行一个操作并得到一个结果&#xff08;例如从后端请求数据&#xff09;&#xff0c;但是由于 javascript 是单线程&#xff0c…

[附源码]Python计算机毕业设计Django个性化名片网站

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

视频播放 (二) 自定义 MediaPlayer

1. 说明 1.1 使用Mediaplayer和surfaceView进行视频播放&#xff0c;并实现&#xff1a;感应生命周期、支持无缝续播、宽高比适配以及全屏模式 1.2 创建一个播放控制View&#xff0c;并以ViewModel驱动 2. 配置信息 2.1 AndroidManifest.xml 添加网络权限 <uses-permission…

Docker入门-上篇

Docker容器技术的使用&#xff0c;现在它已经不仅仅只是运维人员的专属技能了&#xff0c;对于我们开发人员同样需要具备&#xff0c;在很多中小公司中云环境的项目搭建和项目部署依然还是我们开发人员干的事&#xff0c;所以多学一门技术总是没错的。 1.Docker介绍 Docker最…

Ubuntu下解压文件(提取文件总是报错)文件是zip 格式

删除非空文件夹&#xff1a;在该目录下打开终端&#xff1a;sudo rm -r 文件夹名 回到不能解压问题&#xff08;unzip总是容易出问题&#xff09; 安装7zip&#xff1a;sudo apt-get install p7zip-full 解决办法1&#xff08;解压出来好的数据&#xff09;: 使用7z解压文件&…

附录6-JS中的一些概念

1 深拷贝与浅拷贝 在这几个地方涉及到了拷贝 23. 节点_Suyuoa的博客-CSDN博客 复制节点 node.cloneNode() 深拷贝实质上是拷贝要拷贝的对象自身&#xff0c;浅拷贝实质上是对要拷贝对象的引用。 当你浅拷贝复制A为B的时候&#xff0c;改动B会给A造成影响 当你深拷贝复制A…

极速Go语言入门(超全超详细)-进阶篇

基础篇可访问此链接: 基础篇1:https://blog.csdn.net/asd1358355022/article/details/127905011?spm1001.2014.3001.5501 基础篇2:https://blog.csdn.net/asd1358355022/article/details/128039005?spm1001.2014.3001.5501 文章目录GO语言类型断言文件操作打开、关闭、读取文…

第二证券|券商12月金股出炉!多只地产股成热门,科创仍是中长期主线

跟着券商12月金股战略陈述连续出炉&#xff0c;主流组织的配备风向也浮出水面。 到券商我国记者发稿时&#xff0c;已有10多家券商发布12月金股战略陈述&#xff0c;从职业散布来看&#xff0c;信息技术、工业范畴的金股数量最多&#xff0c;其次是材料、可选消费、医疗。值得一…

前端二倍图

物理像素&物理像素比&#xff1a; 物理像素点指的是屏幕显示的最小颗粒&#xff0c;是物理真实存在的&#xff0c;这是厂商在出厂时设置好了我们开发时候1px不是一定等于1个物理像素的Pc端页面&#xff0c;1px等于1个物理像素点&#xff0c;但是移动端就不尽相同一个px能显…

打包发布自己的app

创建自己的app 一、 安装HBuilderX 二、 引入代码&#xff0c;引入组件 三、 配置app信息 四、 云打包 1、第一步 2、第二步 3、证书创建是用的jdk8创建的&#xff0c;软件里带教程&#xff0c;也可以用公共测试证书。 五、打出的包是apk文件&#xff0c;配合我的搭建网…

ROG幻15电脑开机自动安装软件怎么U盘重装系统

ROG幻15电脑开机自动安装软件怎么U盘重装系统。今天和大家一起来分享如何解决ROG幻15电脑开机的时候会自动安装软件的问题。用户反馈开机之后自动后台安装很多软件&#xff0c;导致无法操作卡死。这个情况我们可以使用U盘来重装一些系统&#xff0c;这样就可以解决问题&#xf…

(二)正则表达式——捕获

&#xff08;二&#xff09;正则表达式——捕获 正则捕获的懒惰性 实现正则捕获的方法&#xff1a;exec exec返回的结果&#xff1a; 懒惰性 这就是正则捕获的懒惰性&#xff1a;默认只捕获第1个 lastIndex&#xff1a;下次匹配的开始位置 懒惰的原因&#xff1a;默认lastIndex…

视频播放 (一) VideoView的使用

1. 配置参数 1.1 AndroidManifest.xml 文件添加网络权限 <uses-permission android:name"android.permission.INTERNET" /> 1.2 http 明文请求设置 android:usesCleartextTraffic"true" 1.3 activity 配置屏幕变化&#xff0c;不重新加载 Activity …

多数据中心多活相关知识

Cell&#xff1a;业务可封闭收敛最小执行分片&#xff1b;业务对请求空间按一定维度&#xff08;比如会员、门店等&#xff09;划分分片。 LDC&#xff1a;逻辑数据中心&#xff0c;是由多个业务可封闭 cell 组成的集合单元&#xff0c;拥有独立的基础中间件系统&#xff08;包…

树莓派4b通过docker安装部署jenkins

借鉴&#xff1a;https://blog.csdn.net/wz_coming/article/details/113523610 树莓派的docker安装及其他操作请看&#xff1a;https://blog.csdn.net/weixin_44578029/article/details/127987795 前言 我的环境是树莓派4b&#xff0c;安装的官方64 debian11系统 arm架构 4h…

[附源码]SSM计算机毕业设计疫情状态下病房管理平台JAVA

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

Kafka第一讲:应用场景及架构设计详解

本节是Kafka专题第一篇&#xff0c;主要介绍Kafka的发展历史、应用场景以及Kafka的基本架构&#xff0c;后续还会对Kafka的生产者、Broker、消费者、集群做详细讲解&#xff0c;敬请期待。 1.kafka的发展历史及应用场景 1.1kafka的定位 可以实现如下功能&#xff1a; 1.2为什…