Php-WebView 现代跨平台 GUI分享

news2024/11/23 23:45:17

GitHub :php-webview

一个用于 C/C++ 的小型跨平台 Web 视图库，用于构建现代跨平台 GUI。
该项目的目标是为最广泛使用的平台创建一个通用的 HTML5 UI 抽象层。
它支持双向 JavaScript 绑定（从 C/C++ 调用 JavaScript 和从 JavaScript 调用 C/C++）。

条件

需要在php环境中ini文件配置 FFI拓展

整合包

PhpWebView基础模板: php基于webview开发的模板

安装

composer require 0hr/php-webview

示例 index.php

<?php

require_once './vendor/autoload.php';

use PhpWebView\WebView;
use PhpWebView\WindowSizeHint;
// 实例
$webview = new WebView('Php WebView', 480, 320, WindowSizeHint::HINT_NONE, true);
// 设置HTML
$webview->setHTML('<center> PHP-WEBVIEW is 牛比~ </center>');
// 运行
$webview->run();
// 销毁
$webview->destroy();

运行

php index.php

更多内容请查看该作者的GitHub！

使用教程

配置

/**
 * @param string $title 窗口标题
 * @param int $width 窗口宽度
 * @param int $height 窗口高度
 * @param WindowSizeHint $hint 大小提示 0，1，2，3
 * @param bool $debug debug模式 默认：false
 */
$webview = new WebView('Php WebView', 480, 320, WindowSizeHint::HINT_NONE, true);

获取与设置

// 获取ffi          返回：FFI
$webview->getFFI();
// 获取webview      返回：mixed
$webview->getWebview();
// 获取窗口标题     返回：string
$webview->getTitle();
// 设置窗口标题     参数：title=string
$webview->setTitle(title:"新的标题");
// 获取窗口宽度     返回：int
$webview->getWidth();
// 设置窗口宽度     参数：width=int
$webview->setWidth(width:100);
// 获取窗口高度     返回：int
$webview->getHeight();
// 设置窗口高度     参数：height=int
$webview->setHeight(height:100);
// 获取窗口大小提示  返回：int
$webview->getHint();
// 设置窗口大小提示  参数：hint=WindowSizeHint::HINT_MIN
$webview->setHint(hint:WindowSizeHint::HINT_MIN);
// 判断是否debug    返回：bool
$webview->isDebug();
// 设置html内容     参数：html=string
$webview->setHTML(html:"<a>html的内容</a>");
// 绑定交互的操作    参数：name=string ，闭包函数：$req 是接收到的参数,$seq 是触发次数
$webview->bind(name:"bindName",function($seq, $req, $context){
    return ["返回内容","返回数组"];
});
// 解除绑定         参数：name=你绑定过的name名
$webview->unbind(name:"bindName");
// 设置窗口url内容  参数：url=string
$webview->navigate(url:"http://www.baidu.com");
// 运行
$webview->run();
// 销毁
$webview->destroy();

与JS交互示例

index.php 文件

<?php

require_once './vendor/autoload.php';

use PhpWebView\WebView;
use PhpWebView\WindowSizeHint;
// 实例
$webview = new WebView('Php WebView', 480, 320, WindowSizeHint::HINT_NONE, true);
// 获取html
$html = file_get_contents('index.html');
// 设置HTML
$webview->setHTML($html);
// 绑定btn
$webview->bind('btn', function ($seq, $req, $context) {
    return $req;
});
// 运行
$webview->run();
// 销毁
$webview->destroy();

index.html 文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
</head>

<body>
    <h1>Hello World</h1>
    <button id="btn">点击</button>
    <script>
        // 点击
        $("#btn").on("click", function () {
            // 消息
            let msg = "hello php"

            // 绑定函数
            btn(msg).then(function (data) {
                alert(data)
            })

        })
    </script>
</body>

</html>

参考链接

https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/?form=MA13LH#download

Microsoft Edge 浏览器开发控件WebView2 尝鲜_microsoft edge webview2-CSDN博客