Membuat aplikasi HTML5 mudah alih dengan Rangka Kerja App

mata teras

Rangka Kerja App adalah perpustakaan JavaScript yang membolehkan penciptaan aplikasi mudah alih HTML5/JavaScript yang diilhamkan oleh jQuery tetapi mempunyai jejak memori yang jauh lebih rendah daripada JQuery Mobile.
pada platform Android dan iOS, rangka kerja aplikasi lebih cepat daripada jQuery dan lebih berkuasa, menjadikannya penyelesaian yang kuat untuk rangka kerja HTML5 mudah alih.
Tutorial ini membimbing anda melalui arahan langkah demi langkah tentang cara membuat aplikasi mudah alih HTML5 menggunakan rangka kerja aplikasi, dari menubuhkan pelayan Apache dan PHP untuk mewujudkan GUI dinamik.
Rangka kerja aplikasi menyediakan sebahagian besar ciri jQuery untuk peranti mudah alih, dengan perpustakaan yang kaya dan prestasi tinggi, menjadikannya rangka kerja HTML5 mudah alih yang komprehensif.
Aplikasi mudah alih HTML5 adalah platform-agnostik dan lebih mudah untuk mengemaskini dan mengekalkan daripada aplikasi asli, bagaimanapun, mereka mungkin tidak memberikan tahap prestasi atau akses yang sama kepada semua ciri peranti.

Apakah rangka kerja aplikasi?

Rangka Kerja APP adalah perpustakaan JavaScript untuk pembangunan aplikasi HTML5 mudah alih. Ia membolehkan anda membina aplikasi mudah alih HTML5/JavaScript yang mudah, kaya dan lengkap. Tutorial pendek ini adalah pengenalan kepada rangka kerja aplikasi, yang memperkenalkan konsep asas dan konsep utama. Perpustakaan Rangka Kerja App diilhamkan oleh JQuery. Rangka kerja aplikasi boleh merancang antara muka yang kuat untuk peranti mudah alih seperti Android atau iOS. Rangka kerja aplikasi terdiri daripada tiga bahagian: Perpustakaan Permintaan dan Pengurusan Acara, Perpustakaan Antara Muka Grafik, dan pemalam perpustakaan WebKit. Perpustakaan mempunyai lebih banyak fungsi daripada jQuery Mobile. Satu lagi kelebihan kerangka aplikasi ialah ia hanya memerlukan memori 3kb, sementara jQuery memerlukan 35kb. Pada Android, skrip adalah tiga kali lebih cepat daripada jQuery dan 2.2 kali lebih cepat pada iOS.

Rangka Kerja Kompetitif

Rangka kerja aplikasi mempunyai beberapa kerangka kompetitif. Rangka kerja ini mempunyai kira -kira fungsi yang sama seperti rangka kerja aplikasi. Kita boleh menyebut beberapa rangka kerja yang paling terkenal: JQuery Mobile, Sencha Touch, JQTouch. Kelebihan terbesar kerangka aplikasi adalah kelajuan ringan dan pelaksanaannya. Rangka Kerja APP adalah penyelesaian yang paling kuat dalam rangka kerja HTML 5 mudah alih.

prasyarat

Buat proksi

Untuk keperluan khusus tutorial ini, kita perlu membuat permintaan silang domain melalui Ajax. Untuk mengendalikan permintaan ini, anda perlu menyediakan pelayan Apache dan PHP. Oleh kerana JavaScript tidak secara langsung menguruskan permintaan silang domain, kami akan menubuhkan proksi kecil melalui PHP. Salin dan tampal kod berikut ke dalam fail server.php yang terletak di lokasi yang sama dengan halaman HTML. Modul "php_curl" mesti diaktifkan dalam php.ini.

<?php
$url = $_GET["url"];
$ch = curl_init(); // 检查php.ini中是否启用了php_curl扩展
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$xml = curl_exec($ch);
echo $xml;
curl_close($ch);
?>

Rangka Kerja App

Rangka kerja aplikasi adalah versi mudah alih jQuery, jadi kedua -dua kerangka menggunakan sintaks yang sama. Untuk tutorial ini, lebih baik mengetahui pengetahuan jQuery. Rangka kerja aplikasi boleh dimuat turun dari alamat ini. Salin dan tampal folder dan fail berikut ke dalam direktori laman web anda: - Kitchensink - Plugin - UI

Nota: Untuk menguji, anda memerlukan penyemak imbas yang serasi dengan WebKit dan HTML5.

tutorial

Kami akan menunjukkan kepada anda bagaimana untuk membina aplikasi mudah alih anda menggunakan rangka kerja aplikasi dengan contoh ini. Singkatnya, contoh kami akan berdasarkan konsep pembaca suapan RSS kecil. Ini hanya untuk memberi anda idea tentang asas -asas rangka kerja aplikasi. Pertama, kami akan menggunakan Jqui untuk membina GUI kami dan melaksanakan beberapa ciri menggunakan rangka kerja aplikasi.

Buat halaman

Mulakan satu, kami akan membuat halaman kami dan mengkonfigurasi rangka kerja aplikasi kami. Ini adalah rangka kerja untuk aplikasi rangka kerja aplikasi:

<?php
$url = $_GET["url"];
$ch = curl_init(); // 检查php.ini中是否启用了php_curl扩展
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$xml = curl_exec($ch);
echo $xml;
curl_close($ch);
?>

Buat halaman bernama "index.html" dalam direktori root pelayan dan tambahkan kod di atas. Kod ini adalah asas halaman, yang mengimport skrip yang anda perlukan untuk menggunakan rangka kerja aplikasi. Aplikasi kami akan dipecah menjadi dua komponen: halaman, kandungan dan menunya. Menggunakan Rangka Kerja App, untuk membuat halaman, kami akan membuat pelbagai div dalam "kandungan" div fail HTML.

Kami akan bermula dengan membuat halaman utama "RSS" kami. Ia akan mengandungi input yang membolehkan pengguna memasukkan pautan RSS dan panel yang mengandungi senarai tajuk dalam aliran RSS. Dalam div "Afui" kita akan menambah "kandungan" div. Kami akan membuat halaman yang berbeza dari aplikasi dalam div khusus ini. Halaman pertama kami berjudul "RSS".

(Kandungan berikut adalah serupa dengan teks asal, tetapi ayat-ayat telah diselaraskan dan ditulis semula, mengekalkan makna asal. Oleh kerana batasan ruang, kandungan pseudo-asal yang tersisa di sini.)

(baki bahagian kandungan yang ditulis semula ditinggalkan kerana sekatan panjang. Struktur dan maklumat tetap sama, tetapi kata-kata itu diubah untuk pengaliran.)

Atas ialah kandungan terperinci Membuat aplikasi HTML5 mudah alih dengan Rangka Kerja App. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!