Czy mogę opracować hybrydową aplikację natywną / HTML5 dla telefonu Ubuntu?

8

Czy mogę opracować aplikację hybrydową, która była używana w połączeniu z natywnym API i HTML5 w telefonie Ubuntu?

Wiem, że można opracować aplikację natywną lub aplikację HTML5.

Chcę jednak wiedzieć, jak opracować natywną aplikację z interfejsem HTML5 (hybrydowy) w systemie Ubuntu Phone.

application-development ubuntu-touch html5 ubuntu-sdk użytkownik1793335
źródło
Jeśli masz na myśli coś więcej niż tylko interfejs użytkownika oparty na QML, na który odpowiedziała Salem, w Apache Cordova są haczyki do natywnego kodu. Wciąż studiuję Cordova, więc nie mam dla ciebie pełnej odpowiedzi, ale tam jest źródłem do przeczytania / pobrania tutaj: git-wip-us.apache.org/repos/asf?p=cordova-ubuntu.git;a=tree
OYRM

Odpowiedzi:

10

Nie jestem pewien, co masz na myśli przez „hybrydowy” (aplikacja C ++, która wyświetla aplikację internetową? Rozpowszechnia kod aplikacji między C ++ / QML / javascript?), Ale możesz użyć komponentu WebView do wyświetlenia strony internetowej / aplikacji internetowej w aplikacji qml . Powinno to również działać na Ubuntu Phone.

Weźmy tę prostą aplikację złożoną z: „app.qml”, „app.html” i „app.js” (tak, wiem, ta „aplikacja” jest dość kiepska ...). Zostało to przetestowane tylko z qmlviewer, więc jeśli spróbujesz uruchomić go przez IDE, prawdopodobnie będziesz musiał coś zmodyfikować w odniesieniu do używanych ścieżek względnych.

app.qml

import QtQuick 1.0
import QtWebKit 1.0

Rectangle {
        width: 800
        height: 600
        WebView {
                url: "app.html"
                anchors.fill: parent
                preferredWidth: 800
                preferredHeight: 600
                smooth: false
                settings.developerExtrasEnabled : true 
                settings.javascriptEnabled: true
        }
}

app.html

<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Hi</title>
        <style>
        body {
                margin: 20px;
        }
        </style>
</head>
<body>
        <a href="#" id="test_me">Click me!</a>
</body>
<script src="app.js"></script>
</html>

app.js

var x = document.getElementById("test_me");
x.onclick = function(){
        console.log("Hi there");
        new_elem = document.createElement("h2");
        new_elem.textContent = "Hi there!";
        document.getElementsByTagName("body")[0].appendChild(new_elem);
};

Mam nadzieję, że to pomoże.

Salem
źródło