Framework7 v4 Core 文檔翻譯（一）

時間  2019-11-30
標籤 framework7 framework v4 core 文檔 翻譯 简体版
原文   原文鏈接

注：本文爲意譯，僅做爲加深本身對框架理解的筆記總結，強烈建議去看官網英文文檔：Framework7 Core / API。javascript

Get Started 開始吧！

開始用 Framework7 建立使人驚歎的 iOS & Android 應用吧！css

在你開始以前，咱們強烈建議你閱讀 Installation Guide，下載安裝 Framework7，而後看看最基本的佈局界面。html

Framework7 的學習曲線是很是平穩的，若是你知道 HTML、CSS，還有一點的 JS 基礎，那麼你幾乎知道該如何用 Framework7 建立應用了。java

那麼，讓咱們先從基礎的 App HTML Layout 開始吧。ios

注意：後面將 Framework7 縮寫爲 F7。git

Installation 安裝

有三種安裝方式，分別是：github

Framework7 CLI 使用腳手架

Framework7 Command-Line Interfaceweb

強烈推薦使用這種方法建立應用。由於這種方式能夠提供更完整的、現成的模板和平臺兼容性，還有一些最佳開發實踐。apache

Ready To Use Templates 使用模板

Ready To Use Framework7 Templates & Toolsnpm

在這裏你能夠查看入門應用模板、工具，或者直接使用某些包含預設置的應用。

Manual Installation 手動安裝

咱們能夠經過如下幾種途徑來下載/安裝 F7：

注：下載完 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. 瞭解剩餘的組件
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程