使用 WebView 库和 Deno 创建桌面应用程序

Qter

https://blog.csdn.net/qq_39021028/article/details/128638821

⚠️注意 本教程所用的 webview_deno 库仍处于开发阶段，将有破坏性 API 更改。不建议用于生产环境。

问：什么是 WebView 库、 Deno 和 webview_deno？

答：WebView 库是一个封装各平台的浏览器控件以创建桌面程序的库。

Deno 是一个 JavaScript 运行时，由 Node.js 的创始人创建。

webview_deno 是 WebView 的 Deno 绑定。

ℹ️ 文章末尾有 Electron、Tauri、webview_deno 库的比较。

在 Windows 上创建
1.下载 Deno 并手动安装
如果你的网络够好，可以按照官方的方法下载并安装 Deno。但是大多数人没有这么好的网络，所以需要按照如下步骤手动安装 Deno 。

①从 SourceForge 下载 Deno 的二进制文件，选择 “/<版本号>/deno-x86_64-pc-windows-msvc.zip” 进行下载。

②从下载的 zip 文件中解压出 “deno.exe” ，并把它复制到 “<用户目录>\.deno\bin”。

③把“<用户目录>\.deno\bin” 这个目录加到系统的 PATH 环境变量的末尾。

Deno 是单文件应用程序。在 Windows 上，Deno 只提供 x64 版本。Deno 不支持 Windows XP。

2.新建开发文件夹并离线化库。
开发文件夹的路径和名称你自己定,但是最好不要出现特殊字符与非 ASCII 字符。

因为 “webview_deno” 库是设计为联网获取运行时运行的，为了让它离线运行，我们需要做一些工作。

首先，我们要离线化 “webview” 这个库。

下载整个 WebView 库的仓库为 Zip 文件，并解压仓库中的文件到一个根目录名为 “webview” 的文件夹。做完之后，一打开 “webview” 文件夹就应该是 “README.md” 之类的仓库根目录的文件。确保这个文件夹位于你的开发文件夹内的第一层。

在 “webview” 文件夹内新建一个叫 “lib” 的文件夹，并下载 WebView 库所需的所有库，放入这个文件夹。为了以后跨平台开发方便，把所有平台的库都下载下来。其中的部分文件与 Windows 的系统文件相似，可能会被 Edge 浏览器报毒，如果遇到这种情况，选择“仍然保留”。

在开发文件夹内，新建一个名为“deno_run.bat”的批处理文件，内容如下：

set PLUGIN_URL=webview/lib
deno run -Ar --unstable webview/examples/local.ts
里面的 “webview/examples/local.ts” 是该项目的示例文件，实际开发时用你自己的脚本文件代替。如果你想检查浏览器内核相关信息，可以把 “local.ts” 改为 “user_agent.ts”。实际开发时，可以用 Deno 新建一个应用程序专用的本地服务器，再把 WebView 导航到你的应用程序专用的本地服务器。构建桌面应用时，你可以采用 dijit 库（或其更复杂的后继者 Dojo Widgets ）。



Dijit 的示例页面显示在 WebView 窗口中



到此，“webview” 库离线化完成。“webview_deno” 库还依赖于 “plug” 库，我们还需要把它离线化。

​下载整个 plug 库的仓库为 Zip 文件，并解压仓库中的文件到一个根目录名为 “plug” 的文件夹。做完之后，一打开 “plug” 文件夹就应该是 “README.md” 之类的仓库根目录的文件。确保这个文件夹位于你的开发文件夹内的第一层。

把 “webview” 文件夹内的 “deps.ts” 内的 “https://deno.land/x/plug@<版本号>/”字样改为 “../plug/”。

“plug” 库还依赖于 “std” 库，我们还需要把它离线化。

下载整个 std 库的仓库为 Zip 文件，并解压仓库中的文件到一个根目录名为 “std” 的文件夹。做完之后，一打开 “std” 文件夹就应该是 “README.md” 之类的仓库根目录的文件。确保这个文件夹位于你的开发文件夹内的第一层。

把 “plug” 文件夹内的 “deps.ts” 内的 “https://deno.land/std@<版本号>/”字样改为 “../std/”。

（可选）根据自己的需要，自行精简 “std” 库的内容。

到此，整个 “webview_deno” 库离线化完成。

现在，你的开发文件夹一打开内部应当长成如下的样子：





如果需要打包 Deno 到你的应用程序中，就把 Deno 本身的可执行文件 “deno.exe” 复制到开发文件夹。（Deno 官方建议最终用户安装 Deno 而不是把 Deno 打包到应用程序中导致无谓的储存空间占用。）

运行 “deno_run.bat”,会弹出一个 WebView 窗体和一个命令行窗体。

3.隐藏命令行窗体
但是有时，我们需要隐藏命令行窗体，并且打包软件要求以 exe 软件作为入口，我们需要把 “deno_run.bat” 转换成 exe 文件。

下载 Bat To Exe Converter，注意是由 Fatih Kodak 生产的那款，图标长成黑色圆形上面一个白色齿轮的样子。用其他软件可能会因为临时文件的路径问题或者没有集成解释器导致失败。这个软件的官方网站是 f2ko.de，但是这个网站估计是正在重构，没有下载软件的地方，所以我是在国内的下载站这款软件的。

打开 Bat To Exe Converter，点击工具栏上的 “Open” ,在右侧的 “Options” 选项卡的 “Exe-Format”项中选择“64 Bit | Windows (Invisible)”。之后点击工具栏上的 “Convert” 按钮，输出 exe，保存文件名为 “deno_run.exe”。



运行“deno_run.exe”，只会出现一个 WebView 窗口。



浏览器内核信息：





由于 Deno 采用特殊方式读取文件，没有办法用 Enigma Virtual Box 对这个项目进行单文件虚拟化。

用 UPX 压缩 Deno 会导致可执行文件损坏。

4.WebView 与 Deno 互相调用
从网页调用 Deno 函数：

把 “deno_run.bat” 的内容改为如下，之后运行该文件：

set PLUGIN_URL=webview/lib
deno run -Ar --unstable webview/examples/bind.ts
会出现另一个 WebView 窗口，点击其中的按钮，控制台会出现对应信息。

通过分析 “bind.ts” 的内容可以发现，这是使用了 “webview.bind()” 函数做到的。语法是：

webview.bind("要绑定的 Deno 函数名", function (要传入的参数) {

});
//在 WebView 中使用 要绑定的 Deno 函数名(参数); 来调用。
从 Deno 调用 WebView 函数：

无法直接从 Deno 调用 WebView 函数。需要使用 webview.eval("要执行的js代码"); 来间接实现。

可以用 webview.title = "标题"; 来设置窗口标题。

5.结尾
可以参考 “webview/src/webview.ts” 来查看所有可用的函数及其用法。

“webview\examples” 目录有一些例子可供参考。

附录：Electron、Tauri、webview_deno 的比较

库\指标        易用性        大小        完善性
Electron        易用        大        完善
Tauri        难用        小        较完善
webview_deno        易用        较大        不完善
除了 webview_deno ，还有一个项目可以创建基于网页的 Deno 桌面程序。它是 Astrodon ，是 Tauri 的 Deno 绑定。但是，它不是开箱即用的，因为它要求开发者先安装 Rust。

我个人认为，Tauri 取代 Electron 够呛。因为 Electron 基于相对简单的 JavaScript 技术, 而 Tauri 基于相对困难的 Rust 与原生 API 技术。

自此，本文结束。
————————————————
版权声明：本文为CSDN博主「DevScholar」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_39021028/article/details/128638821