23 listopada 2019

Cordova + Framework7 – instalacja

Kategoria: Cordova (phonegap) Autor: FX

Cordova cały czas ewoluuje, instalacja z biblioteką Framework7 w aktualnej wersji (listopad 2019) przedstawia się następująco

Źródło: Instalacja – poradnik w j. angielskim https://framework7.io/cli/
Potrzebujemy: instalatora pakietów Javascript NPM.

1
2
npm install -g cordova
npm install -g framework7-cli

Tworzymy teraz katalog projektu. Wchodzimy do nowego katalogu.

1
2
3
mkdir projekt
cd projekt
framework7 create --ui

Wybieramy teraz rodzaj projektu na stronie, która się otworzy automatycznie, na końcu powinien wyskoczyć screen:
Cordova info

Aby dodać do projektu dawne polecenie cordova używamy przedrostka framework7

1
framework7 cordova plugin add cordova-splash-screen

Po utworzeniu projektu można wygenerować plik APK do wgrania na telefon komórkowy (musi być włączone instalowanie aplikacji z nieznanych źródeł) poleceniem

1
framework7 cordova build android

Dodanie widoku (podstrony)

  1. w katalogu src\pages dodajemy nową stronę nazwa.f7.html
  2. podstrona musi być zapisana jako wzorzec
    1
    2
    3
    4
    5
    6
    7
    <template>
     <div class="page" data-name="about">
       <div class="navbar">
    ..........
       </div>
      </div>
    </template>
  3. w pliku home.f7.html w tym samym katalogu dodajemy przycisk do strony zgodnie z About. Ustawiamy
    1
    <a href="/nazwa/"....
  4. w pliku src\js\routes.js dodajemy wpisy:
    1
    import NazwaPage from '../pages/nazwa.f7.html';

    a niżej w tablicy var routes dodajemy wpis:

    1
    2
    3
    4
     {
        path: '/nazwa/',
        component: NazwaPage
      },

    Tworzenie pliku APK

    W katalogu projektu:

    1
    npm run build-dev-cordova-android

    Musi być ustawiona zmienna środowiskowa ANDOID_HOME (folder android-sdk)

Komentowanie wyłączone.