# 网页应用概述
飞书客户端网页（Web）应用指的是用 H5 方式开发，可以运行在飞书客户端内的应用。本文介绍网页应用的功能与特性、基础概念、接入流程以及开发教程，帮助你了解网页应用能力。
## 什么是网页应用
网页应用自身提供了开放能力，并且支持调用丰富的飞书客户端开放接口（客户端 API，也称为 JSAPI），这些开放接口包含了手机系统功能，以及通讯录、云文档等飞书客户端功能。你可以基于这些开放能力与接口完善企业的网页应用功能，实现企业员工在飞书客户端免登录使用网页应用的能力。同时，开放平台兼具到客户端侧的性能优化，可以使飞书客户端内的网页应用接近原生体验。
## 应用场景
### 场景一：将企业 H5 办公应用接入飞书实现免登录访问
如果企业正在使用 H5 办公应用，则可以将这些应用接入飞书。接入后，企业员工可通过飞书客户端的工作台一键打开应用，如果应用实现了[免登录](https://open.feishu.cn/document/uYjL24iN/uMTMuMTMuMTM/development-guide/step-3)，则会自动登录到当前用户的账号。
### 场景二：调用开放能力实现业务所需的网页功能
使用开放平台提供的开放能力完善网页应用功能。例如：
结合多维表格开放能力 | 结合飞书人事开放能力
---|---
- 调用[多维表格](https://open.feishu.cn/document/ukTMukTMukTM/uUDN04SN0QjL1QDN/bitable-overview)接口将项目数据同步至多维表格，并通过网页向用户推送表格数据
- 调用 [requestAccess](https://open.feishu.cn/document/uYjL24iN/uUzMuUzMuUzM/requestaccess) 等客户端接口，实现免登流程、设置客户端打开方式等
 | - 调用服务端的[飞书人事](https://open.feishu.cn/document/uAjLw4CM/ukTMukTMukTM/reference/corehr-v1/overview)接口实现组织架构与人员管理
- 调用 [requestAccess](https://open.feishu.cn/document/uYjL24iN/uUzMuUzMuUzM/requestaccess) 等客户端接口，实现免登流程、设置客户端打开方式等
### 场景三：灵活配置网页应用入口
将网页应用接入飞书后，可以在飞书客户端内灵活配置网页应用。包括：
| [搜索结果内展示快捷入口](https://open.feishu.cn/document/uAjLw4CM/uYjL24iN/extensions/app-shortcut) | [聊天框“+”菜单配置应用入口](https://open.feishu.cn/document/ukTMukTMukTM/ukDN1YjL5QTN24SO0UjN) | [消息快捷操作配置应用入口](https://open.feishu.cn/document/ukzMukzMukzM/ugDN1YjL4QTN24CO0UjN) |
| -- | -------------------- | ---- |
|  |  |  |
上手体验，参见[快速入门](https://open.feishu.cn/document/uYjL24iN/uMTMuMTMuMTM/quick-start)。
## 功能特性
网页应用存在以下特性：
- 开发速度快，一端开发多端（桌面端、移动端）运行。
- 通过网页应用的公网访问地址接入飞书，因此无需发布应用新版本即可实现应用的动态更新。针对运营活动等需要频繁变更内容的场景，开发成本低。
- 如果企业正在使用 H5 办公应用，可以将应用迁移至飞书工作台内。迁移成本低，只需要简单配置和少量开发就可以正常使用。
- 基于飞书客户端开放接口，可实现用户的免登录使用网页应用。
## 使用限制
- 由于渲染层和数据层都需要在服务器端维护，打开应用时才加载到客户端，交互响应的速度比原生更慢。
- 对网络质量的要求比较高，没有网络或弱网情况下严重影响可用性。
## 基础概念
开发网页应用时可能涉及的基础概念介绍，参考[网页应用基础概念](https://open.feishu.cn/document/uYjL24iN/uITO4IjLykDOy4iM5gjM)。
## 开放能力
飞书开放平台基于网页元数据（web-meta）为网页应用提供了开放能力，用来定制网页容器的表现，包括设置屏幕方向、设置导航栏颜色、隐藏导航栏等能力。
开放能力 | 说明
---|---
[web-meta](https://open.feishu.cn/document/uYjL24iN/uMTMuMTMuMTM/web-app-open-ability/web-meta) | web-meta 是网页的元数据，用于定义网页特性。在飞书中运行的网页支持通过 web-meta 定制网页容器的表现，即使该网页不是一个网页应用。
[设置屏幕方向](https://open.feishu.cn/document/uYjL24iN/uMTMuMTMuMTM/web-app-open-ability/orientation) | 该能力用于设定网页在屏幕展示的方式，支持强制横屏、强制竖屏、跟随系统设置。
[配置更多菜单中的功能](https://open.feishu.cn/document/uYjL24iN/uMTMuMTMuMTM/web-app-open-ability/hidemoremenuitems) | 在网页更多菜单面板中，支持配置部分功能入口的启停状态，即是否置灰功能按钮。例如，屏蔽更多菜单转发及复制链接功能。
[侧滑关闭应用](https://open.feishu.cn/document/uYjL24iN/uMTMuMTMuMTM/web-app-open-ability/slide-to-close-apps) | 开启该功能后，使用屏幕边缘右滑的交互手势或点击左侧导航返回按钮时，直接关闭网页应用，而不是在会话历史记录中返回上一页。
[设置导航栏颜色](https://open.feishu.cn/document/uYjL24iN/uMTMuMTMuMTM/web-app-open-ability/set-navigation-bar-color) | 该能力通过以下参数设置导航栏的颜色。
- 通过 navFgColor 参数设置导航栏前景颜色。
- 通过 navBgColor 参数设置导航栏背景颜色。
[隐藏导航栏](https://open.feishu.cn/document/uYjL24iN/uMTMuMTMuMTM/web-app-open-ability/hide-the-navigation-bar) | 该能力用于控制是否在页面顶部隐藏导航栏。
[隐藏导航栏按钮](https://open.feishu.cn/document/uYjL24iN/uMTMuMTMuMTM/web-app-open-ability/hide-the-navigation-bar-button) | 该能力支持隐藏页面顶部左右两侧的导航栏按钮。
- showNavLBarBtn 参数用于隐藏左侧导航按钮。
- showNavRBarBtn 参数用于隐藏右侧导航按钮。
[隐藏底部导航栏](https://open.feishu.cn/document/uYjL24iN/uMTMuMTMuMTM/web-app-open-ability/hide-the-bottom-navigation-bar) | 该能力用于控制是否隐藏页面底部的导航栏。
[配置网页跳转浏览器打开](https://open.feishu.cn/document/uYjL24iN/uMTMuMTMuMTM/web-app-open-ability/configure-webpage-to-open-in-browser) | 该能力用于实现在飞书客户端内打开网页应用时，直接跳转到浏览器打开。
- 通过在桌面端网页URL 中拼接参数`lk_jump_to_browser=true`，当飞书桌面端点击该页面时，会自动跳转到浏览器打开。
- 通过在移动端网页URL 中拼接参数`lk_mobile_jump_to_browser=true`，当飞书移动端点击该页面时，会自动跳转到浏览器打开。
## 开放接口（H5 JSAPI）
开放平台提供了网页应用可以调用的 [H5 JSAPI](https://open.feishu.cn/document/uYjL24iN/uMTMuMTMuMTM/)。调用 JSAPI 依赖开放平台提供的工具包 JSSDK，使用时只需要在调用 JSAPI 的页面引入 JS 文件即可，引入方式如下代码所示。
```
```warning
- 在升级功能时，JS 文件的版本会作相应更新。上方代码中已经是最新的 JSSDK 版本对应的 src。JSSDK 版本号格式为`Major.Minor.Patch`（主版本号.次版本号.修订版本号），例如`https://lf-scm-cn.feishucdn.com/lark/op/h5-js-sdk-1.5.44.js`中的 JSSDK 版本号为`1.5.44`。
- 如有需要（例如，使用新增的 JSAPI），请参考上方代码核对 JSSDK 链接，确保你当前使用的 JSSDK 版本是最新版本。
## 接入流程
开发飞书开放平台的网页应用主要分为以下步骤，具体操作指南参考[网页应用开发指南概述](https://open.feishu.cn/document/uYjL24iN/uITO4IjLykDOy4iM5gjM)。
网页应用开发指南主要介绍企业自建应用的开发流程。如果你需要开发商店应用，可参见[商店应用发布指南](https://open.feishu.cn/document/uMzNwEjLzcDMx4yM3ATM/ugzNwEjL4cDMx4CO3ATM)。
1. [创建并配置应用](https://open.feishu.cn/document/uYjL24iN/uMTMuMTMuMTM/development-guide/step1)
你需要先创建一个应用，并在应用内开启网页应用能力。
2. [（可选）鉴权调用 JSAPI](https://open.feishu.cn/document/uYjL24iN/uEzM4YjLxMDO24SMzgjN)
如果应用需要调用飞书开放平台 JSAPI，则需要先通过鉴权。JSAPI 鉴权是指飞书验证网页应用有权限访问的 JSAPI 范围。
3. [（可选）配置应用的免登流程](https://open.feishu.cn/document/uYjL24iN/uMTMuMTMuMTM/development-guide/step-3)
如果你希望应用在飞书客户端内被用户访问时，可以直接获取到登录用户的信息，从而实现免登录访问应用，则可以选择为应用配置免登流程。
4. [发布并使用应用](https://open.feishu.cn/document/uYjL24iN/uMTMuMTMuMTM/development-guide/step-4)
当应用的基本信息、权限范围、应用功能或事件订阅等配置信息发生变更时，需要发布新的应用版本，并通过企业管理员的审核后才能生效配置。
## 开发工具
[网页应用远程调试工具](https://open.feishu.cn/document/uYjL24iN/uEzMzUjLxMzM14SMzMTN/webapp-remote-debugging-tool-user-guide)：网页应用在线调试工具，在调试页面上可查看应用运行时的 Elements、Console、Network 和 Storage、Cookie 等信息，类似 Chrome devtools。