Framework7 v4 Core 文档翻译（一）

注：本文为意译，仅作为加深自己对框架理解的笔记总结，强烈建议去看官网英文文档：Framework7 Core / API。

`Get Started` 开始吧！

开始用 Framework7 创建令人惊叹的 iOS & Android 应用吧！

在你开始之前，我们强烈建议你阅读 Installation Guide，下载安装 Framework7，然后看看最基本的布局界面。

Framework7 的学习曲线是非常平稳的，如果你知道 HTML、CSS，还有一点的 JS 基础，那么你几乎知道该如何用 Framework7 创建应用了。

那么，让我们先从基础的 App HTML Layout 开始吧。

注意：后面将 Framework7 缩写为 F7。

`Installation` 安装

有三种安装方式，分别是：

`Framework7 CLI` 使用脚手架

Framework7 Command-Line Interface

强烈推荐使用这种方法创建应用。因为这种方式可以提供更完整的、现成的模板和平台兼容性，还有一些最佳开发实践。

`Ready To Use Templates` 使用模板

Ready To Use Framework7 Templates & Tools

在这里你可以查看入门应用模板、工具，或者直接使用某些包含预设置的应用。

`Manual Installation` 手动安装

我们可以通过以下几种途径来下载/安装 F7：

从 GitHub 仓库下载 framework7io/framework7
从 NPM 安装 $ npm install framework7

注：下载完 Core package，我们需要从 css 和 js 目录里获取核心文件。

`Introduction` 简介

原文：Introduction to Framework7

Framework7（简称 F7）是一个免费开源的移动 HTML 框架，可以用来开发带有原生控件样式体验的混合移动应用、网页应用。这也是一个快速原型开发工具。

F7 给你提供了一个快速上手的途径——使用相对简单容易的 HTML、CSS 和 JS。F7 是全面而丰富的，你不必限制于自己的想象且它提供了很多种解决方案，F7 真正做到了灵活自由。

F7 与各种平台并不冲突，另外它只聚焦于 iOS 和 Google Material 设计，来提供简洁极致的体验。

当前的文档暂不包括将 F7 应用程序编译到 Cordova 应用程序的过程。文档主要介绍的是关于 F7 以及如何使用它的所有组件。如果你想了解更多关于如何编译 F7 打包成 Hybrid Cordova App，建议阅读 Office Cordova Documentation（注：有中文）。

F7 的 Kitchen Sink 也是入门学习的最好地方，里面有大量的示例。

注：Kitchen Sink：很多框架会把自己的官方 Demo（指会包含所有空间的示例）叫做 Kitchen Sink ——动词，大概意思将信息一次性全部公布出来。

接下来，我们立马使用吧！

`Kitchen Sink` 示例集

原文：Kitchen Sink

Kitchen Sink 是一个很好的入门学习地方，它为所有的 F7 组件提供大量的示例，且涵盖了大多数场景。非常推荐在开发学习的时候作为一个参考。

源码在这里：framework7/kitchen-sink/

`Running Locally` 在本地运行

步骤：

1. 下载项目

将 framework7io/framework7 下载到本地并解压。

2. 安装 `Node.js`

3. 安装 `Gulp`

$ npm install --global gulp

4. 安装 F7 依赖

进入第 1 步下载解压后的目录，执行命令：

$ npm install

5. 启动

# 注：可在 `package.json` 中查看 scipts
$ npm run core:dev
$ npm run core:prod

`Framework7 Package Structure` F7 目录结构

`Package` 包

framework7/
    components/
        accordion/
            accordion.js
            accordion.less
        accordion.css
        accordion.js

        actions/
            actions.js
            actions.less
        actions.css
        actions.js

        ...
    js/         
        framework7.bundle.js
        framework7.bundle.min.js
        framework7.js
        framework7.min.js
    css/       
        framework7.bundle.css
        framework7.bundle.min.css
        framework7.bundle.rtl.css
        framework7.bundle.rtl.min.css
        framework7.css
        framework7.min.css
        framework7.rtl.css
        framework7.rtl.min.css
    framework7.esm.bundle.js
    framework7.esm.js
    framework7.bundle.less
    framework7.less

`Styles` 样式

F7 的样式文件在 css/ 目录下。

framework7.css - 包含最小（核心）的 F7 样式，且也包含了必需组件集样式
framework7.rtl.css - 同上，但为 RTL 布局（RTL：right to left）
framework7.bundle.css - 包含 F7 核心样式，同时也包含所有组件的样式
framework7.bundle.rtl.css - 同上，但为 RTL 布局（RTL：right to left）

对于开发学习，我们使用 framework.bundle.css 即可。

`Scripts(UMD)` 脚本

在 js/ 目录下有 UMD JavaScript 文件，可以直接在浏览器使用（如 <script src="...">）或者结合 Require.js 这样的库使用。

framework7.js - 包含核心方法和必要的组件方法
framework7.bundle.js - 包含核心方法和所有的组件方法

注：UMD 是什么？——UMD（Universal Module Definition），一个提供前后端跨平台的解决方案（支持 AMD 和 CommonJS 模块方式）。参考：github.com/umdjs/umd

`Components` 组件

所有组件都位于 components 文件夹中，并且需要与核心（非 bundle）版本一起使用。你可以在 Lazy Modules（按需加载）章节了解更多。

`ES Module` ES 模块

注：这功能目前可用于 Webpack 和 Rollup 构建打包。

F7 支持 ES 模块化：

import Framework7 from 'framework7';

F7 具有模块化结构，默认情况下它只导出核心 F7 和核心组件。如果你需要添加额外组件，则需要额外导入：

// Import core framework
import Framework7 from 'framework7';

// Import additional components
import Searchbar from 'framework7/components/searchbar/searchbar.js';
import Calendar from 'framework7/components/calendar/calendar.js';
import Popup from 'framework7/components/popup/popup.js';

// Install F7 Components using .use() method on class
Framework7.use([Searchbar, Calendar, Popup]);

// Init app
var app = new Framework7({
    // ...
})

这种模块化结构能提供了最佳的 tree-shaking 结果和构建打包后的体积优化。

default 导入的东西除了 Framework7，还有 Template7、Dom7、Request、Device、Utils 和 Support 这些库。

import Framework7, { Device, Request } from 'framework7';

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

if(Device.ios) {
    Request.get('http://google.com');
}

`ES Module Bundle`

当然，F7 也提供 一次性全部导入 的方式：

// Import framework with all components
import Framework7 from 'framework7/framework7.esm.bundle.js';

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

`ES-Next`

注意！由于 F7 的 ES modules 属于 ES-Next 语法，所以需要使用 Babel/Buble 来进行转译。

`App HTML Layout` 基本布局

首先，我们要做的是创建一个 index.html 文件来作为我们应用的骨架：

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Color theme for statusbar -->
    <meta name="theme-color" content="#2196f3">
    <!-- Your app title -->
    <title>My App</title>
    <!-- Path to Framework7 Library Bundle CSS -->
    <link rel="stylesheet" href="path/to/framework7.bundle.min.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="path/to/my-app.css">
  </head>
  <body>
    <!-- App root element -->
    <div id="app">
      <!-- Statusbar overlay -->
      <div class="statusbar"></div>

      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <!-- Initial Page, "data-name" contains page name -->
        <div data-name="home" class="page">

          <!-- Top Navbar -->
          <div class="navbar">
            <div class="navbar-inner">
              <div class="title">Awesome App</div>
            </div>
          </div>

          <!-- Bottom Toolbar -->
          <div class="toolbar toolbar-bottom">
            <div class="toolbar-inner">
              <!-- Toolbar links -->
              <a href="#" class="link">Link 1</a>
              <a href="#" class="link">Link 2</a>
            </div>
          </div>

          <!-- Scrollable page content -->
          <div class="page-content">
            <p>Page content goes here</p>
            <!-- Link to another page -->
            <a href="/about/">About app</a>
          </div>
        </div>
      </div>
    </div>
    <!-- Path to Framework7 Library Bundle JS-->
    <script type="text/javascript" src="path/to/framework7.bundle.min.js"></script>
    <!-- Path to your app js-->
    <script type="text/javascript" src="path/to/my-app.js"></script>
  </body>
</html>

如上所见，该布局非常简单，跟平时的 HTML 文件没什么区别，你要做的就是进入 CSS 和 JS 文件。

接下来，我们需要初始化我们的应用。

`RTL Layout` RTL 布局

RTL：right to left，从右到左，从上到下的布局方式。

F7 全面支持 RTL 布局。

你只需要引入带有 '.rtl' 的依赖文件：

<!DOCTYPE html>
  <html dir="rtl">
    <head>
      ...
      <title>My App</title>
      <!-- Path to Framework7 RTL stylesheet -->
      <link rel="stylesheet" href="path/to/framework7.bundle.rtl.min.css">

      <!-- Path to your custom app styles-->
      <link rel="stylesheet" href="path/to/my-app.css">
      ...

`Initialize App` 初始化应用

初始化：

// my-app.js
var app = new Framework7();

可以通过传参来高度自定义初始化：

var app = new Framework7({
  // App root element
  root: '#app',
  // App name
  name: 'My App',
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: 'left',
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html'
    }
  ],
  // ... other parameters
})

可以通过查阅 App/Core 章节来查看所有支持的参数。

初始化应用后，我们需要初始化 View。路由切换展示的地方，位于 App Layout 中：<div class="view view-main"></div>。View 是负责导航的、基本的 App 路由器：

var mainView = app.views.create('.view-main');

所以，最后完整的初始化代码大概如下所示：

// my-app.js
var app = new Framework7({
  root: '#app',
  name: 'My App',
  id: 'com.myapp.test',
  panel: {
    swipe: 'left',
  },
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    }
  ],
  // ... other parameters
});

var mainView = app.views.create('.view-main');

`What's next` 接下来干什么？

目前，我们已经知道如何创建应用并初始化。接下来我们可以：

查看 App/Core，了解更多与此相关的参数和方法
路由的工作原理和使用
关于 Views 的更多东西
关于 Pages 的更多东西
了解剩余的组件

Framework7 v4 Core 文档翻译（一）

Get Started 开始吧！

Installation 安装

Framework7 CLI 使用脚手架

Ready To Use Templates 使用模板

Manual Installation 手动安装

Introduction 简介

Kitchen Sink 示例集

Running Locally 在本地运行

1. 下载项目

2. 安装 Node.js

3. 安装 Gulp

4. 安装 F7 依赖

5. 启动

Framework7 Package Structure F7 目录结构

Package 包

Styles 样式

Scripts(UMD) 脚本

Components 组件

ES Module ES 模块

ES Module Bundle

ES-Next

App HTML Layout 基本布局

RTL Layout RTL 布局

Initialize App 初始化应用

What's next 接下来干什么？