ฉันสามารถพัฒนาแอพไฮบริดเนทีฟ / HTML5 สำหรับโทรศัพท์ Ubuntu ได้หรือไม่


8

ฉันสามารถพัฒนาแอพไฮบริดที่ใช้ร่วมกับ Native API และ HTML5 ในโทรศัพท์ Ubuntu ได้หรือไม่?

ฉันรู้ว่ามันเป็นไปได้ที่จะพัฒนาแอพพื้นฐานหรือแอพ HTML5

อย่างไรก็ตามฉันต้องการทราบว่าจะพัฒนาแอพแบบเนทีฟที่มี HTML5 UI (ไฮบริด) ใน Ubuntu Phone


หากคุณอ้างถึงมากกว่าเพียงแค่ส่วนต่อประสานกับผู้ใช้แบบ QML ซึ่งคำตอบของ Salem มีการเชื่อมโยงเข้ากับโค้ดเนทีฟผ่านApache Cordova ฉันยังเรียน Cordova อยู่ดังนั้นฉันจึงไม่มีคำตอบที่สมบูรณ์สำหรับคุณ แต่มี เป็นแหล่งที่มาของการอ่าน / ดาวน์โหลดที่นี่: git-wip-us.apache.org/repos/asf?p=cordova-ubuntu.git;a=tree
OYRM

คำตอบ:


10

ฉันไม่แน่ใจว่าคุณหมายถึงอะไรกับ "ไฮบริด" (แอพ C ++ ที่แสดง webapp? แจกจ่ายรหัสแอประหว่าง C ++ / QML / javascript?) แต่คุณสามารถใช้องค์ประกอบ WebView เพื่อแสดงหน้าเว็บ / เว็บแอพพลิเคชั่น qml . สิ่งนี้น่าจะใช้ได้กับ Ubuntu Phone ด้วย

ใช้แอปพลิเคชันที่เรียบง่ายนี้ซึ่งประกอบด้วย: "app.qml", "app.html" และ "app.js" (ใช่ฉันรู้ว่า "แอปพลิเคชัน" นี้ค่อนข้างอ่อนแอ ... ) นี่เป็นเพียงการทดสอบด้วยqmlviewerดังนั้นหากคุณพยายามเรียกใช้ผ่าน IDE คุณอาจต้องแก้ไขบางอย่างเกี่ยวกับพา ธ สัมพัทธ์ที่ใช้

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);
};

หวังว่ามันจะช่วย

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.