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 包

F7 核心目录包含如下文件和目录：

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 接下来干什么？

目前，咱们已经知道如何建立应用并初始化。接下来咱们能够：

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