放棄 Electron，擁抱 WebView2！JavaScript 快速開發獨立 EXE 程序

語言: CN / TW / HK

時間 2022-09-13 11:28:00 博客園精華區

主題: JavaScript Electron

Electron 不錯，但也不是完美的。

Electron 帶來了很多優秀的桌面軟件，但並不一定總是適合我們的需求。

多個選擇總是好事！

▶ 我使用 Electron 遇到的一些麻煩

1、Electron 太大了！

2、每一個 Electron 寫的軟件都要重複地帶一個 Electron …… 升級與分發都不方便。

3、Electron 不方便嵌入其他窗口界面，與其他語言、技術融合不易。

4、並不是所有桌面軟件都需要 Electron 的跨平台特性。macOS , Linux 的桌面系統市場份額小於被遺忘的 Windows 8 ，如果軟件只是在 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）寫一個最簡單的程序：

import win.ui;
/*DSG{{*/
mainForm = win.form(text="WebView2")
mainForm.add(
btnCallJs={cls="button";text="調用 JS 函數";left=461;top=395;right=726;bottom=449;note="點這裏調用 JavaScript  函數";z=1};
custom={cls="custom";left=17;top=21;right=730;bottom=356;z=2}
)
/*}}*/

//創建瀏覽器組件
import web.view;
var wb = web.view(mainForm.custom);

//導出本地函數給網頁 JavaScript
wb.external = {
    getComputerName = function(){
        return sys.getComputerName();
    }
}
import sys;

//寫入網頁 HTML
wb.html = /**
<html>
<head>
    <script> 
    (async ()=>{ 
        var n = await aardio.getComputerName();
        alert(n);
    })()
    </script>
</head>
<body>
**/

//響應按鈕事件
mainForm.btnCallJs.oncommand = function(id,event){
    //調用 JS 函數
    wb.xcall("document.write","測試")
}

mainForm.show();
win.loopMessage();

對，這就是一個完整程序的源代碼，可以一鍵生成獨立 EXE 文件。

▶ 入門

首先點選「aardio 主菜單 > 新建工程 > 窗口程序 > 空白工程」，然後點擊「創建工程」。

如果熟悉網頁前端開發，也可以點擊「新建工程 > Web 界面 > WebView2 」創建工程。

雙擊工程入口代碼 main.aardio 打開主窗口，自「界面控件」中拖一個「調用 JS 函數」的按鈕上去，再拖一個 custom 控件到窗體上 —— 用來嵌入網頁：

然後切換到代碼視圖，添加以下代碼創建網頁瀏覽器：

import web.view;
var wb = web.view(mainForm.custom);

web.view 的第 1 個參數指定要嵌入 WebView2 的窗口對象，該參數可以是 mainForm.custom 這樣的控件窗口，也可以是 mainForm 這樣的窗體對象。

下面使用

wb.html = "<html></html>"

就可以寫網頁 HTML 代碼了。

或者使用

wb.go("網址")

可以打開指定的網頁。

使用

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

可以打開資源目錄的網頁，支持SPA 單頁應用。資源目錄可以嵌入 EXE 生成獨立 EXE 文件，放心不用多寫其他代碼。

添加下面的代碼導出 external 對象給網頁 JavaScript ：

//導出本地函數給網頁 JavaScript
wb.external = {
    getComputerName = function(){
        return sys.getComputerName();
    }
}

import sys;

在網頁 JavaScript 裏可以調用上面導出的 external 對象，不過在 JavaScript 裏要用 aardio 這個名字表示 external 對象，網頁代碼如下：

wb.html = /**
<html>
<head>
    <script> 
    (async ()=>{ 
        var n = await aardio.getComputerName();
        alert(n);
    })()
    </script>
</head>
<body>
**/

注意在 aardio 中 /* 註釋 */ 可以作為字符串賦值給其他變量，請參考： aardio 編程語言快速入門——語法速覽

要注意所有 aardio 對象在 JavaScript 中都是異步 Promise 對象。如上在 async 函數體內可以愉快地使用 await 調用 aardio 函數 —— 這非常方便。

我們在窗體設計視圖雙擊「調用 JS 函數」按鈕，這會切換到代碼視圖，並自動添加以下回調函數：

mainForm.btnCallJs.oncommand = function(id,event){
    
}

用户點擊按鈕時就會調用上面的函數。

小改一下添加 aardio 代碼調用 JavaScript 函數：

//響應按鈕事件
mainForm.btnCallJs.oncommand = function(id,event){
    //調用 JS 函數
    wb.xcall("document.write","測試")
}

很簡單，一個程序就寫好了。可以在 aardio 中點擊「運行」按鈕直接運行代碼，也可以點擊「發佈」按鈕直接生成 EXE 文件。

▶ 如何將網頁顯示在窗體的指定位置？並且支持自動縮放？

web.view() 構造函數的第 1 個嵌入窗口參數可以是 win.form 對象（獨立窗口），也可以是 custom, static 這樣的普通控件對象。例如前面的例子就是將 WebView2 嵌入 custom 控件：

import web.view;
var wb = web.view(mainForm.custom);

aardio 中的所有控件都可以非常方便的支持自動縮放。只要簡單地在窗體設計器中選定控件，然後在「屬性」面板設置「固定邊距」、「自適應大小」這些屬性就可以。

一個更簡單的方法是在窗體設計器上點右鍵，然後在彈出菜單中點擊「九宮格縮放佈局」—— aardio 將會自動設置所有控件的自適應縮放屬性。

至於網頁內容自適應排版很簡單，不需要在 aardio 中編寫代碼。

▶ 使用 wb.export 導出 aardio 函數到 Javascript

前面我們介紹過使用 external 導出 aardio 函數到網頁 JavaScript 。我們還可以用 wb.export 導出 aardio 函數，先看例子：

import web.view;
var wb = web.view(mainForm.custom);

wb.export({
    alert = function(msg){
        winform.msgbox(msg) 
    };
    nativeAdd = function(a,b){ 
        return a + b; 
    }
})

注意：

1、wb.export() 導出的是 JavaScript 全局函數。

2、wb.export() 導出的函數在 JavaScript 中同樣是異步 Promise 對象。

3、wb.export() 導出的 Javascript 全局函數, 使用 JSON 自動轉換調用參數和返回值，可以更好的兼容只能支持純 aardio 對象 / 純 JavaScript 對象的代碼。

4、wb.export() 導出的函數內部禁止調用 wb.doScript 或 wb.eval 執行Javascript 。

wb.external 內部是調用 wb.exportHostObject() 導出 aardio 對象，中間不需要經過 JSON 自動轉換。

▶ 示例：網頁 JavaScript 調用本地 Ping 命令

我經常被問到幾個類似的問題：

1、JavaScript 的異步函數太麻煩了，怎樣把他搞成同步的，不用 await ，不用 async 。

2、JavaScript 的異步函數太好用了，怎樣在 aardio 中也這樣搞，如何在 aardio 裏 await 。

其實同步有同步的優勢，異步有異步的好處，揚長避短是智慧，倒行逆施最累人。下面我們一起來寫一個在 WebView2 中調用本地 Ping 命令的小程序體驗一下。

第一步：創建窗口。

import win.ui;
var winform = win.form(text="Ping")

第二步：基於窗口創建 WebView2 瀏覽器組件。

import web.view;
var wb = web.view(winform);

第三步：使用 external 對象導出 JavaScript 可以調用的本地函數。

import process.popen;
wb.external = {
  ping = function(domain){
    
    var prcs = process.popen("ping "+ domain);
    for( all,out,err in prcs.each() ){
        wb.invoke("document.body.insertAdjacentText",'beforeend',all); 
    }
    
    return "恭喜,事做好了!"
  } 
}

在 JavaScript 裏用 aardio.ping() 就可以直接調用上面的 external.ping() 函數了。

第四步：下面在網頁裏寫 JavaScript 來調用 aardio 函數。

wb.html = /**
<body style="white-space: pre;"><script>
doSomething = async() => {
    var result = await aardio.ping('www.baidu.com');
    document.body.insertAdjacentText('beforeend',result);
};
</script>
<button  onclick="doSomething()">開始幹活了</ping>
**/

就這麼短短几句，一個簡單的程序就完成了，請看運行效果：

上面程序的完整 aardio 源代碼如下：

//創建窗口
import win.ui;
var winform = win.form(text="Ping")

//嵌入瀏覽器組件
import web.view;
var wb = web.view(winform);

//導出 aardio 函數到 JavaScript
wb.external = {
    ping = function(domain){
        
        //同步有同步的優勢，揚長避短是智慧，倒行逆施最累人。 
        var prcs = process.popen("ping "+ domain);
        for( all,out,err in prcs.each() ){
            wb.invoke("document.body.insertAdjacentText",'beforeend',all); 
        }
        
        return "恭喜,事做好了!"
    } 
}
import process.popen;

//寫入網頁 HTML
wb.html = /**
<body style="white-space: pre;"><script>
doSomething = async() => {
    
    //異步有異步的好處，揚長避短是智慧，倒行逆施最累人。
      var result = await aardio.ping('www.baidu.com');
      document.body.insertAdjacentText('beforeend',result);
};
</script>
<button  onclick="doSomething()">開始幹活了</ping>
**/

//顯示窗口
winform.show();

//啟動界面消息循環
win.loopMessage();

▶ aardio 調用 JS 函數

在 aardio 中可以使用 wb.doScript() , wb.eval() , wb.xcall() 等函數調用網頁 JavaScript ，下面看一個在 aardio 中調用 xterm.js 的簡單例子：

import win.ui;
var winform = win.form(text="xterm")

import web.view;
var wb = web.view(winform);

wb.html = /**
<!DOCTYPE html> 
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/xterm.css">
  <script src="https://unpkg.com/[email protected]/lib/xterm.js"></script>
</head>
<body style="height:100vh;"> 
  <script>
    let term  = new Terminal();
    term.open(document.body);
    term.write('\x1b[31m紅色字體\x1b[37m測試')
  </script>
</body>
</html>
**/

wb.xcall("term.write",'\e[32m綠色字體');

winform.show();
win.loopMessage();

▶ 無邊框窗口：用網頁實現窗口標題欄

「無邊框窗口」指的是去掉獨立窗體默認的邊框與標題欄，然後由程序自行定製邊框與標題欄。

aardio 做這事還是很容易的，首頁在窗體屬性中指定「邊框」屬性為 none。

這樣直接運行後顯示的窗體就沒有邊框和標題欄了（按 Alt + F4 關閉窗口）。

然後添加下面的代碼就可以為窗體添加標題欄、標題欄按鈕、陰影邊框、並支持拖動邊框縮放：

import win.ui.simpleWindow;
win.ui.simpleWindow(winform);

win.ui.simpleWindow 的源碼很簡單，參考其源碼也可以自己編寫新的庫定製邊框與標題欄。

這裏我們不用上面的方法，而是用網頁實現標題欄。

我們知道網頁繪製一個標題欄與標題欄按鈕很簡單，難點在於怎麼在網頁裏控制窗口。我們先學習幾個專用於無邊框窗口的 aardio 函數：

winform.hitMax() //模擬點擊最大化按鈕
winform.hitMin() //模擬點擊最小化按鈕
winform.hitClose() //模擬點擊關閉按鈕
winform.hitCaption() //拖動標題欄

下面寫個簡單的例子，先看下運行效果：

WebView2 無邊框窗口示例完整源碼如下：

import win.ui;
/*DSG{{*/
var winform = win.form(text="無邊框窗口";right=759;bottom=469;bgcolor=16777215;border="none")
winform.add()
/*}}*/

import web.view;
var wb = web.view(winform);
 
//導出為 Javascript 中的 aardio 對象
wb.external = { 
    close = function(){
        winform.close();
    };
    hitCaption = function(){
        winform.hitCaption();
    };
    hitMin = function(){
        winform.hitMin();
    };
    hitMax = function(){
        return winform.hitMax();
    };
}

wb.html = /**
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
    html {
        margin: 0px;
        padding: 0px; 
        background-color: #202020; 
    }
    
    #title-bar {
        height: 32px;    
        padding: 0px;
        margin: 0px;
    }
    
    #title-bar .caption {
        position: fixed;
        top: 0px;
        left: 0px;    
        width: 100%;
        padding-left: 10px;
        color: #ADADAD;
        line-height: 32px;
        font-size: 14px;
        cursor: default;
        user-select:none;
    }
    
    #title-bar .buttons {
        position: fixed;
        top: 1px;
        right: 1px;    
    }
    
    #title-bar button {
        font: 14px Marlett ;
        color: #F5F5F5;
        background-color: transparent;
        border: none;
        height: 28px;
        width: 28px;  
    }
     
    #title-bar button:hover {
        background-color: #FF4500;
    }
    
    #title-bar button:active {
        background-color: #B0451E;
        color: #C5C5C5;
    }
    
    #main {
        padding: 12px;    
        color: #C0C0C0;
    }
     
    </style>
    <script type="text/javascript">  
    
    </script>
</head>
  <body>
    <div id="title-bar" >
      <div class="caption" onmousedown="aardio.hitCaption()">按住這裏調用 aardio.hitCaption() 拖動窗口 </div>
      <div class="buttons">
        <button id="min-btn" onclick="aardio.hitMin()">0</button>
        <button id="max-btn"  onclick="aardio.hitMax()">1</button>
        <button id="close-btn" onclick="aardio.close()">r</button>
      </div>
    </div>
    <div id="main">
        1、請指定窗體「邊框」屬性為 none ，創建無邊框窗口。<br />
        2、調用 win.ui.shadow(winform) 創建陰影邊框<br />
    </div>
    <script src="default.js"></script>
  </body>
</html>
**/ 

//添加陰影邊框
import win.ui.shadow;
win.ui.shadow(winform);

//設置窗口縮放範圍
import win.ui.minmax;
win.ui.minmax(winform);

//切換最大化、還原按鈕
winform.adjust = function( cx,cy,wParam ) {
    if( wParam == 0x2/*_SIZE_MAXIMIZED*/ ){ 
        wb.doScript(`document.getElementById("max-btn").innerText="2";`)
    }
    elseif( wParam == 0x0/*_SIZE_RESTORED*/ ){
        wb.doScript(`document.getElementById("max-btn").innerText="1";`)
    } 
};
            
winform.show();
win.loopMessage();

以上源碼來自 aardio 自帶範例 > Web 界面 > web.view ：