php多线程 强大 WebView2 + 不用写 JavaScript 的 htmx

不得不说 WebView2 稳定可靠、性能强悍，接口简洁，是真的让人省心。

htmx.js

这里介绍一个适合用于 WebView2 的极简前端组件 htmx.js ，这个组件最大的特色就是简单，一学就会，也很容易理解。

我们正常浏览一个网页的过程是在浏览器里输入网址，向 HTTP 服务器发送请求。然后服务器返回 HTML 代码，浏览器显示页面。

但是 htmx.js 脑洞大开，让网页上的每一个 HTML 节点都可以向服务器发送请求并获取 HTML，并实时更新页面上指定的节点。而且不需要写任何 JavaScript 代码。

起步

首先我们打开 aardio ，创建 WebView2 工程并选择 htmx.js 模板：

生成的工程如下：

点『运行』可直接测试效果，点『发布』可生成独立 EXE 文件 。

在工程管理器中右键点『网页』弹出菜单，然后点『用外部编辑器打开』，如果安装了 VS Code 会使用 VS Code 打开网页目录。

在 VS Code 中点击并打开 index.html 源码：

htmx.js 基础

打开 index.htmlphp多线程，先看最简单的 htmx.js 示例：

<button hx-get="/api/index.aardio" 
    hx-swap="innerHTML" 
    hx-trigger="click" 
    hx-target="#info-div"  >
    点这里发送 GET 请求
button><br>

<div id="info-div">div>

注意看凡是 "hx-" 前缀的属性都是用于 htmx.js 。

hx-trigger 用于指定在什么事件发生时触发 HTTP 请求，例如：

hx-trigger="click" 

表示在 click 单击事件发生时触发请求。

hx-trigger 可使用标准网页事件名，常用事件如下：

事件名后面还可以添加修饰器，例如修饰器 once 表示只允许触发一次 ：

hx-trigger="click once" 

其他事件修饰器：

下面的 HTML 使用了多个事件修饰器：

<input type="text" 
  hx-trigger="keyup changed delay:500ms"
  hx-post="/api/index.aardio" >

这表示在按键放开（ keyup ），文本框的内容发生改变（ changed ）时触发，并且延时 500 毫秒再发送请求。

hx-get 则指定要请求的是哪个后端页面，例如：

hx-get="/api/index.aardio" 

表示事件触发时，请求 "/api/index.aardio" 这个页面。因为 aardio 在启动 SPA 应用时自动指定了后端根目录为 "/web"，所以实际请求的是 "/web/api/aardio" 。

而 hx-swap 则指定要将返回的 HTML 写入到哪里，"innerHTML" 指定是更新网页节点内部 HTML，"outerHTML" 指定替换目标网页节点的全部 HTML ，其他还有 "afterbegin" , "beforebegin" , "beforeend" , "afterend" , "none" 。这些看名字就知道是什么作用，就不解释了。

hx-target 属性用 CSS 选择器指定要写入的网页节点，例如：

 hx-target="#info-div" 

指定服务器返回的 HTML 写入 id 为 "info-div" 的节点。如果省略 hx-target 属性表示写入目标是当前节点自身。

hxmx.js 在更新 HTML 时，如果发现新旧 html 中有 id 相同的元素会进行优化并平滑显示。

看到这里，htmx.js 您已经会用了。

虽然 htmx.js 文档里有更多花式用法，但一般可能用不上。有些事搞太复杂了也不一定是好事。

htmx.js + aardio 后端

aardio 提供了嵌入式 HTTP 服务器，可以直接使用 aardio 代码写网页，支持与 PHP 类似的模板语法。

aardio 的模板语法很简单，aardio 代码写在 内部，而 HTML 代码写在 外部就可以了。实际上 外部的代码被转换为了 aardio 中 print 函数的参数。

例如服务端有下面的 aardio 代码：

<span>abcspan>
<?
  response.write("123")
?>

运行后会自动转换为纯 aardio 代码如下：

print("abc");
response.write("123");

在 HTTP 后端中，print 函数实际上就是指向用于向 HTTP 客户端输出数据的 response.write() 函数。

在 HTTP 后端有两个最常用的对象，request 对象包含了所有 HTTP 请求信息，而 response 对象为 HTTP 响应对象，用于向客户端发送数据。

打开 aardio 自带「工具 > 库函数文档」，点击 fastcgi.client 的文档可以查看 request, response 对象的所有属性与方法。aardio 中的所有 HTTP 服务端实现都统一兼容 fastcgi.client 文档规定的 request, response 用法。

也可以参考 aardio 开始页的 《 aardio 网站开发、FastCGI开发入门教程 》。至于 aardio 模板语法，请参考 《 aardio 语法与使用手册 > aardio 语言 > 模板语法 》

aardio 的模板语法不仅仅可以用于写 HTTP 后端，也不仅仅是可以用于输出 HTML，实际上可以用于生成任何字符串。aardio 中的很多功能都支持这种模板语法，例如运行时编译 C# 代码就支持用 aardio 模板语法生成 C# 代码。另外 aardio 提供 string.loadcode() 函数可以直接解析 aardio 模板并返回字符串。

htmx.js指示动画，aardio 后端线程

这里要注意，上面范例工程默认导入的 HTTP 服务器是：

wsock.tcp.simpleHttpServer;

这是一个多线程的 HTTP 服务端，每次被请求执行的 aardio 代码都是在后台线程中运行。aardio 多线程开发要注意的是每个线程都运行在独立的环境，全局变量是相互隔离的，这个限制实际上让 aardio 的多线程开发更简洁，坑更少，具体请参考 aardio 自带「范例程序 > aardio 语言 > 多线程」。

如果改为 wsock.tcp.asynHttpServer 则是单线程异步的 HTTP 服务器。

下面我们仍然使用默认的 simpleHttpServer 。多线程的好处是耗时操作不会卡界面。后端在进行耗时操作时，网页前端通常需要显示一个动画，htmx.js 做这事就很简单。

我们只要简单的修改一下前面讲过的网页代码如下：

<button hx-get="/api/index.aardio" 
    hx-indicator="#indicator" >
    点这里发送 GET 请求
button><br>

<img id="indicator" 
    class="htmx-indicator" 
    src="/images/loading.gif"/>

主要是增加了 hx-indicator 属性，该属性的值用一个 CSS 选择器指定了发送 HTTP 请求时要显示的 HTML 元素，这里指定的是 id 为 "indicator" 的元素。

实际上我们可以自定义这个请求动画的样式，我们打开样式文件 index.css 添加下面的样式：

.htmx-indicator{
    display:none;
}
.htmx-request.htmx-indicator{
    display:inline;
}

在发送请求时，网页上被设定的指示元素会自动添加 CSS 类 "htmx-request"，HTTP 请求结束会移除该类。

然后我们打开对应的 aardio 后端代码 /web/api/index.aardio ，输入以下代码：

<span>
<?

if( request.method == "GET"){
    
    /*
    这是多线程后端，
    这里等 2 秒，网页会显示加载动画
    */
    sleep(2000);
    
    response.write( time() )    
} 
?>span>

上面的代码的作用是：如果收到 GET 请求，线程就休眠 2 秒以模拟耗时操作。然后输出当前时间。

我们运行一下看看效果：

请求参数

htmx.js 提交请求的节点如果是一个表单控件，只要指定 name 属性 —— 就会自动以该名字发送请求参数，参数值就是控件的值。

如果提交请求的节点是表单，则 HTTP 请求参数为表单内所有控件的值。

也可以在节点的 hx-vals 属性中用一个 JSON 对象指定请求参数，例如网页这样写：

<button hx-get="/api/index.aardio" 
    hx-vals='{"myVal": "值"}'>
    点这里发送 GET 请求
button><br>

aardio 后端就可以使用：

request.get["myval"]

（编辑：92站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!