vlambda博客
学习文章列表

WebView2 - 桌面透明3D效果

WebView2 真是一个很好的组件,Chromium 89 以上的内核(并自动更新),接口又简洁方便,而且支持 WIN7,WIN8,WIN10,用上这个组件,一切前端最新的技术都可以放心地用上去,再也不用考虑浏览器兼容性。

所有基于 WebView2  的软件会共享一个 WebView2  Runtime ,解决了其他类似方案体积大的问题。即使是没有安装 WebView2  Runtime ,aardio 也可以自动安装,下载速度也非常快,可以达到几MB每秒,瞬间可以下载安装好,体验非常好。


下面是一个基于 WebView2 实现桌面透明3D效果的例子,几句代码就可以了,真是太好用了。

注意为了方便演示,下面用了远程网页,所以第一次网络下载要点时间,实际开发放到本地就会快了。


import win.ui;/*DSG{{*/var winform = win.form(text="WebView2 - 透明3D";border="none") /*}}*/
import web.view;var wb = web.view(winform);
//窗口透明winform.transparent(true);
//webView2 控件透明wb.defaultBackgroundColor = 0x00000000;
wb.external = { winform = winform;}
//因为要加载远程资源,第一次可能有点慢,实际开发使用本地文件即可wb.go("https://www.html5tricks.com/demo/html5-css3-3d-cube-puzzle/index2.html")
//等待页面加载完成后,执行下面的Javascriptwb.waitEle("body","
//这里方便演示动态修改远程网页的 CSS 背景为透明色,直接改CSS可以更简单this.style.backgroundColor='#00000000'
//异步执行以刷新透明背景后显示setTimeout(()=>aardio.winform.show(),100);this.onmouseup= function(e){ if(e.button == 2){ aardio.winform.close(); } }");
win.loopMessage();