Framework7 - Môi trường

Trong chương này, chúng ta sẽ thảo luận về cách cài đặt và thiết lập Framework7.

Bạn có thể tải xuống Framework7 theo hai cách:

Tải xuống từ kho lưu trữ Github của Framework7

Bạn có thể cài đặt Framework7, sử dụng Bower như hình dưới đây -

bower install framework7

Sau khi cài đặt thành công Framework7, bạn cần làm theo các bước dưới đây để sử dụng Framework7 trong ứng dụng của mình -

Step 1 - Bạn cần cài đặt gulp-cli để xây dựng các phiên bản phát triển và phân phối của Framework7 bằng cách sử dụng lệnh sau.

npm install gulp-cli

Các cli là viết tắt của Command Line Tiện ích cho Gulp.

Step 2 - Gulp phải được cài đặt trên toàn cầu bằng cách sử dụng lệnh sau.

npm install --global gulp

Step 3- Tiếp theo, cài đặt trình quản lý gói NodeJS, cài đặt các chương trình nút giúp chỉ định và liên kết các phần phụ thuộc dễ dàng hơn. Lệnh sau được sử dụng để cài đặt npm.

npm install

Step 4 - Phiên bản phát triển của Framework7 có thể được xây dựng bằng cách sử dụng lệnh sau.

npm build

Step 5- Khi bạn xây dựng phiên bản phát triển của Framework7, hãy bắt đầu xây dựng ứng dụng từ thư mục dist / bằng cách sử dụng lệnh sau.

npm dist

Step 6 - Giữ thư mục ứng dụng của bạn trong máy chủ và chạy lệnh sau để điều hướng giữa các trang trong ứng dụng của bạn.

gulp server

Tải xuống Thư viện Framework7 từ CDN

CDN hoặc Mạng phân phối nội dung là một mạng gồm các máy chủ được thiết kế để cung cấp tệp cho người dùng. Nếu bạn sử dụng liên kết CDN trong trang web của mình, nó sẽ chuyển trách nhiệm lưu trữ tệp từ máy chủ của bạn sang một loạt máy chủ bên ngoài. Điều này cũng mang lại một lợi thế là nếu khách truy cập vào trang web của bạn đã tải xuống bản sao của Framework7 từ cùng một CDN, nó sẽ không phải tải xuống lại. Bạn có thể đưa các tệp CDN sau vào tài liệu HTML.

Các CDN sau được sử dụng trong iOS App layout -

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

Nó được sử dụng để đưa Thư viện CSS Framework7 iOS vào ứng dụng của bạn.

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

Nó được sử dụng để bao gồm các kiểu màu liên quan đến Framework7 iOS cho ứng dụng của bạn.

Các CDN sau được sử dụng trong Android/Material App Layout -

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

Nó được sử dụng để bao gồm thư viện JS Framework7 vào ứng dụng của bạn.

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

Nó được sử dụng để đưa kiểu dáng của Framework7 Material vào ứng dụng của bạn.

Chúng tôi đang sử dụng các phiên bản CDN của thư viện trong suốt hướng dẫn này. Chúng tôi sử dụng AMPPS (AMPPS là một ngăn xếp WAMP, MAMP và LAMP của máy chủ Apache, MySQL, MongoDB, PHP, Perl & Python) để thực thi tất cả các ví dụ của chúng tôi.

Thí dụ

Ví dụ sau minh họa việc sử dụng ứng dụng đơn giản trong Framework7, sẽ hiển thị hộp cảnh báo với thông báo tùy chỉnh khi bạn nhấp vào thanh điều hướng.

<!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>

Tiếp theo, tạo thêm một trang HTML, tức là envirmnt_about.html như hình dưới đây -

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>

Đầu ra

Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -

Lưu mã HTML ở trên dưới dạng framework7_environment.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/framework7_enosystem.html và kết quả được hiển thị như hình dưới đây.
Khi bạn nhấp vào thanh điều hướng, nó sẽ hiển thị hộp cảnh báo với thông báo tùy chỉnh.