支持与差异

我的收藏

框架能力

分类	框架差异情况
小程序配置	`app.json` 不支持的配置：`skeleton` 中配置 Lynx 页面路径无效， Lynx 暂不支持骨架屏
页面	`Page` 不支持的函数： •`onReachBottom` •`onPageScroll` 不支持的实例方法： •`createMediaQueryObserver` •`removeSkeleton` 表现差异：在 WebView 下，页面全局默认是可以滚动的，在 Lynx 下，需要滚动的区域需要使用 `scroll-view` 组件来实现
自定义组件	`Component` 不支持的实例方法： •`createMediaQueryObserver` •`getRelationNodes` 不支持的能力： •外部样式 •Fragment 组件节点 •数据监听器 observers •组件间关系
SJS	SJS 不支持的能力：SJS 响应事件

组件能力

分类	组件	支持情况	组件差异情况
基础内容	text	基本支持	不支持的属性:`space` 是否显示连续的空格。行为差异： •`decode` 设置无效，默认都对 HTML 实体进行解码 •`<text>`默认是块级元素，多个并排会换行展示，可以在外层包括一个父级`<text>` 使子`<text>` 变成行内元素进行排版
	rich-text	基本支持	不支持的属性：不支持 `class` 使用差异：不建议一个页面内同时渲染过多实例，否则内存占用较高，如有该场景，建议页面渲染类型先使用 webview。
	progress	完全支持
	icon	完全支持
视图容器	mask	完全支持
	view	完全支持
	scroll-view	基本支持	•不支持的属性: ◦`enhanced` (boolean): 启用增强特性，影响 `bounces` 等行为。 ◦`refresher-threshold` (number): 设置自定义下拉刷新阈值 (同时设置 refresher-default-style 属性为 "none" 后生效)。 •行为差异: ◦`bounces`: Lynx 中直接设置 `bounces` 属性，而官方文档要求在 `enhanced` 模式下才生效。 ◦不支持使用 class 选择器进行选择 •使用差异： ◦横向滚动布局：将所有滚动内容包裹在一个单独的 `<view>` 子节点中，使用 `display: linear` 和 `linear-orientation: horizontal` Lynx/TTSS 的私有布局语法，且设定固定宽度。 `<scroll-view scroll-y="{{true}}" style="width: 150px; height: 120px;"> <view style="display: linear; linear-orientation: horizontal; width: 450px"> <view style="width: 150px; height: 100px; background: #ffabab;"></view> <view style="width: 150px; height: 100px; background: #abffab;"></view> <view style="width: 150px; height: 100px; background: #abdcff;"></view> </view> </scroll-view>` 新增能力 list 高性能渲染能力
	swiper / swiper-item	基本支持	不支持的属性: •`display-multiple-items` (number): 同时显示的滑块数量。 •`easing-function` (string): 缓动动画函数。
	movable-area / movable-view	暂不支持
表单	form	基本支持	不支持的属性:`conversion-target`、`clue-component-id` 线索组件相关属性
	button	基本支持	新增属性：`hide-border`：用于隐藏 button 的边框
	checkbox-group / checkbox	完全支持
	radio-group / radio	完全支持
	slider	完全支持
	switch	完全支持
	input	基本支持	不支持的属性:`placeholder-class` (string)：指定 placeholder 的样式类。
	textarea	基本支持	•不支持属性: ◦`auto-height` (boolean): 是否自动增高，设置 auto-height 时，设置 height 样式不生效。 ◦`disable-default-padding`(boolean): 是否去掉 iOS 下的默认内边距。 ◦`show-confirm-bar`(boolean): 是否显示键盘上方带有”完成“按钮那一栏。 ◦`placeholder-class` (string)：指定 placeholder 的样式类。 ◦`clue-type`: 线索相关属性。不支持的事件:`bindlinechange`(EventHandle): 输入框行数变化时触发
	label	完全支持
	picker	基本支持	mode 使用差异：不支持 region
	picker-view	基本支持	•不支持的属性：`immediate-change` (boolean): 设置是否在手指松开时立即触发 change 事件。若将 immediate-change 设置为 false，则会在滚动动画结束时触发 change 事件。 •使用差异：不支持内嵌 view、text，仅能靠数据驱动
	picker-view-column	完全支持
导航	navigator	暂不支持
媒体	image	基本支持	不支持的属性: •`lazy-load`(boolean): 图片懒加载，在即将进入一定范围（上下左右三屏）时才开始加载。 •`mode` 只支持`scaleToFill`、`aspectFit`、`aspectFill`和 `center` 行为差异：`webp` (Boolean): 是否解析 webp 格式。属性设置无效，官方文档指出，在特定版本下，即使不开启此选项也能解析带 `.webp` 后缀的图片，但开启后能支持任意后缀的 webp 图片。默认 Lynx 都可解析
	video	基本支持	基础库 4.28.0 及以上版本已完全对齐 webview 小程序，4.28.0 以下版本支持限制如下： •不支持的属性: ◦`loop`(boolean): 是否循环播放。 ◦`controls`(boolean): ：是否显示全部播放控件。 ◦`vslide-gesture` / `vslide-gesture-in-fullscreen` (boolean): 调节音量、亮度的手势。 ◦`enable-progress-gesture` (boolean): 控制进度的手势。 ◦`enable-play-gesture` (boolean): 双击播放/暂停手势。 ◦`enable-play-in-background` (boolean): 后台小窗播放。 ◦`show-mute-btn`、`show-playback-rate-btn`、`show-screen-lock-button`、`show-casting-button`、`show-progress`、`show-bottom-progress`: 全屏时的一系列控制按钮。 ◦`playback-rate-list`: 配置5个需要展示和可通过API切换的倍速选项。 ◦`direction`: 设置全屏方向。 ◦`signature`: 署名水印。 ◦`definition`: 清晰度选择。 ◦`poster-size`: 封面图片尺寸。 ◦`duration-limit`: 试看时长限制。 ◦`encrypted-token`: 加密播放。 ◦`enable-dark-water-mark`：水印功能。 •不支持的事件: ◦`bindwaiting`: 视频缓冲时触发。 ◦`bindloadedmetadata`: 元数据加载完成时触发。 ◦`bindcontroltap`: 点击控件时触发。 ◦`bindenterbackground` / `bindclosebackground` / `bindleavebackground`: 与后台小窗播放相关的事件。 ◦`bindcontrolstoggle`：切换播放控件显示/隐藏时触发。 ◦`bindplaybackratelistchange`：当传入的 playback-rate-list 属性被修改时触发。
	live-preview	暂不支持
	camera	暂不支持
画布	canvas	基本支持	使用差异：需要在页面配置 page.json 中额外添加启用开关 `{ "renderOptions": { "lynx": { "enableCanvas": true } }, }` 不支持的属性： •`canvas-id`: (canvas v1 版本的属性) •不支持 `Canvas.createPath2D`
地图	map	完全支持	模拟器暂不支持，需要真机调试
开放能力	web-view	完全支持	模拟器暂不支持，需要真机调试
	open-data	暂不支持
	aweme-data	暂不支持
	button 组件分享能力 openType: share	完全支持
	button 组件获取手机号 openType: getPhoneNumber	完全支持
	button 组件 IM 客服能力 openType: im	完全支持
	button 组件平台客服能力 openType: platformIm	完全支持
	button 组件跳转视频播放页 openType: navigateToVideoView	完全支持
	button 组件跳转抖音号个人页 openType: openAwemeUserProfile	完全支持
	button 组件跳转直播间 openType: openWebcastRoom	完全支持
	button 组件获取用户私信授权 openType: authorizePrivateMessage	完全支持
	button 组件隐私协议 openType: agreePrivacyAuthorization	完全支持
	button组件添加到桌面能力 openType: addShortcut	完全支持

Lynx 新增组件

组件名	组件描述
svg	用于支持 `.svg` 渲染，lynx image 组件不支持 `.svg`
list-item	高性能列表方案中的核心子节点组件，需配合设置 `type="list"` 的 scroll-view 组件使用，用于实现高性能列表渲染。详见《list 高性能列表渲染》

list 高性能列表渲染

Lynx 小程序在原有 scrollview 组件中新增以下属性，当 type = list 时开启高性能列表渲染能力。

属性名	类型	默认值	必填	说明	lynx特有属性
type	string		否	渲染模式	✅
sticky	boolean	FALSE	否	子节点是否需要sticky	✅
sticky-offset	number	0	否	吸顶或者吸底位置距离 <list> 顶部或者底部的偏移，单位为 px。	✅
scroll-into-view	string		否	List 模式下定位一级 list-item。属性值必须匹配直接子 list-item 的唯一稳定 id；当前不支持 Cell 内后代节点。建议配合稳定 item-key 使用。
scroll-into-view-offset	number	0	否	仅结合 List 模式的 scroll-into-view 生效。表示目标 list-item 与 List 视口起点之间预留的距离，单位 px；（相对list顶部向下预留的距离）	✅

Type 取值说明

合法值	说明	最低版本
list	高性能列表模式。标记为列表模式后，一级子节点需要使用 <list-item> 标签表示列表项，传递其他值暂不生效注意：使用该能力只会渲染在屏节点，会根据直接子节点是否在屏来按需渲染，若只有一个直接子节点则性能会退化

<list-item> 子节点属性说明

属性名	类型	默认值	必填	说明
item-key	string		否	list-item 唯一性标记，提升渲染性能。不写默认为children nodeId
full-span	boolean		否	标识 <list> 子节点独占一行或者一列
sticky-top	boolean		否	声明在 <list> 子节点上, 控制该节点是否会吸顶。
estimated-main-axis-size-px	number		否	用于指定 list-item 节点还未渲染完成时，在主轴方向上的占位大小，单位为 px，用于未布局列表项的尺寸估算，提高滚动准确性。仅有限且大于 0 的值生效，支持动态更新。
sticky-bottom	boolean		否	声明在 <list> 子节点上, 控制该节点是否会吸底

使用示例

<scroll-view type="list" sticky="true" sticky-offset="300" scroll-into-view="topItem" scroll-y cache-extent="600" scroll-anchoring>
   <list-item tt:key="sticky-item" sticky-top="true">
      <view><text>sticky item</text></view>
  </list-item>
  
  <list-item tt:for="{{products}}" tt:key="id" item="{{item}}" >
      <product-card item="{{item}}"/>
  </list-item>
  
  <list-item id="topItem" tt:key="top-item" >
      <view><text>top item</text></view>
  </list-item>
</scroll-view>

Sticky 使用示例

开发者工具下载 - 抖音开放平台

API 与约束

以下能力使用暂不支持：多层级任意嵌套滚动、任意动态瀑布流、跨 itemType 复用，以及在没有高度估算的情况下远距离无跳转定位。

（1）若存在同名自定义组件，优先以自定义组件为准，支持开发者设置优先级，开启后如有同名组件，以内置<list-item>组件优先。

list-item 需要在 app.json 中主动开启使用：
{
  "enableComponents": ["list-item"]
}

（2）z-index

限制：如果 list Item 里面有z-index 的孙子节点，list-item 上一定要补 z-index

<scroll-view type="list">
         
  <list-item item-key="xx" style={{ zIndex: "0" }>
    <product> <view style={{ zIndex: "0"} /> </product>
  </list-item>
</scroll-view>

（3）fixed：不支持，具体表现不生效

（4）sticky-孙子节点：list 列表中仅支持一级子节点 sticky

（5）List 中嵌套 list：多层嵌套有性能风险

（6）list-item 内部为动态组件或者懒加载内容时，优化效果受影响，建议 list-item 与内部内容同时渲染或指定list-item 高度或 estimated-main-axis-size-px。

API 能力

除以下 API ，其他 API 完全对齐 webview 渲染。

不支持的 API

•

tt.pageScrollTo（页面默认不支持全局滚动，需要根节点使用 scroll-view 实现）

•

tt.createAnimation

•

Canvas V1 相关

•

Canvas.requestAnimationFrame

•

Canvas.cancelAnimationFrame

•

tt.matchMedia

•

MediaQueryObserver

•

SelectorQuery.selectViewport

•

NodesRef.fields.computedStyle

TTSS 差异

支持差异	解决方案
详情请查看 Lynx 官网介绍：https://lynxjs.org/zh/guide/ui/styling.html •不支持的属性会在开发者工具进行提示	将提供适配 skills
Android 不支持 woff/woff2 字体	替换为 base64 `@font-face { font-family: 'CustomFont'; src: url("data:app.."); }`

三方框架差异

在三方框架的使用场景中，框架层通常会对原生能力进行不同程度的封装与定制，从而引入一定的行为差异。针对 Lynx 框架，需要进行必要的适配工作。

对于高频使用的 Taro（Template & JSX）与 uni-app，我们将围绕常见差异给出对应的迁移说明，以降低接入成本并减少开发者的认知负担。

⚠️⚠️ 在使用三方框架过程中，如遇到样式表现不一致的问题，建议优先查阅 TTSS 差异。