Framework7

全功能 HTML 移动应用框架，用于构建 iOS、Android 和桌面端原生体验的混合应用与 PWA

移动端跨端UI组件库Vue

Framework7 是一个开源的 MIT 协议移动 UI 框架，专为构建高质量的 iOS 和 Android 混合应用、PWA 及桌面端应用而设计。支持 Vue、React、Svelte 和纯 HTML，提供 70+ UI 组件和 iOS/Material 双主题。

访问官网

Framework7

全功能 HTML 移动应用框架，用于构建 iOS、Android 和桌面端原生体验的混合应用与 PWA。

技术简介说明

Framework7 是一个开源的 MIT 协议移动 UI 框架，专为构建高质量的 iOS 和 Android 混合应用、PWA（渐进式 Web 应用）以及桌面端应用而设计。它提供了一整套预制的 UI 组件，包括对话框、弹出层、Action Sheet、Tab 栏、列表视图、表单控件等，能够高度还原 iOS 和 Material Design 的原生视觉体验，让开发者用 Web 技术栈即可获得接近原生的交互感受。

Framework7 的核心定位是轻量、灵活、不绑定特定前端框架。它同时支持纯 HTML/CSS/JavaScript 开发，以及 Vue、React 和 Svelte 三大主流前端框架的组件化集成，给予团队最大的技术选型自由度。与 Ionic 等重型框架不同，Framework7 不强制依赖 Angular 或其他特定框架，也不锁定 Cordova/Capacitor 等原生桥接方案——你可以用它做纯 Web 应用、PWA，也可以配合 Cordova、Capacitor 或 Electron 打包成原生应用。

自 2014 年由 Vladimir Kharlampidi 创建以来，Framework7 已发展到 v9 版本，持续跟进最新的 iOS 和 Material You 设计规范。v9 带来了全新的 iOS 26 视觉风格、Material You 色彩方案以及 Vibrant 主题，证明了该项目仍在积极维护和演进。它是快速原型开发和 MVP 构建的利器，也适合对包体积和性能有较高要求的中小型移动应用项目。

基本信息

属性	详情
官网	https://framework7.io/
GitHub	https://github.com/framework7io/framework7
License	MIT
最新版本	v9.1.0（2026 年 6 月 29 日）
主要维护者	Vladimir Kharlampidi（framework7io 组织）
GitHub Stars	~18,700+
总提交数	7,120+
总发布版本数	174+
语言构成	JavaScript 49.4%、Vue 14.7%、Svelte 13.4%、HTML 12.8%、Less 9.3%

快速上手

安装

Framework7 提供多种安装方式，推荐使用官方 CLI 工具快速创建项目：

方式一：使用 Framework7 CLI（推荐）

# 全局安装 CLI 工具
npm install -g framework7-cli
 
# 创建新项目（交互式选择配置）
framework7 create
 
# 进入项目并启动开发服务器
cd my-app
npm install
npm run dev

CLI 会引导你选择：

项目类型：Cordova / Capacitor / Web / PWA
前端框架：Vue / React / Svelte / 纯 HTML
UI 主题：iOS / Material (MD) / Aurora (桌面)

方式二：直接 npm 安装

# 核心包（按需选择框架版本）
npm install framework7
 
# Vue 版本
npm install framework7-vue
 
# React 版本
npm install framework7-react
 
# Svelte 版本
npm install framework7-svelte
 
# 图标包（可选）
npm install framework7-icons

方式三：CDN 引入（快速原型）

<!-- iOS 主题 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7@9/css/framework7.ios.min.css">
<!-- Material 主题 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7@9/css/framework7.material.min.css">
 
<div id="app">
  <!-- 应用内容 -->
</div>
 
<script src="https://cdn.jsdelivr.net/npm/framework7@9/js/framework7.min.js"></script>
<script>
  var app = new Framework7({
    root: '#app',
    name: 'My App',
    id: 'com.myapp.test',
  });
</script>

基础配置

Vue 版本配置示例：

// src/app.js
import { createApp } from 'vue'
import Framework7Vue from 'framework7-vue'
import App from './App.vue'
 
// 引入样式
import 'framework7/css/bundle'
 
const app = createApp(App)
app.use(Framework7Vue)
app.mount('#app')

React 版本配置示例：

// src/app.jsx
import 'framework7/css/bundle'
import { App as Framework7App, Statusbar, View } from 'framework7-react'
 
export default function App() {
  const f7params = {
    name: 'My App',
    id: 'com.myapp.test',
    panels: { /* 面板配置 */ },
  }
 
  return (
    <Framework7App {...f7params}>
      <Statusbar />
      <View main url="/" />
    </Framework7App>
  )
}

Framework7 核心初始化参数：

const app = new Framework7({
  root: '#app',               // 应用根元素
  name: 'My App',             // 应用名称
  id: 'com.myapp.test',       // 应用唯一标识
  theme: 'auto',              // 'ios' | 'md' | 'aurora' | 'auto'
  darkMode: 'auto',           // 自动跟随系统暗色模式
  lazy: {
    threshold: 0,
    sequential: false,
  },
  serviceWorker: {
    path: '/service-worker.js' // PWA Service Worker 路径
  },
})

最小示例

纯 HTML 最小可运行示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Framework7 最小示例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7@9/css/bundle/framework7.ios.min.css">
</head>
<body>
  <div id="app">
    <div class="view view-main view-init">
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">我的应用</div>
          </div>
        </div>
        <div class="toolbar toolbar-bottom">
          <div class="toolbar-inner">
            <a href="#" class="tab-link link active">首页</a>
            <a href="#" class="tab-link link">设置</a>
          </div>
        </div>
        <div class="page-content">
          <div class="block">
            <p>欢迎使用 Framework7！</p>
            <a href="#" class="button button-fill">点击按钮</a>
          </div>
        </div>
      </div>
    </div>
  </div>
 
  <script src="https://cdn.jsdelivr.net/npm/framework7@9/js/framework7.min.js"></script>
  <script>
    var app = new Framework7({
      root: '#app',
      name: 'Demo App',
      id: 'com.demo.app',
    });
  </script>
</body>
</html>

核心概念与架构

核心概念

App 实例：Framework7 应用的入口，管理全局配置、路由、主题和插件。通过 new Framework7(params) 创建。
View（视图）：应用的独立区域，拥有自己的导航栈和路由。一个 App 可以有多个 View（主视图、侧边栏视图等）。
Page（页面）：View 中的内容单元，包含 Navbar、Toolbar 和 Page Content 三部分。
Router（路由器）：内置完整的客户端路由器，支持嵌套路由、路由守卫、异步加载、动态路由。
Theme（主题）：内置 iOS、Material Design (MD) 和 Aurora（桌面端）三套主题，theme: 'auto' 可根据设备自动切换。
Component（组件）：内置模板引擎和响应式组件系统，支持条件渲染、列表渲染、事件处理和计算属性。

架构设计

Framework7 采用分层解耦的架构：

┌─────────────────────────────────┐
│        应用层 (App)              │
│  ┌──────┐ ┌──────┐ ┌──────┐    │
│  │View 1│ │View 2│ │View N│    │
│  │┌────┐│ │      │ │      │    │
│  ││Page││ │      │ │      │    │
│  │└────┘│ │      │ │      │    │
│  └──────┘ └──────┘ └──────┘    │
├─────────────────────────────────┤
│      框架核心 (Core)             │
│  Router | Components | Themes   │
│  Lazy Load | Virtual DOM        │
├─────────────────────────────────┤
│      平台桥接层                  │
│  Cordova | Capacitor | Electron │
│  Web (PWA) | 纯浏览器           │
└─────────────────────────────────┘

UI 层：纯 CSS/HTML 实现，通过主题类名切换 iOS/MD/Aurora 视觉风格
逻辑层：JavaScript 核心处理路由、组件生命周期、状态管理
桥接层：可选的原生能力接入（设备 API、文件系统、推送通知等）

工作原理

Framework7 使用运行时主题检测：在初始化时根据 User-Agent 或显式配置决定加载 iOS 还是 Material 样式。组件通过 CSS 类名定义结构，JavaScript 负责交互行为。路由系统基于 History API（Web）或原生导航栈（Cordova/Capacitor），支持页面转场动画和深度链接。

核心特性

三套原生主题：iOS、Material Design 和 Aurora（桌面），支持 auto 自动适配运行平台，一套代码在不同设备上呈现原生视觉风格
多框架支持：同时提供 Vue、React、Svelte 的官方组件绑定，也支持纯 HTML/JS 开发，技术选型不受限
70+ UI 组件：涵盖列表、卡片、表单、对话框、Popup、Action Sheet、Popover、Fab、Tabs、无限滚动、虚拟列表、时间线、甘特图等，覆盖绝大多数移动端 UI 需求
内置路由器：完整的路由系统，支持嵌套路由、路由守卫（beforeEnter / leave）、异步路由、动态路由参数、页面过渡动画
PWA 原生支持：内置 Service Worker 管理、Web App Manifest 配置、离线缓存策略，可直接构建渐进式 Web 应用
响应式组件系统：内置轻量模板引擎和响应式状态管理，无需引入额外状态库即可构建数据驱动的动态界面
暗色模式：原生支持暗色模式，可设置为自动跟随系统偏好或手动切换
虚拟列表（Virtual List）：高性能虚拟滚动，轻松渲染数万条数据的大列表而不卡顿
延迟加载：图片、组件、模块均支持按需加载，减小初始包体积
原生桥接兼容：无缝配合 Cordova、Capacitor 和 Electron，调用设备原生能力（相机、GPS、文件系统、推送等）

生态图

核心生态

Framework7
├── framework7                 # 核心库（纯 JS）
├── framework7-vue             # Vue 集成
├── framework7-react           # React 集成
├── framework7-svelte          # Svelte 集成
├── framework7-icons           # 官方图标库
└── framework7-cli             # 项目脚手架 CLI

原生桥接

桥接方案	说明
Capacitor（推荐）	现代化原生桥接方案，由 Ionic 团队维护，支持最新原生 API，兼容大部分 Cordova 插件
Apache Cordova	传统桥接方案，插件生态成熟，Framework7 早期默认选择
Electron	桌面端打包方案，可将 Framework7 应用打包为 macOS/Windows/Linux 桌面应用

构建工具集成

Vite：Framework7 CLI 已默认使用 Vite 作为构建工具（v9+）
Webpack：官方提供 Webpack 配置模板
PostCSS / Less：样式编译支持，可自定义主题变量

社区生态

Framework7 Forum：官方论坛（https://forum.framework7.io/），活跃的技术问答社区
GitHub Discussions：仓库内置讨论区
第三方模板：社区贡献了大量 starters 和模板项目
F7 组件库扩展：如 framework7-swiper（内置轮播）、framework7-photobrowser 等扩展组件

关键依赖

Swiper：Framework7 内置集成了 Swiper 轮播组件
Dom7：Framework7 内置的轻量级 DOM 操作库（类 jQuery API），约 3KB gzip
Template7：Framework7 内置的模板引擎（可选使用）

适用场景

快速原型 / MVP 开发：丰富的预制组件和 CLI 脚手架，可在数小时内搭建出视觉精美的移动端原型，验证产品想法
中小型混合移动应用：内容展示型、表单交互型、工具类 App（如新闻阅读、电商、企业内部应用），无需复杂原生能力即可满足需求
PWA（渐进式 Web 应用）：内置 Service Worker 和离线支持，适合构建可安装、可离线使用的 Web 应用
跨平台统一体验：需要同时覆盖 iOS、Android 和 Web（甚至桌面端）的项目，一套代码多端运行
前端团队主导的移动项目：团队以 Web 前端技术栈（HTML/CSS/JS/Vue/React）为主，不希望引入 React Native 或 Flutter 等全新开发范式
** Cordova/Capacitor 项目的前端层**：已有 Cordova/Capacitor 原生壳项目，需要一套高质量的 Web UI 框架
桌面端工具应用：配合 Electron 构建跨平台桌面应用，Aurora 主题专为桌面场景优化

开发与工程化

开发流程

# 1. 创建项目
framework7 create
 
# 2. 启动开发服务器（支持热更新）
npm run dev
 
# 3. 构建生产版本
npm run build
 
# 4. 预览生产构建
npm run preview
 
# 5. Cordova 开发（如适用）
npm run build-cordova-[ios|android]
npm run cordova-[ios|android]    # 打开 Xcode/Android Studio
 
# 6. Capacitor 开发（如适用）
npm run build-capacitor-[ios|android]
npx cap sync
npx cap open [ios|android]

构建部署

Web/PWA 部署：

# 构建静态文件
npm run build
 
# 输出目录: dist/
# 部署到任何静态托管服务：Nginx、Vercel、Netlify、GitHub Pages 等

Cordova 打包：

# 构建 Cordova 资源
npm run build-cordova-ios
 
# 添加平台
cordova platform add ios
cordova platform add android
 
# 构建原生应用
cordova build ios
cordova build android

Capacitor 打包：

npm run build-capacitor-ios
npx cap add ios
npx cap sync ios
npx cap open ios    # 在 Xcode 中打开

工程化最佳实践

按需引入：只导入使用到的组件和样式，减小包体积
主题定制：通过 Less 变量覆盖自定义主题色，不要直接修改源码样式
路由懒加载：使用动态 import() 实现页面级代码分割
虚拟列表：大数据量列表务必使用 virtual-list 组件
Service Worker 缓存策略：生产环境合理配置 SW 缓存范围和更新策略
环境分离：开发、测试、生产使用不同配置（API 地址等）

CI/CD 集成

# GitHub Actions 示例
name: Build & Deploy
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-args: '--prod'

性能与安全

性能特点

轻量核心：Framework7 核心库 gzip 后约 35KB，相比 Ionic（~150KB+）显著更小
稳定 60fps：在 iOS 设备上保持稳定的 60fps 滚动和转场动画，得益于 CSS 硬件加速和高效的 DOM 操作
虚拟列表：可高效渲染 10 万+ 条目的列表，只渲染可视区域内的 DOM 节点
延迟加载：图片、组件、路由均支持按需加载

性能优化建议

启用 lazy 配置，实现图片和组件延迟加载
大数据列表使用 Virtual List，避免渲染全部 DOM
使用 router.routeOnly 减少不必要的页面预加载
生产构建开启 Tree Shaking 和代码压缩
避免在 page:init 事件中执行大量同步 DOM 操作
使用 requestAnimationFrame 或 Framework7 内置的 app.request 替代频繁定时器

安全注意事项

XSS 防护：使用 Template7 模板引擎时注意对用户输入进行转义；Vue/React 版本默认具有 XSS 防护
CSP（内容安全策略）：生产环境务必配置严格的 Content-Security-Policy 头
HTTPS 强制：Service Worker 和 PWA 功能要求 HTTPS 环境
敏感数据存储：使用 Cordova/Capacitor 的安全存储插件（如 cordova-plugin-secure-storage）保存敏感信息，不要使用 localStorage
第三方依赖审计：定期检查 npm audit，及时更新存在漏洞的依赖

已知性能瓶颈

大量复杂动画同时触发时可能导致低端 Android 设备掉帧
超大 DOM 树（未使用虚拟列表的数千节点列表）会影响滚动性能
首次加载时全量样式文件的解析时间（可通过按需引入缓解）
iOS WKWebView 中复杂的 CSS 渐变和模糊效果可能影响滚动流畅度

技术对比

维度	Framework7	Ionic	Onsen UI	React Native	Flutter
定位	Web UI 框架	混合应用框架	Web UI 框架	原生渲染框架	原生渲染框架
渲染方式	WebView DOM	WebView DOM	WebView DOM	原生组件	原生（Skia）
框架支持	Vue / React / Svelte / 纯 JS	Angular / React / Vue	Angular / React / Vue / 纯 JS	React	Dart
包体积（gzip）	~35KB	~150KB+	~60KB	JS 桥接 + 原生	AOT 编译
iOS/MD 主题	✅ 高度还原	✅ 高度还原	✅ 支持	❌ 原生组件	❌ Material 为主
PWA 支持	✅ 内置	✅ 内置	⚠️ 需手动配置	❌ 不支持	❌ 不支持
桌面端支持	✅ Electron/Aurora	✅ Electron	⚠️ 有限	⚠️ 社区方案	✅ 官方支持
原生能力	依赖 Cordova/Capacitor	依赖 Cordova/Capacitor	依赖 Cordova	原生模块	原生插件
学习曲线	低（Web 技术栈）	中	低	高（新范式）	高（Dart 语言）
GitHub Stars	~18.7k	~51k	~8k	~118k	~168k
性能表现	优秀（60fps）	良好	良好	优秀	优秀
适用场景	轻量移动 Web/混合应用	企业级混合应用	轻量混合应用	高性能原生应用	跨平台原生应用

Framework7 的差异化优势：

比 Ionic 更轻量（包体积约 1/4），不绑定特定前端框架
比 React Native / Flutter 学习成本低得多，Web 开发者可零成本上手
比 Onsen UI 组件更丰富（70+ vs 30+），维护更活跃
独有的 Aurora 主题，适合桌面端混合应用

最佳实践

生产环境建议

优先使用 Capacitor 而非 Cordova：Capacitor 是现代替代方案，API 基于 Promise，维护更活跃，且兼容大部分 Cordova 插件
使用 Vite 构建：Framework7 v9 CLI 默认使用 Vite，构建速度远快于 Webpack
按主题按需构建：如果只需要 iOS 或 Material 单一主题，可在构建时排除不需要的主题样式
路由守卫做权限控制：利用 router.beforeEach 实现全局鉴权拦截
状态管理：小型应用使用 Framework7 内置响应式组件即可；中大型 Vue 项目可配合 Pinia，React 项目配合 Zustand

常见陷阱

⚠️ 不要混用主题类名：不要在 iOS 主题下使用 .material 类名，会导致样式异常
⚠️ 路由跳转不要用 <a href> 做 SPA 导航：应使用 Framework7 的 Link 组件或 router.navigate() 方法，避免整页刷新
⚠️ 不要在 page:init 中操作尚未挂载的 DOM：使用 page:mounted 或 Vue/React 的 onMounted 生命周期
⚠️ 注意 iOS 安全区域：刘海屏设备需配置 statusbar 和 safeArea 参数，避免内容被遮挡
⚠️ Service Worker 缓存陷阱：更新 SW 后需要主动调用 skipWaiting() 和 clients.claim() 确保用户获取最新版本

技术局限与边界

已知限制

WebView 性能天花板：本质是 WebView 渲染，复杂动画和大规模数据处理无法达到 React Native / Flutter 的原生渲染性能
社区规模有限：相比 Ionic（51k stars）和 React Native（118k stars），Framework7 社区较小（18.7k stars），遇到问题时可用资源相对较少
单人维护风险：项目主要由 Vladimir Kharlampidi 一人维护，存在 bus factor 风险
无官方 CLI 插件市场：不像 Ionic 有完善的插件市场和官方支持的 Capacitor 插件集
原生能力完全依赖桥接层：Framework7 本身不提供任何原生 API 访问能力，必须配合 Cordova/Capacitor

不适用场景

高性能图形/游戏应用：需要 WebGL、Canvas 重度渲染的场景应使用 Unity 或原生方案
大型复杂原生应用：如微信、支付宝级别的超级应用，应使用 React Native 或 Flutter
需要大量设备底层 API：如蓝牙、NFC、后台音频等，虽然有 Cordova 插件可用，但稳定性和更新及时性不如原生方案
对启动速度有极致要求：WebView 冷启动时间难以优化到原生级别
团队无 Web 前端经验：Framework7 的价值在于让 Web 开发者快速构建移动应用，如果团队熟悉原生开发，直接使用原生方案更合适

迁移注意事项

从 Ionic 迁移到 Framework7：组件 API 差异较大，但概念相似，主要工作在于替换组件标签和路由配置
从 Framework7 迁移到 React Native / Flutter：几乎是重写，因为渲染方式完全不同
从纯 Web 迁移到 Framework7：改动最小，主要是引入框架和重构页面结构

学习资源

官方资源

官方文档：https://framework7.io/docs/ — 完整的 API 文档和组件示例
官方教程：https://framework7.io/tutorials/ — 分步骤入门教程
Release Notes：https://framework7.io/release-notes/ — 版本更新日志
迁移指南：https://framework7.io/docs/migration-from-v8-to-v9.html — v8 到 v9 迁移文档

社区资源

官方论坛：https://forum.framework7.io/ — 活跃的技术问答社区
GitHub Discussions：https://github.com/framework7io/framework7/discussions
GitHub Issues：https://github.com/framework7io/framework7/issues — Bug 报告和功能请求
Stack Overflow：搜索 [framework7] 标签
Framework7 中文网：部分社区维护的中文翻译文档

教程与文章

LogRocket: Framework7 vs Ionic — 两大 Cordova 框架深度对比
Toptal: Cordova Frameworks: Ionic vs Framework7 — 选型参考
CSDN: Framework7 vs Ionic 2025 全方位对比测评 — 中文深度对比（含性能基准测试）

示例项目

官方 Kitchen Sink：https://framework7.io/kitchen-sink/ — 所有组件的在线演示
官方模板库：通过 framework7 create CLI 获取 Vue/React/Svelte 模板
GitHub Awesome Framework7：社区收集的示例和资源合集

2026 年现状

维护状态

Framework7 在 2026 年仍保持积极维护状态：

最近一次发布在 2026 年 6 月 29 日（v9.1.0），前一次在 2025 年 12 月 5 日（v9.0.2）
总计 174+ 次版本发布，7,120+ 次代码提交
GitHub 上有 232 个 Open Issues 和 9 个 Open PR，说明社区仍有活跃反馈
项目持续获得 Open Collective 赞助支持

发展趋势

框架跟进：v9 已跟进 iOS 26 设计，说明团队持续跟踪苹果设计演进
多框架并行：Vue、React、Svelte 三套绑定均同步更新
构建工具现代化：已迁移至 Vite，构建体验现代化
社区规模稳定：18.7k stars 保持稳定，非爆发式增长但也未衰退

社区活跃度

Framework7 属于中小规模但稳定的开源项目：

不如 Ionic、React Native 等主流框架活跃，但在"轻量 Web 移动框架"这个细分领域仍是最佳选择之一
论坛仍有活跃问答，官方响应及时
依赖项目多为企业内部工具和中小型移动应用，公开案例较少

选型建议

场景	推荐度
Web 前端团队做移动端 MVP	⭐⭐⭐⭐⭐
轻量 PWA	⭐⭐⭐⭐⭐
需要原生性能的 C 端 App	⭐⭐
大型复杂混合应用	⭐⭐⭐
桌面端 Electron 应用	⭐⭐⭐⭐
Cordova 项目的前端 UI 层	⭐⭐⭐⭐⭐

总结：Framework7 在 2026 年依然是一个成熟、活跃、值得考虑的移动端 Web UI 框架选择。它的核心价值在于用纯 Web 技术栈快速构建高质量原生视觉体验的移动应用。如果你的项目需要的是"好看、好用、轻量、不折腾"的移动端 UI 解决方案，Framework7 仍是最优选项之一。

Framework7

Framework7

技术简介说明

基本信息

快速上手

安装

基础配置

最小示例

核心概念与架构

核心概念

架构设计

工作原理

核心特性

生态图

核心生态

原生桥接

构建工具集成

社区生态

关键依赖

适用场景

开发与工程化

开发流程

构建部署

工程化最佳实践

CI/CD 集成

性能与安全

性能特点

性能优化建议

安全注意事项

已知性能瓶颈

技术对比

最佳实践

生产环境建议

常见陷阱

推荐项目结构

技术局限与边界

已知限制

不适用场景

迁移注意事项

学习资源

官方资源

社区资源

教程与文章

示例项目

2026 年现状

最新版本

维护状态

发展趋势

社区活跃度

选型建议