如何使用 HTML 和 JS 开发 Ubuntu 应用程序？
36 webapps html5 application-development webapp-development
我正在开发一个应用程序，我认为 HTML 和 JavaScript 对未来更好，但我找不到任何教程（我需要该应用程序使用系统主题）。
是否有 Unity、消息菜单和通知、couchdb 等的绑定？
and*_*ing 25
在developer.ubuntu.com上可以找到 Ubuntu 上绑定和 API 的一个很好的起点。我对它没有任何经验，但您可能还想研究Gjs，GNOME 的 Javascript 绑定。
根据您尝试执行的操作，您可以像构建任何 HTML + JS 应用程序一样构建应用程序，然后将其放入 Webkit 视图中。在python中做起来非常简单：
#!/usr/bin/env python
from gi.repository import Gtk, WebKit
import os, sys
class Browser:
def __init__(self):
self.window = Gtk.Window()
self.window.set_default_size(800, 600)
view = WebKit.WebView()
view.load_html_string("<strong>Hello World!</strong>", "file:///")
self.window.add(view)
self.window.show_all()
self.window.connect('destroy', lambda w: Gtk.main_quit())
def main():
app = Browser()
Gtk.main()
if __name__ == "__main__":
main()
- JS 也是真正的编程。 (7认同)
dv3*_*0ea 17
您可以通过在 Gtk 窗口中使用嵌入式 WebKit 框架来使用 HTML + Javascript 开发界面（这在 Python 中最容易实现）。最难的部分是从您的 HTML/Javascript 应用程序与系统通信。
您可以通过在 Javascript 和 Python 之间传递消息来做到这一点。但是，您必须将系统逻辑编写为 Python 函数，但这很容易做到。
这是一个简单的例子，展示了 Python 和 Javascript 之间的通信。在示例中，HTML/Javascript 显示一个按钮，单击该按钮时将一个数组发送["hello", "world"]到 Python，Python 将数组连接到一个字符串“hello world”并将其发送回 Javascript。Python 代码将数组的表示打印到控制台，Javascript 代码弹出一个显示字符串的警告框。
例子.py
import gtk
import webkit
import json
import os
JAVASCRIPT = """
var _callbacks = {};
function trigger (message, data) {
if (typeof(_callbacks[message]) !== "undefined") {
var i = 0;
while (i < _callbacks[message].length) {
_callbacks[message][i](data);
i += 1;
}
}
}
function send (message, data) {
document.title = ":";
document.title = message + ":" + JSON.stringify(data);
}
function listen (message, callback) {
if (typeof(_callbacks[message]) === "undefined") {
_callbacks[message] = [callback];
} else {
_callbacks[message].push(callback);
}
}
"""
class HTMLFrame(gtk.ScrolledWindow):
def __init__(self):
super(HTMLFrame, self).__init__()
self._callbacks = {}
self.show()
self.webview = webkit.WebView()
self.webview.show()
self.add(self.webview)
self.webview.connect('title-changed', self.on_title_changed)
def open_url(self, url):
self.webview.open(url);
self.webview.execute_script(JAVASCRIPT)
def open_path(self, path):
self.open_url("file://" + os.path.abspath(path))
def send(self, message, data):
self.webview.execute_script(
"trigger(%s, %s);" % (
json.dumps(message),
json.dumps(data)
)
)
def listen(self, message, callback):
if self._callbacks.has_key(message):
self._callbacks[message].append(callback)
else:
self._callbacks[message] = [callback]
def trigger(self, message, data, *a):
if self._callbacks.has_key(message):
for callback in self._callbacks[message]:
callback(data)
def on_title_changed(self, w, f, title):
t = title.split(":")
message = t[0]
if not message == "":
data = json.loads(":".join(t[1:]))
self.trigger(message, data)
def output(data):
print(repr(data))
if __name__ == "__main__":
window = gtk.Window()
window.resize(800, 600)
window.set_title("Python Gtk + WebKit App")
frame = HTMLFrame()
frame.open_path("page.html")
def reply(data):
frame.send("alert", " ".join(data))
frame.listen("button-clicked", output)
frame.listen("button-clicked", reply)
window.add(frame)
window.show_all()
window.connect("destroy", gtk.main_quit)
gtk.main()
页面.html
<html>
<body>
<input type="button" value="button" id="button" />
<script>
document.getElementById("button").onclick = function () {
send("button-clicked", ["hello", "world"]);
};
listen("alert", function (data) {alert(data);});
</script>
</body>
</html>
您真正需要在这里注意的唯一 python 代码是从def output(data):文件到末尾的代码，它应该很容易理解。
要运行此确保python-webkit并python-gtk2已安装，然后将文件保存在同一文件夹中并运行：
python example.py
我开发了BAT，这是一个使用 HTML、JS 和 CSS 构建桌面应用程序的小工具。
例子
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
font-family: Monaco, monospace;
color: white;
background: #3C3B38;
}
h1 { text-align: center; }
p { text-align: justify; }
button {
padding: 10px 20px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
display: block;
font-size: 14px;
text-decoration: none;
border: 1px solid #c0b7b0;
cursor: pointer;
width: 100%;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p> Ipsum deserunt architecto necessitatibus quasi rerum dolorum obcaecati aut, doloremque laudantium nisi vel sint officia nobis. Nobis ad nemo voluptatum molestiae ad. Nisi ipsum deserunt a illo labore similique ad? </p>
<p> Ipsum veniam laborum libero animi quo dignissimos. Possimus quidem consequatur temporibus consequatur odio, quidem deleniti! Similique totam placeat sint assumenda nulla dolor. Voluptatibus quasi veritatis distinctio consectetur nobis. Nemo reprehenderit? </p>
<p> Ipsum molestiae nesciunt commodi sint et assumenda recusandae! Earum necessitatibus sequi nulla fugit architecto omnis. Maiores omnis repellat cupiditate iure corporis dolorem sed amet nesciunt. Mollitia sapiente sit repellendus ratione. </p>
<p> Consectetur architecto ratione voluptate provident quis. At maiores aliquam corporis sit nisi. Consectetur ab rem unde a corporis reiciendis ut dolorum, tempora, aut, minus. Sit adipisci recusandae doloremque quia vel! </p>
<button onclick="BAT.closeWindow()">Close</button>
</body>
</html>
而且，我们这样运行它：
bat -d index.html -t "BAT Hello World" -s 800x500
结果是：
好吧，您可以包含一种可以运行 php 等 shell 命令的语言，这样就可以利用从网页安装应用程序和执行一些命令等功能（例如根据系统主题检测要使用哪个主题以及要使用什么 CSS）。例如，您有两个问题可能会有所帮助：
服务器可以同时处理 shell 命令吗？（这里讲的是执行多个命令）
从网络运行线路命令（单击网页链接）（其中讨论单击链接并从软件中心安装应用程序）
要了解使用的主题，您可以解析 ubuntu 文件，其中包含默认主题的值，并根据它修改站点的 CSS 以反映新主题。
有关主题以及在哪里可以找到它的问题可以在这里找到：
所有这些（如果您使用搜索，则更多）可以帮助您了解解析时在哪里查找以及可以检查哪些文件以了解系统正在使用什么主题以及然后在网页中使用什么。