qmlweb 是一个 Web 版本的 QML 引擎,是个 JavaScript 驱动的 QML 引擎。CSS 和 HTML 都不擅长于界面设计和交互接口,Qt 提供了一个很好的解决方案:QML。QML 是个声明性语言,非常适用于 UI 设计。qmlweb 的目标是把 QML 的特性应用到 Web 浏览器。

代码示例:


import QtQuick 2.0

Rectangle {
width: 500; height: 200
color: "lightgray"

Text {
id: helloText
text: "Hello world!"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
font.pointSize: 24; font.bold: true
}
}

扩展 API:

registerQmlType({
module: 'MyModule',
name: 'MyTypeName',
versions: /^1(.[0-3])?$/, // that regexp must match the version number for the import to work
constructor: function(meta) {
QMLItem.call(this, meta);

var self = this;

// Managing properties
createSimpleProperty("string", this, "name"); // creates a property 'name' of type string
createSimpleProperty("var", this, "data"); // creates a property 'data' of undefined type
this.name = 'default name'; // sets a default value for the property 'name'

// Signals
this.somethingHappened = Signal(); // creates a signal somethingHappened

this.somethingHappened.connect(this, function() {
console.log('You may also connect to signals in JavaScript');
});

// Using the DOM
function updateText() {
var text = '';
for (var i = 0 ; i < self.data.length ; ++i) text += '[' + data[i] + '] '; self.dom.textContent = text; // Updating the dom self.somethingHappened(); // triggers the 'somethingHappened' signal. } // Run updateText once, ensure it'll be executed whenever the 'data' property changes. updateText(); this.onDataChanged.connect(this, updateText); } });

qmlweb 遵循 BSD 开源授权协议。
GitHub 地址:https://github.com/qmlweb/qmlweb