WebView2 實(shí)在誘人，最新的 Edge(Chromium) 性能強(qiáng)悍，而且所有使用 WebView2  的應(yīng)用可以共用一個運(yùn)行時，Windows 11 已經(jīng)自帶 WebView2 ，就連 Office 也會自動部署 WebView2 ，目前 WebView2 已經(jīng)被部署到 2億臺電腦，并且還在繼續(xù)增加 …… 未來是屬于 WebView2 的。即使目標(biāo)電腦沒有安裝  WebView2 ，在 aardio  中調(diào)用 WebView2 以前也會自動檢測并安裝 —— WebView2 的下載安裝速度極快，所以對用戶體驗(yàn)基本沒有影響，重要的是 WebView2  仍然支持老舊的、即將被淘汰的 Windows 7 —— 擁有良好的兼容性。

令人驚訝的是 WebView2 居然支持 COM 對象，這就非常舒服了，我們知道 aardio 先天對 COM 友好，所有 aardio 對象都可以自動轉(zhuǎn)換為 COM 對象，因此我們在 WebView2 中與 aardio 交互就非常方便，可能比其他瀏覽器組件都要方便。

要嘗試 WebView2 非常簡單，在工程向?qū)Ю锟梢詣?chuàng)建 WebView2 工程，也可以在新建窗口里簡單的創(chuàng)建 WebView2  單窗口示例。

今天我們一起小試一下 WebView2 ，寫一個小工具。

我們需要做到以下幾點(diǎn)：
1、在 aardio 中輕松愉快地嵌入 WebView2，生成極小的 EXE 文件。

2、有了性能強(qiáng)悍的 WebView2，我們還想把前端好用的東西搬上桌品嘗，例如 React hooks，Ant Design, Babel 等等，不會前端開發(fā)環(huán)境沒有關(guān)系，今天我們簡單一點(diǎn)，直接在網(wǎng)頁中引入 Babel。不用擔(dān)心，因?yàn)?WebView2 實(shí)在太快了，即使在網(wǎng)頁中直接調(diào)用 Babel 編譯，速度也是快如閃電，寫這么個簡單的頁面完全沒問題。
3、我們需要在網(wǎng)頁中調(diào)用 aardio 本地函數(shù)，并且在網(wǎng)頁中通過 aardio 訪問電腦硬件接口，如果只是跑個網(wǎng)頁那就太沒意思了。我們要做瀏覽器做不了的事情。

我們之前剛剛寫了一個訪問路由器端口映射數(shù)據(jù)的庫 sys.upnp.nat ，就先拿這個來練手。今天要說的這個示例我已經(jīng)放到了 aardio 自帶的范例中，可以在以下位置打開：

運(yùn)行后的效果：

關(guān)鍵代碼如下：

上面 wb.external 導(dǎo)出了 JavaScript 可以調(diào)用的函數(shù)。因?yàn)?external 在返回表對象、數(shù)組時會轉(zhuǎn)換為 COM 對象，而我們在 React 加載的數(shù)據(jù)需要 JSON ，所以上面我們通過 web.json.stringifyArray(natUpnp.getTable())  返回一個 JSON 數(shù)組。

在網(wǎng)頁中調(diào)用 aardio 函數(shù)有 2 個重要的規(guī)則：
1、所有在 aardio 中導(dǎo)出到 JavaScript 的函數(shù)都是異步函數(shù)，也就是 Promise 。
2、在網(wǎng)頁中調(diào)用 aardio 函數(shù)，總是在界面線程中調(diào)用，這就避免了不必要的跨線程同步，非常方便。

再看一下網(wǎng)頁中調(diào)用 aardio  函數(shù)的關(guān)鍵代碼：

<script type='text/babel'>   const { useState,useEffect } =  React;   const App = () => {       const [data,setData] = useState([]);          useEffect(        async ()=> {          var ds = await aardio.getMappingCollection();          setData(JSON.parse(ds));        },[]      )             //其他代碼省略  };           ReactDOM.render(<App />, document.querySelector('#app')); </script>

注意 aardio.getMappingCollection() 返回一個 Promise ，而 await aardio.getMappingCollection() 才是返回 aardio 函數(shù)真正的返回值。