capacitore framework7 javascript mobile app starter template

デモ

Framework7CLIオプション

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 - 生産用のWebアプリをビルドします
• build-capacitor-iosアプリをビルドして、iOSコンデンサプロジェクトにコピーする
• build-capacitor-androidアプリをビルドして、Androidコンデンサプロジェクトにコピーする

vite

Vite Bundlerのセットアップがあります。すべての「フロントエンド」リソースをコンパイルしてバンドルします。 /srcフォルダーにあるファイルでのみ動作する必要があります。 vite.config.jsにあるVite構成。

コンデンサ

このプロジェクトは、コンデンササポートで作成されました。そして、開始前に最初に必要なのは、コンデンサプラットフォームを追加し、ターミナルで実行することです。

 npx cap add ios && npx cap add android

その他の例と使用例については、公式コンデンサのドキュメントをご覧ください。

資産

アセット（アイコン、スプラッシュ画面） assets-srcフォルダーにあるソース画像。独自のアイコンとスプラッシュ画面画像を生成するには、このディレクトリ内のすべてのアセットを独自の画像に置き換え（画像サイズと形式に注意してください）、プロジェクトディレクトリで次のコマンドを実行する必要があります。

 framework7 assets

または、アイコンとスプラッシュ画面を変更できるUIを起動します。

 framework7 assets --ui

コンデンサ資産

コンデンサ資産は、 cordova-resツールで使用することを目的としたresourcesフォルダーにあります。ターミナルで実行されるモバイルアプリアセットを生成するには：

 npx cordova-res

その他の使用例については、公式のCordova-Resのドキュメントをご覧ください。

ドキュメントとリソース

• Framework7コアドキュメント

• Framework7アイコンリファレンス

• コミュニティフォーラム

サポートフレームワーク7

愛のフレームワーク7？寄付または誓約によるサポートプロジェクト：

• パトレオン：https：//patreon.com/framework7
• opencollective：https：//opencollective.com/framework7

 npx framework7-cli create --ui