Framework7 - Umwelt

In diesem Kapitel wird erläutert, wie Sie Framework7 installieren und einrichten.

Sie können das Framework7 auf zwei Arten herunterladen:

Download aus dem Framework7 Github-Repository

Sie können das Framework7 mit Bower wie unten gezeigt installieren -

bower install framework7

Nach erfolgreicher Installation von Framework7 müssen Sie die folgenden Schritte ausführen, um Framework7 in Ihrer Anwendung zu verwenden.

Step 1 - Sie müssen installieren gulp-cli Verwenden Sie den folgenden Befehl, um Entwicklungs- und Dist-Versionen von Framework7 zu erstellen.

npm install gulp-cli

Das CLI steht für Command Line Utility für Gulp.

Step 2 - Der Gulp muss global mit dem folgenden Befehl installiert werden.

npm install --global gulp

Step 3- Installieren Sie als Nächstes den NodeJS-Paketmanager, der die Knotenprogramme installiert, mit denen Abhängigkeiten einfacher angegeben und verknüpft werden können. Der folgende Befehl wird verwendet, um die npm zu installieren.

npm install

Step 4 - Die Entwicklungsversion von Framework7 kann mit dem folgenden Befehl erstellt werden.

npm build

Step 5- Sobald Sie die Entwicklungsversion von Framework7 erstellt haben, starten Sie die App mit dem folgenden Befehl aus dist / folder.

npm dist

Step 6 - Behalten Sie Ihren App-Ordner auf dem Server und führen Sie den folgenden Befehl für die Navigation zwischen den Seiten Ihrer App aus.

gulp server

Laden Sie die Framework7-Bibliothek von CDNs herunter

Ein CDN- oder Content Delivery-Netzwerk ist ein Netzwerk von Servern, die Dateien für Benutzer bereitstellen. Wenn Sie einen CDN-Link auf Ihrer Webseite verwenden, wird die Verantwortung für das Hosten von Dateien von Ihren eigenen Servern auf eine Reihe externer übertragen. Dies bietet auch den Vorteil, dass ein Besucher Ihrer Webseite, der bereits eine Kopie von Framework7 von demselben CDN heruntergeladen hat, diese nicht erneut herunterladen muss. Sie können die folgenden CDN-Dateien in das HTML-Dokument aufnehmen.

Die folgenden CDNs werden in einem verwendet iOS App layout - -

<link rel = "stylesheet" 
   href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />

Es wird verwendet, um die Framework7 iOS CSS-Bibliothek in Ihre Anwendung aufzunehmen.

<link rel = "stylesheet" 
   href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />

Es wird verwendet, um Framework7 iOS-bezogene Farbstile in Ihre Anwendung aufzunehmen.

Die folgenden CDNs werden in verwendet Android/Material App Layout - -

<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>

Es wird verwendet, um die Framework7 JS-Bibliothek in Ihre Anwendung aufzunehmen.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>

Es wird verwendet, um das Framework7-Material-Styling in Ihre Anwendung aufzunehmen.

In diesem Tutorial verwenden wir die CDN-Versionen der Bibliothek. Wir verwenden AMPPS-Server (AMPPS ist ein WAMP-, MAMP- und LAMP-Stapel von Apache-, MySQL-, MongoDB-, PHP-, Perl- und Python-Servern), um alle unsere Beispiele auszuführen.

Beispiel

Das folgende Beispiel zeigt die Verwendung einer einfachen Anwendung in Framework7, bei der das Warnfeld mit der benutzerdefinierten Meldung angezeigt wird, wenn Sie auf die Navigationsleiste klicken.

<!DOCTYPE html>
<html>
   
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>My App</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>
   
   <body>
      //you can control the background color of the Status bar
      <div class = "statusbar-overlay"></div>
      <div class = "panel-overlay"></div>
      
      <div class = "panel panel-right panel-reveal">
         <div class = "content-block">
            <p>Contents goes here...</p>
         </div>
      </div>
      
      <div class = "views">
         <div class = "view view-main">
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">My App</div>
                  <div class = "right">
                     <a href = "#" class = "link icon-only open-panel">
                        <i class = "icon icon-bars"></i>
                     </a>
                  </div>
               </div>
            </div>
            
            <div class = "pages navbar-through toolbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <p>This is simple application...</p>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "envirmnt_about.html" class = "">
                                 <div class = "item-content">
                                    <div class = "item-inner">
                                       <div class = "item-title">Blog</div>
                                    </div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">First Link</a>
                  <a href = "#" class = "link">Second Link</a>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
            
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });

         //use the 'pageInit' event handler for all pages
         $$(document).on('pageInit', function (e) {
         
            //get page data from event data
            var page = e.detail.page;

            if (page.name === 'blog') {
            
               // you will get below message in alert box when page with data-page attribute is equal to "about"
               myApp.alert('Here its your About page');
            }
         })
      </script>
   </body>

</html>

Als nächstes erstellen Sie eine weitere HTML-Seite, dh envirmnt_about.html wie unten gezeigt -

envirmnt_about.html

<div class = "navbar">
   <div class = "navbar-inner">
      <div class = "left">
         <a href = "#" class = "back link">
            <i class = "icon icon-back"></i>
            <span>Back</span>
         </a>
      </div>
      
      <div class = "center sliding">My Blog</div>
      <div class = "right">
         <a href = "#" class = "link icon-only open-panel">
            <i class = "icon icon-bars"></i>
         </a>
      </div>
   </div>
</div>

<div class = "pages">
   <div data-page = "blog" class = "page">
      <div class = "page-content">
         <div class = "content-block">
            <h2>My Blog</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
         </div>
      </div>
   </div>
</div>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

Speichern Sie den obigen HTML-Code als framework7_environment.html Datei in Ihrem Server-Stammordner.
Öffnen Sie diese HTML-Datei als http: //localhost/framework7_environment.html und die Ausgabe wird wie unten gezeigt angezeigt.
Wenn Sie auf die Navigationsleiste klicken, wird das Warnfeld mit der benutzerdefinierten Nachricht angezeigt.