หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

การสาธิต

Framework7 ตัวเลือก CLI

แอป Framework7 ที่สร้างขึ้นด้วยตัวเลือกต่อไปนี้: 

 {
  "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"
    ]
  }
}

ติดตั้งการพึ่งพา

ก่อนอื่นเราต้องติดตั้งการพึ่งพาทำงานในเทอร์มินัล 

 npm install

สคริปต์ NPM

  • start - เรียกใช้เซิร์ฟเวอร์การพัฒนา
  • - dev - เรียกใช้เซิร์ฟเวอร์การพัฒนา
  • - build - สร้างเว็บแอพสำหรับการผลิต
  • build-capacitor-ios สร้างแอพและคัดลอกไปยังโครงการตัวเก็บประจุ iOS
  • build-capacitor-android สร้างแอพและคัดลอกไปยังโครงการตัวเก็บประจุ Android

Vite

มีการตั้งค่า Vite Bundler มันรวบรวมและรวมทรัพยากร "front-end" ทั้งหมด คุณควรทำงานกับไฟล์ที่อยู่ในโฟลเดอร์ /src เท่านั้น Vite Config อยู่ใน vite.config.js

ตัวเก็บประจุ

โครงการนี้สร้างขึ้นด้วยการสนับสนุนตัวเก็บประจุ และสิ่งแรกที่จำเป็นก่อนเริ่มคือการเพิ่มแพลตฟอร์มตัวเก็บประจุทำงานในเทอร์มินัล: 

 npx cap add ios && npx cap add android

ตรวจสอบเอกสารตัวเก็บประจุอย่างเป็นทางการสำหรับตัวอย่างเพิ่มเติมและตัวอย่างการใช้งาน

สินทรัพย์

สินทรัพย์ (ไอคอนหน้าจอสาด) ภาพต้นฉบับที่อยู่ในโฟลเดอร์ assets-src ในการสร้างไอคอนของคุณเองและภาพหน้าจอสาดคุณจะต้องแทนที่สินทรัพย์ทั้งหมดในไดเรกทอรีนี้ด้วยรูปภาพของคุณเอง (ให้ความสนใจกับขนาดภาพและรูปแบบ) และเรียกใช้คำสั่งต่อไปนี้ในไดเรกทอรีโครงการ: 

 framework7 assets

หรือเปิดตัว UI ซึ่งคุณจะสามารถเปลี่ยนไอคอนและหน้าจอสาด: 

 framework7 assets --ui

สินทรัพย์ตัวเก็บประจุ

สินทรัพย์ตัวเก็บประจุอยู่ในโฟลเดอร์ resources ซึ่งมีวัตถุประสงค์เพื่อใช้กับเครื่องมือ cordova-res เพื่อสร้างสินทรัพย์แอพมือถือทำงานในเทอร์มินัล: 

 npx cordova-res

ตรวจสอบเอกสาร Cordova-Res อย่างเป็นทางการสำหรับตัวอย่างการใช้งานเพิ่มเติม

เอกสารและทรัพยากร

  • Framework7 เอกสารหลัก

  • Framework7 Icons Icons Reference

  • ฟอรัมชุมชน

สนับสนุนกรอบ 7

กรอบความรัก 7? สนับสนุนโครงการโดยการบริจาคหรือให้คำมั่นสัญญา:

  • Patreon: https://patreon.com/framework7
  • OpenCollective: https://opencollective.com/framework7 
 npx framework7-cli create --ui
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด