WebView2透明窗口效果（用Web做UI）

hxznhf · 发表于 2025-10-7 15:25:18

本帖最后由 hxznhf 于 2025-10-7 16:21 编辑

本例子使用了kyozy大佬的黑月界面模块和WebView2模块，都是大佬开源的，论坛都有源代码，感谢大佬的无私奉献！！！

本例子仅限于最新的Window10或11，以及最新的WebView2运行时，具体适用版本我未cha询。因为涉及到的特性和接口都比较新。

一、创建窗口用于放置WebView2控件

【窗口风格】需设置弹出式窗口，【扩展风格】需设置WS_EX_NOREDIRECTIONBITMAP

WS_EX_NOREDIRECTIONBITMAP：0x00200000L
窗口不会呈现到重定向图面。这适用于没有可见内容的窗口，或者使用表面以外的机制来提供其视觉对象。

这个样式是实现WebView2控件与Win32窗口透明混合渲染的核心，有了它，Windows系统会自己实现最终透明混合效果（意料之外，理论是需要更加复杂的处理）

应用.初始化 ()
主窗口.置开始位置 ( #开始位置_居中屏幕 )
主窗口.事件_创建完毕 (&窗口事件_创建完毕)
主窗口.事件_尺寸被改变 (&窗口事件_尺寸改变)
主窗口.创建W (, , , 黑月坐标 (800, 600), #窗口风格_弹出式窗口, #WS_EX_NOREDIRECTIONBITMAP )
主窗口句柄＝主窗口.取窗口句柄 ()
窗口控制.创建 ()
应用.运行 (主窗口)

二、创建WebView2控件并加载界面（HTML）

核心点：
1、--enable-features=msWebView2EnableDraggableRegions 启用一个WebView2实验性功能（与后面窗口拖动相关）
1、使用控制器设置默认背景色 (到整数 ({ 0, 0, 0, 0 })) //这里设置网页的默认背景为透明
2、绑定一个COM类（在WebView2模块中叫主机对象,必须继承它），用于窗口交互控制，当然也可以使用WebView2自带的消息通知接口实现（这个比较简单，就不写了）

子程序名	返回值类型	公开	备注
窗口事件_创建完毕
参数名	类型	参考	可空	数组	备注
hWnd	整数型

变量名	类型	静态	数组	备注
opt	WebView2环境选项

opt.创建 ()
opt.置附加浏览器参数 (“--enable-features=msWebView2EnableDraggableRegions”)
WV2创建环境自选项 (&子程序_创建环境完毕, , , , opt)

子程序名	返回值类型	公开	备注
子程序_创建环境完毕	整数型
参数名	类型	参考	可空	数组	备注
参数_用户数据	整数型
参数_错误代码	整数型
参数_环境指针	整数型

变量名	类型	静态	数组	备注
env4	WebView2环境4

集_环境.置指针 (参数_环境指针)
集_环境.创建控制器 (主窗口.取窗口句柄 (), &子程序_创建控制器完毕)
' 如果真 (集_环境.转换为 (#IID_WebView2环境4, env4) ＝ 0)
' 输出调试文本 (env4.取浏览器版本 ())
返回 (0)

子程序名	返回值类型	公开	备注
子程序_创建控制器完毕	整数型
参数名	类型	参考	可空	数组	备注
参数_用户数据	整数型
参数_错误代码	整数型
参数_控制器指针	整数型

变量名	类型	静态	数组	备注
token	长整数型
seting	WebView2设置
控制器2	WebView2控制器2

集_控制器.置指针 (参数_控制器指针)
集_控制器.取视图 (集_视图)
集_控制器.转换为 ( #IID_WebView2控制器2, 控制器2)
控制器2.置默认背景色 (到整数 ({ 0, 0, 0, 0 }))
集_控制器.置边界 (0, 0, 主窗口.宽度 (), 主窗口.高度 ())
集_视图.添加主机对象到脚本 (“window”, 窗口控制)
集_视图.导航 (“file:///” ＋取运行目录 () ＋ “/test.html”)
返回 (0)

三、界面（HTML）实现

参考资料：

https://github.com/MicrosoftEdge/WebView2Feedback/issues/2243

核心点：
1、app-region: drag; 这是去年新增的WebView2专用的CSS属性，用于标记一个元素实现对窗口的拖动，必须在创建WebView2环境时带上参数（--enable-features=msWebView2EnableDraggableRegions）来启用这个功能。在易语言里面还需要使用 "WebView2设置9.置是否启用非客户区支持 (真)" 才能完全起作用（不过我在C++测试时没启用也能拖动）。【2025年10月7日16点18分修改】

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body >

    <style>
        html,body{
            background-color: transparent;
            width: 100%;
            height: 100%;
        }
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            overflow: hidden;
            background-color: #ababab72;
        }
        h1 {
            color: #333;
        }
        p {
            font-size: 16px;
        }
        button {
            padding: 10px 15px;
            font-size: 16px;
            cursor: pointer;
        }
        content{
            border: 2px solid #ccc;
            width: 80%;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 2px 2px 12px rgba(0,0,0,0.1);
        
        }
        .titleBar{
            user-select: none;  
            app-region: drag;
            background-color: #f0f0f0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 30px;
            background-color: #333;
      
            color: white;
        }
    </style>
        <div class="titleBar">webview2透明窗口 </div>
        <div class="closeBtn" style="position:absolute;top:0;right:0;width:30px;height:30px;line-height:30px;text-align:center;cursor:pointer;background-color:#ff4d4d;color:white;font-weight:bold;">X</div>
        <br><br><br><br><br>
    <div class="content">
    
        <h1>这是一个测试页面</h1>
        <p>用于测试WebView2控件的嵌入。</p>
        <button>点击我</button>
    </div>
    
</body>


</html>

附件中除了（WebView2Loader.dll）是微软官方提供的，因为易语言不方便使用静态库，只能用这个，其他都是源代码（包含引用的kyozy模块）。
2025年10月7日16点19分: 更新了附件

附件：

游客，如果您要查看本帖隐藏内容请回复

十点半之后 · 发表于 2 小时前

66666666666666666666666666

285275928 · 发表于 4 小时前

如果您要查看本帖隐藏内容请回复

在看风云 · 发表于 4 小时前

6666666666666666666

Honey悦 · 发表于昨天 22:49

为爱发电

世纪网络科技 · 发表于昨天 15:28

看看

pipiap · 发表于前天 18:11

#在这里快速回复#2025年10月7日16点19分: 更新了附件

小桥流水34 · 发表于前天 16:40

感谢分享

该死dē蚊子 · 发表于前天 11:45

多谢分享哦。。

wanpl2006 · 发表于前天 11:11

让江小白来看看帖子里藏了啥好东西~~~

		自动登录	找回密码
密码			注册

[2025开源大赛(第八届)] WebView2透明窗口效果（用Web做UI）

评分

本帖被以下淘专辑推荐:

浏览过的版块

精易论坛 - 有你更精彩 /2