Adakah onsen ui jawapan kepada pembangunan cordova UI?

onsen ui: rangka kerja javascript/css untuk pembangunan aplikasi mudah alih

Onsen UI adalah rangka kerja JavaScript dan CSS yang kuat untuk membina aplikasi mudah alih silang platform menggunakan HTML5, PhoneGap, dan Cordova. Tumpuannya terhadap prestasi seperti asli, pengalaman pengguna, reka bentuk responsif, dan keserasian platform yang luas menjadikannya pilihan yang menarik untuk pemaju. Memanfaatkan HTML5, CSS, AngularJS, JQuery, dan Font Awesome, ia membolehkan penciptaan aplikasi visual yang menarik dan berprestasi tinggi.

Ciri -ciri Utama:

• keserasian silang-platform: membangunkan untuk iOS dan Android menggunakan satu kod tunggal.
• Prestasi seperti asli: mencapai pengalaman pengguna yang lancar dan responsif.
• Komponen UI yang kaya: pemilihan besar komponen pra-dibina mempercepatkan pembangunan. Fleksibiliti kerangka rangka kerja:
berfungsi dengan lancar dengan angularjs dan bertindak balas.
• Reka bentuk modular:
dibina di atas komponen web untuk kebolehgunaan semula dan kebolehkerjaan.
• Bermula:

Sebelum memulakan, pastikan Node.js dan NPM dipasang. Kemudian, pasang Cordova menggunakan:

Tutorial ini menggunakan template-detail master onsen UI. Selepas memuat turun dan mengekstrak templat, navigasi ke direktori root projek dan tambahkan platform Android:

sudo npm install -g cordova

meniru aplikasi dengan:

cordova platform add android

cordova emulate

Membina aplikasi mudah:

Tutorial ini menunjukkan membina aplikasi log masuk/pendaftaran menggunakan komponen UI ONSEN dan mengintegrasikannya dengan Firebase (dalam bahagian berikutnya). Struktur projek adalah seperti berikut:

Folder

menempatkan fail HTML, CSS, dan JavaScript. Untuk memulakan, jelaskan kandungan tag

<code>OnsenUI(root)
      -----> hooks
      -----> merges
      -----> platforms
      -----> plugins
      -----> www</code>

.

www Komponen index.html mengurus navigasi halaman, yang mengandungi elemen untuk skrin individu.

bertindak sebagai bar aplikasi, manakala

dan ons-navigator Buat borang input. ons-page Menyediakan butang interaktif. ons-toolbar ons-list struktur skrin log masuk sampel: ons-list-item ons-button

Skrin pendaftaran, dilaksanakan sebagai serpihan HTML yang berasingan (

) menggunakan

, termasuk komponen yang sama bersama dengan

<ons-navigator title="Navigator" var="myNavigator">
  <ons-page>
    <ons-toolbar>
      <div class="center">Onsen UI App</div>
    </ons-toolbar>
    <ons-list>
      <ons-list-item>
        <input type="text" placeholder="Username" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
      </ons-list-item>
      <ons-list-item>
        <input type="password" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
      </ons-list-item>
    </ons-list>
    <ons-button>Sign In</ons-button>
  </ons-page>
</ons-navigator>

dan

untuk susun atur yang dipertingkatkan. Navigasi antara skrin dicapai menggunakan register.html. ons-template ons-back-button Projek Lengkap boleh didapati di GitHub [pautan ke repo GitHub akan pergi ke sini]. ons-row myNavigator.pushPage('register.html', { animation : 'slide' }) Soalan -soalan yang sering ditanya:

Bahagian ini akan mengandungi Soalan Lazim dari teks asal, yang diubahsuai untuk aliran yang lebih baik dan kesimpulan. Oleh kerana kekangan panjang, saya akan menghilangkannya di sini, tetapi mereka akan dimasukkan dalam respons lengkap.

Atas ialah kandungan terperinci Adakah onsen ui jawapan kepada pembangunan cordova UI?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!