capacitore framework7 javascript mobile app starter template Unduh - capacitore framework7 javascript mobile app starter template Kode Sumber Download

capacitore framework7 javascript mobile app starter template

Kode sumber lainnya

1.0.0

Unduh

Demo

Opsi Framework7 CLI

Aplikasi Framework7 dibuat dengan opsi berikut:

 {
  "cwd": "/home/mateen/Documents/office data/mobile-apps/Framework7",
  "type": [
    "capacitor"
  ],
  "name": "Demo",
  "framework": "core",
  "template": "split-view",
  "bundler": "vite",
  "cssPreProcessor": "less",
  "theming": {
    "customColor": false,
    "color": "#007aff",
    "darkMode": false,
    "iconFonts": true
  },
  "customBuild": true,
  "customBuildConfig": {
    "rtl": false,
    "darkTheme": true,
    "lightTheme": true,
    "themes": [
      "ios",
      "md"
    ],
    "components": [
      "dialog",
      "popup",
      "login-screen",
      "popover",
      "actions",
      "sheet",
      "toast",
      "preloader",
      "progressbar",
      "sortable",
      "swipeout",
      "accordion",
      "contacts-list",
      "virtual-list",
      "list-index",
      "timeline",
      "tabs",
      "panel",
      "card",
      "chip",
      "form",
      "input",
      "checkbox",
      "radio",
      "toggle",
      "range",
      "stepper",
      "smart-select",
      "grid",
      "calendar",
      "picker",
      "infinite-scroll",
      "pull-to-refresh",
      "data-table",
      "fab",
      "searchbar",
      "messages",
      "messagebar",
      "swiper",
      "photo-browser",
      "notification",
      "autocomplete",
      "tooltip",
      "gauge",
      "skeleton",
      "color-picker",
      "treeview",
      "text-editor",
      "area-chart",
      "pie-chart",
      "breadcrumbs",
      "typography"
    ]
  },
  "pkg": "io.framework7.myapp",
  "capacitor": {
    "platforms": [
      "ios",
      "android"
    ]
  }
}

Instal dependensi

Pertama -tama kita perlu menginstal dependensi, dijalankan di terminal

 npm install

Skrip NPM

start - Jalankan Server Pengembangan
? dev - Jalankan Server Pengembangan
? build - Bangun Aplikasi Web untuk Produksi
build-capacitor-ios -Bangun aplikasi dan salin ke proyek kapasitor iOS
build-capacitor-android Bangun Aplikasi dan Salin ke Proyek Kapasitor Android

Vite

Ada pengaturan bundler vite. Ini mengkompilasi dan mengikat semua sumber daya "front-end". Anda harus bekerja hanya dengan file yang terletak di /src folder. Vite Config yang terletak di vite.config.js .

Kapasitor

Proyek ini dibuat dengan dukungan kapasitor. Dan hal pertama yang diperlukan sebelum mulai adalah menambahkan platform kapasitor, dijalankan di Terminal:

 npx cap add ios && npx cap add android

Lihat dokumentasi kapasitor resmi untuk lebih banyak contoh dan contoh penggunaan.

Aktiva

Aset (ikon, layar splash) gambar sumber yang terletak di folder assets-src . Untuk menghasilkan ikon Anda sendiri dan gambar layar splash, Anda perlu mengganti semua aset di direktori ini dengan gambar Anda sendiri (perhatikan ukuran dan format gambar), dan jalankan perintah berikut di direktori proyek:

 framework7 assets

Atau Luncurkan UI di mana Anda akan dapat mengubah ikon dan menyemprotkan layar:

 framework7 assets --ui

Aset kapasitor

Aset kapasitor terletak di folder resources yang dimaksudkan untuk digunakan dengan alat cordova-res . Untuk menghasilkan aset aplikasi seluler yang dijalankan di terminal: