编程语言应用

注册

 

发新话题 回复该主题

放弃Electron拥抱WebView2 [复制链接]

1#
北京看白癜风那个医院最好 https://baike.baidu.com/item/北京中科白癜风医院/9728824

Electron不错,但也不是完美的。

Electron带来了很多优秀的桌面软件,但并不一定总是适合我们的需求。

多个选择总是好事!

我使用Electron遇到的一些麻烦

1、Electron太大了!

2、每一个Electron写的软件都要重复地带一个Electron……升级与分发都不方便。

3、Electron不方便嵌入其他窗口界面,与其他语言、技术融合不易。

4、并不是所有桌面软件都需要Electron的跨平台特性。macOS,Linux的桌面系统市场份额小于被遗忘的Windows8,如果软件只是在Windows平台运行,并且需要大量与专用系统API交互,跨平台反而是不必要的负担。

5、我曾经在aardio中封装了一个electron扩展库,然后我在写这个扩展库的时候,当时看到的还是remote真香……然后我为这个扩展库写了个很大的JS文件就用到了remote。可是等我写完没多久,就看到remote被Electron抛弃了,remote会慢一万倍,各种缺陷……

WebView2的优势

1、WebView2基于性能强悍的Edge(Chromium)内核。

2、调用WebView2生成的软件体积很小。所有基于WebView2的软件可以共享同一个WebView2组件。Win11已经内置WebView2组件,其他操作系统也可以快速地自动安装WebView2。

3、WebView2接口非常简洁,嵌入其他窗口界面也非常方便。

总结一句话就是:WebView2简单、好用、生成软件体积小。

aardio标准库中的web.view就是基于WebView2。WebView2的接口是如此简洁,所以我写的这个库也只有很少的代码。因为aardio可以将网页自动内嵌到独立EXE文件,就可以非常方便地生成独立EXE程序。

一个最简单的程序演示

下面我们用aardio调用web.view(WebView2)写一个最简单的程序

对,这就是一个完整程序的源代码,可以一键生成独立EXE文件。

入门

首先点选「aardio主菜单新建工程窗口程序空白工程」,然后点击「创建工程」。

如果熟悉网页前端开发,也可以点击「新建工程Web界面WebView2」创建工程。

双击工程入口代码main.aardio打开主窗口,自「界面控件」中拖一个「调用JS函数」的按钮上去,再拖一个custom控件到窗体上——用来嵌入网页:

然后切换到代码视图,添加以下代码创建网页浏览器:

importweb.view;varwb=web.view(mainForm.custom);

web.view的第1个参数指定要嵌入WebView2的窗口对象,该参数可以是mainForm.custom这样的控件窗口,也可以是mainForm这样的窗体对象。

下面使用

wb.html="html/html"

就可以写网页HTML代码了。

或者使用

wb.go("网址")

可以打开指定的网页。

使用

importwsock.tcp.simpleHttpServer;wb.go("\res\index.html");

可以打开资源目录的网页,支持SPA单页应用。资源目录可以嵌入EXE生成独立EXE文件,放心不用多写其他代码。

添加下面的代码导出external对象给网页JavaScript:

在网页JavaScript里可以调用上面导出的external对象,不过在JavaScript里要用aardio这个名字表示external对象,网页代码如下:

注意在aardio中/*注释*/可以作为字符串赋值给其他变量,请参考:《aardio编程语言快速入门——语法速览》

要注意所有aardio对象在JavaScript中都是异步Promise对象。如上在async函数体内可以愉快地使用await调用aardio函数——这非常方便。

我们在窗体设计视图双击「调用JS函数」按钮,这会切换到代码视图,并自动添加以下回调函数:

mainForm.btnCallJs.on

分享 转发
TOP
发新话题 回复该主题