飞书低代码平台于 2024 年 8 月 5 日发布了最新版「页面」，最新版「页面」是开发者友好的页面搭建工具，能够快速构建具有丰富度和灵活度的桌面端页面，以及独立的移动端页面，具备良好的开放性，便捷的集成飞书数据以及各类外部数据源。为了保证开发者平稳过渡，当前飞书低代码平台支持新旧版本「页面」混合开发。
🎯 升级简介
由于新旧版本「页面」在操作界面、搭建技巧以及核心功能等方面有较大差异，与之匹配的帮助文档也截然不同，因此在开发前，开发者需要先确定当前「页面」的版本。本文将介绍新旧版本「页面」核心功能的区别，以及不同版本的区分方式，请认真阅读：
功能简介
新版页面是指飞书低代码平台围绕性能、灵活、开放发布的全新页面编辑器，具备以下特性：
- 开发者友好：按照成熟开发框架设计，符合主流编程思维，支持在任意点位编写 JS
- 开放可拓展：低代码搭建全代码能力，丰富的原子组件、API；集成自有数据库、开源社区组件库
- 性能更强大：产品架构解耦合、白盒化，性能细节可控可调优，预期比2.0性能提升一倍。
- 移动端友好：面向移动端可独立搭建，更友好的移动适配和体验
注意事项
- 新版页面上线后，旧版页面的功能和使用将不受到影响，低代码平台支持新旧版页面的共存使用；
- 飞书低代码平台将持续推进新版/旧版页面的功能维护，并响应用户使用过程中遇到的问题和需求；
💎 版本差异
新版页面和旧版页面在功能上有如下差异：
- 新版页面会更加适用于有一定编程基础的 IT 人员、或是有编程思维的业务人员，能够更大程度的释放开发者的生产力，构建出更为丰富、性能更优的页面效果；
- 旧版页面则使用门槛更低，适用于对于业务流程比较了解的一线业务人员，能够快速搭建业务原型，以便开发人员后续进行功能拓展和性能优化；
数据请求的数据消费方式
最新版 | 旧版本 |
在最新版本中，将组件调整为可展示任意数据来源的 UI 组件，而数据的获取通过「数据请求」这个模块来完成，大体步骤如下：
250px|700px|reset | 通过组件绑定对象并设置过滤、排序规则来消费数据，所有的配置均在组件上完成且仅可消费对象数据，大体步骤如下：
250px|700px|reset |
JS 表达式与 Bytefx
全局导航及核心组件
组件 | 最新版 | 旧版本 |
全局导航 | 最新版本新增了全局导航，将导航和页面拆开，使导航下的页面也各自独立，彻底解决页面膨胀时，页面尺寸过大导致的性能问题。 250px|700px|reset | 上一版本所提供的导航组件，交互体验对搭建者友好，但是性能较差。 原因是把整个导航当成了一个页面去处理，导航项对应的是一个视图而不是一个页面，导致这个页面的尺寸过大。 |
核心组件 表格、列表、表单 | 不再与「一方数据：对象」强绑定，而是支持消费任意来源、符合数据格式要求的数据，并提供一致的组件功能、API 250px|700px|reset | 与「一方对象、流程」的绑定较强，切换至其他数据、方法时可能存在功能不一致、缺失的情况 |
移动端独立搭建
最新版 | 旧版本 |
支持了移动端独立的编辑器及配套组件 250px|700px|reset | 以自适应为主，PC 和移动一起搭建 |
💼 使用指南
如何区分新旧版本？
- 通过 UI 布局差异区分
新旧版本页面编辑器在 UI 布局上完全不同，最新版页面编辑器左侧提供了不同端口的页面导航和可视化设计的官方组件，右侧属性、样式、事件一屏展示
最新版 | 旧版本 |
250px|700px|reset | 250px|700px|reset |
- 通过系统信息提示区分
若开发环境兼容新旧版本，新建页面时可选择创建不同版本，同时系统会用标签标识旧版页面
250px|700px|reset
250px|700px|reset
- 通过页面 URL 地址来区分
新版页面中的 URL 中会携带「v3」标识
250px|700px|reset
新旧版页面如何共存？
可以使用 iframe 组件，将新版/旧版页面嵌入当前主要使用版本的页面导航中，实现新旧版本的页面共存
250px|700px|reset
搭建步骤 | 页面图示 |
Step1.新版页面中拖入 iframe 组件
| 250px|700px|reset |
Step2.为 iframe 组件选择页面
| 250px|700px|reset 250px|700px|reset |
Step3.最后，将 Iframe 高度设置为填充容器 | 250px|700px|reset |
旧版页面导航下嵌入新版页面同理，可以通过旧版页面的「高级 - iframe」组件实现
新版/旧版页面打开另一版本的页面
250px|700px|reset
搭建步骤 | 页面图示 |
Step1.添加打开应用页面动作 | 250px|700px|reset |
Step2.选择另一版本的页面
| 250px|700px|reset |
