CreateByLayoutEle

README

CreateByLayoutEle - 布局元素中创建WebView综合示例

本文由 AI 生成

项目简介

CreateByLayoutEle 是最全面、最复杂的 WebView2 集成示例，展示了在布局元素中创建 WebView 的完整解决方案。该示例包含了 WebView2 的几乎所有功能特性，包括事件处理、JavaScript交互、资源管理、截图保存、PDF导出等高级功能，是学习 WebView2 高级开发的重要参考。

功能特性

核心功能

• 布局元素集成: 在XCGUI布局元素中创建WebView实例
• 完整的浏览器功能: 前进、后退、刷新、地址栏导航
• JavaScript交互: Go函数与JavaScript的双向调用
• WebView生命周期管理: 创建、销毁、挂起、恢复等完整生命周期

高级功能

• 截图功能: 将WebView内容截图并保存为PNG文件
• PDF导出: 将当前页面导出为PDF文档
• 网页保存: 使用"另存为"功能保存完整网页
• 任务管理器: 打开WebView2的内置任务管理器
• 静音控制: 控制WebView的音频播放

事件系统

• 全面的事件覆盖: 支持30+种WebView2事件
• 事件开关管理: 可视化的事件启用/禁用控制面板
• 动态配置: 事件配置可持久化保存

调试与开发

• JavaScript代码测试: 内置JavaScript代码执行器
• 网络请求监控: 监控和拦截网络请求
• 开发者工具: 完整的调试工具支持
• 错误回调: 全局WebView错误处理机制

项目结构

CreateByLayoutEle/
├── CreateByLayoutEle.go     # 主程序文件（1400+行代码）
├── event.switch.json        # 事件开关配置文件
├── 1.jpg, 2.jpg, 3.jpg     # 窗口界面展示图片
├── res/                     # 资源文件目录
│   ├── main.xml            # 主窗口布局文件
│   ├── player.html         # 本地视频播放页面
│   ├── title.png           # 窗口标题图标
│   ├── resource.res        # 资源包文件
│   └── CreateByLayoutEle.xcproj # 炫彩设计器项目文件
└── README.md               # 本文档

技术实现

技术栈

• Go 语言: 主要编程语言
• XCGUI: 炫彩界面库，提供完整的GUI框架
• WebView2: Microsoft Edge 内核
• JSON: 配置文件存储格式

关键技术特性

1. 布局元素集成

// 获取布局元素作为WebView容器
layoutWV := widget.NewLayoutEleByName("布局WV")

// 在布局元素中创建WebView
wv, err := edg.NewWebView(layoutWV.Handle, 
    edge.WithFillParent(true),
    edge.WithDebug(true),
)

2. 全局错误处理

// 设置全局WebView错误回调
edge.SetErrorCallback(func(err *edge.WebViewError) {
    if isDubug {
        log.Println(err.ErrorWithFile())
    } else {
        log.Println(err.ErrorWithFullName())
    }
})

3. 环境选项配置

// 媒体自动播放配置
sb.WriteString("--autoplay-policy=no-user-gesture-required ")
sb.WriteString("--disable-features=PreloadMediaEngagementData,MediaEngagementBypassAutoplayPolicies ")
sb.WriteString("--enable-features=AutoplayIgnoreWebAudio")
envOpts.SetAdditionalBrowserArguments(sb.String())

4. 生命周期管理

// WebView挂起机制
suspendTimer = time.AfterFunc(suspendTime, func() {
    xc.XC_CallUT(func() {
        wv.Show(false)
        wv.TrySuspend(func(errorCode syscall.Errno, isSuccessful bool) uintptr {
            // 挂起完成处理
            return 0
        })
    })
})

主要功能模块

1. 浏览器控制模块

• 前进/后退: 浏览器导航控制
• 刷新: 页面重新加载
• 地址栏: 支持URL输入和回车导航
• 显示/隐藏: 动态控制WebView可见性

2. JavaScript交互模块

// 绑定Go函数供JavaScript调用
wv.Bind("goAddStr", func(str string, num int) string {
    return "传进Go函数 goAddStr 的参数: " + str + ", " + strconv.Itoa(num)
})

// JavaScript代码执行器
wv.EvalAsync(code, func(errorCode syscall.Errno, result string) uintptr {
    // 处理JavaScript执行结果
    return 0
})

3. 文件操作模块

// 截图功能
wv.CapturePreview(edge.COREWEBVIEW2_CAPTURE_PREVIEW_IMAGE_FORMAT_PNG, stream, 
    func(errorCode syscall.Errno) uintptr {
        // 截图完成处理
        return 0
    })

// PDF导出功能
wv.WebView2_7.PrintToPdfEx(wv.GetWebViewEventImpl(), savePath, printSettings,
    func(errorCode syscall.Errno, isSuccessful bool) uintptr {
        // PDF导出完成处理
        return 0
    })

4. 事件管理系统

// 事件开关配置
var eventSwitch = make(map[string]bool)

// 事件处理示例
wv.Event_NavigationStarting(func(sender *edge.ICoreWebView2, args *edge.ICoreWebView2NavigationStartingEventArgs) uintptr {
    if !eventSwitch["导航开始事件"] {
        return 0
    }
    // 处理导航开始事件
    return 0
})

支持的WebView2事件

该示例支持超过30种WebView2事件，包括：

导航相关事件

• 导航开始事件
• 导航完成事件
• 源改变事件
• 框架导航开始/完成事件

内容相关事件

• 网页内容正在加载事件
• DOM内容加载完成事件
• 文档标题改变事件
• 网站图标改变事件

交互相关事件

• 快捷键事件
• 网页消息事件
• 上下文菜单请求事件
• 移动焦点请求事件

媒体相关事件

• 文档播放音频状态改变事件
• 静音状态改变事件
• 全屏元素状态改变事件

系统相关事件

• 窗口关闭请求事件
• 新窗口请求事件
• 进程失败事件
• 缩放因子改变事件

使用方法

基础操作

1. 运行程序：

   go run CreateByLayoutEle.go
   

2. 程序将显示一个包含多个功能按钮的界面
3. WebView区域将自动导航到百度首页

高级功能使用

JavaScript测试

1. 点击"JS测试"按钮
2. 在弹出窗口中输入JavaScript代码
3. 选择是否获取返回值
4. 点击"执行"运行代码

截图功能

1. 点击"截图"按钮
2. WebView内容将被保存为PNG图片
3. 可选择是否打开保存的图片

PDF导出

1. 点击"保存为PDF"按钮
2. 选择保存位置
3. 当前页面将被导出为PDF文件

事件管理

1. 点击"事件开关"按钮
2. 在事件管理窗口中启用/禁用特定事件
3. 配置会自动保存到JSON文件

依赖要求

系统要求

• Windows 10 1809 或更高版本
• WebView2 运行时
• 足够的磁盘空间用于保存截图和PDF文件

Go 依赖

• github.com/twgh/xcgui
• Go 1.18+

配置文件

event.switch.json

控制各种WebView2事件的启用状态：

{
  "导航开始事件": true,
  "导航完成事件": true,
  "网页消息事件": true,
  "快捷键事件": true,
  // ... 更多事件配置
}

布局文件 (main.xml)

定义整个应用的界面布局，包括：

• 按钮布局和样式
• WebView容器定义
• 窗口属性设置

学习价值

对于初学者

• 全面了解WebView2功能: 几乎涵盖所有WebView2特性
• 事件处理学习: 完整的事件处理机制示例
• 界面设计参考: 复杂界面的布局和交互设计

对于进阶开发者

• 生产级代码参考: 1400+行的完整应用代码
• 性能优化技巧: WebView挂起/恢复等性能优化方案
• 错误处理机制: 完善的错误处理和日志记录

对于企业开发

• 功能模块参考: 可直接复用的功能模块
• 配置管理方案: JSON配置文件的管理方式
• 用户体验设计: 完整的用户交互流程

最佳实践

1. 事件管理

// 使用事件开关避免不必要的事件处理
if !eventSwitch["事件名称"] {
    return 0
}

2. 资源管理

// 及时释放COM对象
defer envOpts.Release()
defer stream.Release()

3. 错误处理

// 设置全局错误回调处理所有WebView错误
edge.SetErrorCallback(func(err *edge.WebViewError) {
    // 统一的错误处理逻辑
})

4. 性能优化

// 窗口最小化时挂起WebView节省资源
if suspendTimer != nil {
    suspendTimer.Stop()
}
suspendTimer = time.AfterFunc(suspendTime, func() {
    // 挂起WebView
})

扩展可能性

基于这个综合示例，可以开发：

• 专业浏览器应用: 功能完整的浏览器软件
• Web应用包装器: 将Web应用包装为桌面程序
• 开发调试工具: Web开发和调试辅助工具
• 企业内部系统: 基于WebView的企业管理系统
• 多媒体应用: 支持音视频的多媒体播放器

注意事项

1. 代码复杂度: 1400+行代码，需要一定的Go语言基础
2. 事件管理: 合理使用事件开关避免性能问题
3. 资源清理: 注意COM对象的及时释放
4. 配置管理: 事件配置文件的正确读写
5. 调试模式: 生产环境建议关闭调试功能

这个综合示例是学习WebView2高级开发的宝贵资源，展示了构建专业级WebView应用的完整方案。

Documentation

Overview

WebView 综合例子