用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加载不同步时,界面不友好等问题,感谢开发人员的付出,希望越来越好[比心]