网站首页 > 知识剖析正文

认识下webview-ffi吧，Cangjie也能用js/html/css开发桌面程序了

nixiaole 2025-01-31 14:37:01 知识剖析 14 ℃

用html和js写桌面程序一直都备受大家推崇，现在仓颉也有了，通过对C的绑定，可以使用webview-ffi这个框架开发运行自己的桌面程序，地址是https://gitcode.com/Cangjie-SIG/webview-ffi/overview，小伙伴们可以尝试下，当然调用有很多种方法，这里简单介绍一种：

1.将源码下载下来，放入工程中，与src放同一目录，同时创建存放html的目录resources和存放dll的library目录，当然，也可以直接拷贝源码里的目录和文件,如图：

2.修改cjpm.toml,引入webview-ffi

[dependencies]
webview_ffi = {path = "./webview_ffi"}

[package]
  cjc-version = "0.56.4"
  compile-option = ""
  description = "nothing here"
  link-option = ""
  name = "cjportal"
  output-type = "executable"
  override-compile-option = ""
  src-dir = ""
  target-dir = ""
  version = "1.0.0"
  package-configuration = {}

[target.x86_64-w64-mingw32]
  compile-option = "-L ./library/win -l webview"
  link-option = "-rpath ./library/win -subsystem windows"

3.在main.cj里编写调用代码。

先创建一个窗口，可以设置大小和窗口名称

//最后一个参数代表是否可开启调试控制台
let w = webview("aichuanzhi", 630, 500, false)

调用的时候，有两种展示方式：

设置网站的访问地址，去加载远程页面

w.setUrl("https://www.aichuanzhi.com/")
w.run()
w.destroy()

访问本地的html，绑定函数，并在代码里调用。

//main.cj
w.setResources("resources/")
		//创建绑定函数
    w.bind("hello", { _ =>
        var result: JsonValue = JsonInt(1)
        Result(result)
    })
 w.run()
 w.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>计数器示例</title>
    <script>
        // 初始化计数器  
        let count = 0;

        // 当文档加载完毕后执行  
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('count').innerText = count;

            // 为按钮添加点击事件监听器  
            document.getElementById('incButton').addEventListener('click', function () {
              //调用仓颉定义的函数  
              hello().then((error) => {
                    console.log("hello aichuanzhi!");
                });

                count++;
                document.getElementById('count').innerText = count;
            });
        });
    </script>
</head>

<body>
    <div style="text-align:center; margin-top:100px;">
        <button id="incButton">点我,调用绑定的函数</button>
        <p>Count: <span id="count">0</span></p>
    </div>
</body>

</html>

运行效果如图：

初步体验后，这个框架感觉还处于初级阶段，有几个影响体验的点，比如窗口图标的展示，系统托盘不完善,server启动和html加载不同步时，界面不友好等问题，感谢开发人员的付出，希望越来越好[比心]

#冬日生活打卡季#

上一篇： FastHTML:用Python重新定义Web开发
下一篇：最快1天，搭建你的OpenAPI和开放平台

网站首页 > 知识剖析 正文

认识下webview-ffi吧，Cangjie也能用js/html/css开发桌面程序了

猜你喜欢

网站首页 > 知识剖析正文