framework7中文文档教程下载

Framework7中文文档是一款可以帮助开发者们更快速的学习此工具的参考手册，主要介绍使用 Framework7 构建精美的 iOS 和 Android 应用。下面我们具体来了解一下。

开始之前强烈推荐你们阅读 快速入门，以便了解如何下载和安装 Framework7，以及她的基本布局

学习 Framework7 非常简单。只要你知道 HTML, CSS 和 一点点 Javascript，你就基本知道如何使用 Framework7 来创建一个 iOS 应用了。

为了更好学习和理解，我们建议你按左侧导航栏的顺序来阅读这些文档。

让我们从最基本的 App HTML Layout 开始吧.

使用Framework7创建iOS7应用就和搭建一个网站一样简单。你只需要一个基本的HTML布局，并且把Framework7的CSS和JS文件引入即可!Framework7不会强制你写任何自定义的标签，也不会通过JS来生成任何额外的内容。你不需要通过JS或者JSON来写页面，只需要普通的HTML就可以。

 

布局类型

导航栏&工具栏布局

在向应用添加导航栏和工具栏之前，我们需要决定使用哪种布局。

Framework7在这方面很自由，有3种不同类型的导航栏/工具栏布局，它们对应着在页面/视图中的不同位置。

静态布局

静态布局可能是最少使用的布局。在这种情况下，导航栏和工具栏只是可以滚动的页面内容的一部分，每个页面都有它自己的导航栏和工具栏。

具体内容请前往官网。

如何安装

使用 Framework7 来构建你的应用，是一件非常简单的事情。首先我们需要安装 Framework7。当然，你也可以跳过这一步，直接使用官方提供的项目模板进行构建项目，例如：starter app templates.

我们可以通过两种方式下载或安装 Framework7：

从 GitHub 下载

我们可以从 Framework7 GitHub repository 下载 Framework7 所需的文件。

通过 NPM 安装

我们也可以通过 NPM 安装 Framework7:

$ npm install framework7

从下载好的压缩包里的目录 dist/css 和 dist/js 可以找到我们需要的所有文件

ES Module

这个特性使 Framework7 能够使用 Webpack 和 Rollup 进行构建

Framework7 可以作为一个 ES-next module 进行引用使用

import Framework7 from 'framework7';

Framework7 支持模块化结构 默认版本 Framework7 只包含其核心组件。

当然，如果你有需要，完全可以自定义引入其他组件：

// Import core framework

import Framework7 from 'framework7';

// Import additional components

import Searchbar from 'framework7/dist/components/searchbar/searchbar.js';

import Calendar from 'framework7/dist/components/calendar/calendar.js';

import Popup from 'framework7/dist/components/popup/popup.js';

// Install F7 Components using .use() method on class:

Framework7.use([Searchbar, Calendar, Popup]);

// Init app

var app = new Framework({/*...*/});

这种模块化结构，不仅使结构更加清晰，并且可以优化包及文件的大小。

ES Module Bundle

如果你需要引用 Framework7 的所有组件，我们可以通过以下的脚本来引用、安装所有组件：

// Import framework with all components

import Framework7 from 'framework7/dist/framework7.esm.bundle.js';

// Init app

var app = new Framework({/*...*/});

应用基本布局

至此，我们已经下载、安装好 Framework7了，现在让我们从 App Layout 开始创建应用吧。