Framework7 - 环境

Framework7环境 - 从概述，环境，布局，导航栏，工具栏，搜索栏，状态栏，侧面板，内容块，布局网格，叠加层，预加载器，进度条，列表视图，手风琴，卡片，芯片，按钮开始学习Framework7动作按钮，表单，选项卡，Swiper滑块，照片浏览器，自动完成，选择器，日历，刷新，无限滚动，消息，消息栏，通知，延迟加载，颜色主题，细线，模板概述，自动编译，Template7页面，活动状态，点按保持事件，触摸波纹。

在本章中，我们将讨论如何安装和设置Framework7.

您可以通过两种方式下载Framework7 :

从 Framework7 Github存储库下载

您可以安装Framework7，使用Bower，如下所示 :

bower install framework7

成功安装Framework7后，您需要按照以下给定的步骤在您的应用程序中使用Framework7并减去;

步骤1 : 您需要使用以下命令安装 gulp-cli 来构建Framework7的开发和dist版本.

npm安装gulp-cli

cli 代表Gulp的命令行实用程序.

第2步 : 必须使用以下命令全局安装Gulp.

npm install --global gulp

第3步 : 接下来，安装NodeJS包管理器，它安装节点程序，以便更容易指定和链接依赖项.以下命令用于安装npm.

npm install

第4步 : 可以使用以下命令构建Framework7的开发版本.

npm build

第5步 : 构建Framework7的开发版本后，使用以下命令从 dist/文件夹开始构建应用程序.

npm dist

第6步 : 将您的应用程序文件夹保留在服务器中并运行以下命令以在应用程序页面之间导航.

gulp server

从CDN下载Framework7库

CDN或内容交付网络是一个服务器网络，旨在为用户提供文件.如果您在网页中使用CDN链接，则会将托管文件的责任从您自己的服务器转移到一系列外部服务器.这也提供了一个优势，如果您的网页的访问者已经从同一CDN下载了Framework7的副本，则不必重新下载.您可以将以下CDN文件包含在HTML文档中.

以下CDN用于 iOS应用程序布局 :

它用于将Framework7 iOS CSS库包含到您的应用程序中.

它用于为您的应用程序包含Framework7 iOS相关颜色样式.

以下CDN用于 Android/Material App Layout :

它用于将Framework7 JS库包含到您的应用程序中.

它用于在您的应用程序中包含Framework7 Material样式.

我们是在本教程中使用库的CDN版本.我们使用AMPPS(AMPPS是Apache，MySQL，MongoDB，PHP，Perl和Python的WAMP，MAMP和LAMP堆栈)服务器来执行我们的所有示例.

示例

以下示例演示了如何在Framework7中使用简单应用程序，当您单击导航栏时，它将显示带有自定义消息的警告框.

                              My App                           //you can control the background color of the Status bar

Contents goes here...

My App

This is simple application...

Blog

First Link Second Link

接下来，再创建一个HTML页面，即 envirmnt_about.html ，如下所示 :

envirmnt_about.html

                                          Back                           My Blog                                                                           My Blog
            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.

输出

让我们执行以下步骤，看看上面给出的代码如何工作 : 去;

将上述HTML代码保存为服务器根文件夹中的 framework7_environment.html 文件.
将此HTML文件打开为http://localhost/framework7_environment.html，输出显示如下.
当您单击导航栏时，它将显示带有自定义消息的警告框.