WebView2 - 桌面透明3D效果

Posted 2021-05-26 aardio

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();