CINXE.COM

<!DOCTYPE html> <html lang="cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Skyline 渲染引擎 / 增强特性 / 手势系统 | 微信开放文档</title> <meta name="description" content="微信开发者平台文档"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="theme-color" content="#ffffff"> <meta name="keywords" content="微信官方文档"> <link rel="shortcut icon" type="image/x-icon" href="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico"> <link rel="mask-icon" color="#4C4C4C" href="https://res.wx.qq.com/a/wx_fed/assets/res/MjliNWVm.svg"> <link rel="apple-touch-icon-precomposed" href="https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png"> <script> (function () { 'use strict'; const SCRIPT_URLs = [ 'https://dldir1.qq.com/WechatWebDev/devPlatform/px.min.js', 'https://dev.weixin.qq.com/platform-console/proxy/assets/tel/px.min.js', ]; const param = { maskMode: 'no-mask', // 隐私策略, all-mask 或 no-mask, 详见：https://dev.weixin.qq.com/docs/analysis/sdk/docs.html recordCanvas: false, // 若要采集canvas, 设为true projectId: 'wxef34f91ddab0c534-0HLdQNKAk-dzsFsA', // 项目 ID，需替换为体验分析项目 ID iframe: false, // 是否采集 iframe 页面 console: true, // 是否采集 console 输出的错误日志 network: true, // 是否采集网络错误 }; function loadScript(url) { return new Promise((resolve, reject) => { const scriptEle = document.createElement('script'); scriptEle.type = 'text/javascript'; scriptEle.async = true; scriptEle.src = url; scriptEle.onload = () => { resolve(url); }; scriptEle.onerror = () => { reject(new Error('Script load error')); }; document.head.appendChild(scriptEle); }); } async function main() { try { sessionStorage.setItem('wxobs_start_timestamp', String(Date.now())); const fastestUrl = await Promise.race(SCRIPT_URLs.map(url => loadScript(url))); window.__startPX && window.__startPX(param); } catch (error) { console.error('Error loading scripts:', error); } } main(); })(); </script> <link rel="preload" href="https://res.wx.qq.com/wxdoc/dist/assets/css/0.styles.07e330be.css" as="style"><link rel="preload" href="https://res.wx.qq.com/wxdoc/dist/assets/js/app.f9e00986.js" as="script"><link rel="preload" href="https://res.wx.qq.com/wxdoc/dist/assets/js/163.c2cbabc7.js" as="script"> <link rel="stylesheet" href="https://res.wx.qq.com/wxdoc/dist/assets/css/0.styles.07e330be.css"> </head> <body> <div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-container"><header class="navbar navbar_with-link"><div class="navbar__left"><a href="/doc/" class="home-link"><div class="logo__wrp"><span class="logo__icon"></span></div></a> <span class="dot"></span> <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">小程序</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item selected"> <a href="/miniprogram/dev/framework/" class="nav-link external"> 小程序 </a></li><li class="dropdown-item"> <a href="/minigame/introduction/" class="nav-link external"> 小游戏 </a></li><li class="dropdown-item"> <a href="/doc/offiaccount/Getting_Started/Overview.html" class="nav-link external"> 公众号 </a></li><li class="dropdown-item"> <a href="/doc/aispeech/platform/INTRODUCTION.html" class="nav-link external"> 智能对话 </a></li><li class="dropdown-item"> <a href="/doc/oplatform/Third-party_Platforms/2.0/getting_started/terminology_introduce.html" class="nav-link external"> 开放平台 </a></li><li class="dropdown-item"> <a href="https://work.weixin.qq.com/api/doc" class="nav-link external"> 企业微信 </a></li><li class="dropdown-item"> <a href="https://pay.weixin.qq.com/doc/v3/merchant/4012062524" class="nav-link external"> 微信支付 </a></li><li class="dropdown-item"> <a href="/doc/channels/Operational_Guidelines/Shop_opening_guidelines.html" class="nav-link external"> 视频号 </a></li><li class="dropdown-item"> <a href="/doc/store/API/basics/ChangeLog.html" class="nav-link external"> 微信小店 </a></li><li class="dropdown-item"> <a href="/doc/xwei/xiaowei-introduction/Introduction.html" class="nav-link external"> 腾讯小微 </a></li><li class="dropdown-item"> <a href="/doc/ministore/minishopquickstart/introduction.html" class="nav-link external"> 小商店 </a></li></ul></div></div> <div class="navbar__center"><nav class="nav-links"><div class="nav-item selected"><a href="/miniprogram/dev/framework/" class="nav-link external"> 开发 </a></div><div class="nav-item"><a href="/miniprogram/introduction/" class="nav-link external"> 介绍 </a></div><div class="nav-item"><a href="/miniprogram/design/" class="nav-link external"> 设计 </a></div><div class="nav-item"><a href="/miniprogram/product/" class="nav-link external"> 运营 </a></div><div class="nav-item"><a href="/miniprogram/analysis/wedata/intro/" class="nav-link external"> 数据 </a></div><div class="nav-item"><a href="/miniprogram/security/basic/" class="nav-link external"> 安全 </a></div></nav></div> <div class="navbar__right"><nav class="nav-links"><div class="nav-item community-item"><a href="https://developers.weixin.qq.com/community/develop/mixflow" target="_blank" class="nav-link external"> 社区 </a></div><div class="nav-item community-item"><a href="https://developers.weixin.qq.com/community/business" target="_blank" class="nav-link external"> 学堂 </a></div></nav> <ul class="lang-tab"><li class="lang-tab__icon"><img src="https://res.wx.qq.com/t/components/icons/base/translate_regular.svg"></li></ul> <div class="search__wrp-flex"><div class="search__input"><div class="weui-desktop-search"><button class="weui-desktop-icon-btn weui-desktop-search__btn weui-desktop-icon-btn__width"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.4529 16.4014C14.2428 17.4001 12.6915 18 11 18C7.134 18 4 14.866 4 11C4 7.134 7.134 4 11 4C14.866 4 18 7.134 18 11C18 12.7425 17.3633 14.3363 16.3099 15.5614L20.4243 19.6757L19.5757 20.5243L15.4529 16.4014ZM16.8 11C16.8 14.2033 14.2033 16.8 11 16.8C7.79674 16.8 5.2 14.2033 5.2 11C5.2 7.79676 7.79674 5.20001 11 5.20001C14.2033 5.20001 16.8 7.79676 16.8 11Z" fill="black"></path></svg></button></div> <a href="javascript:;" class="search-back__btn">取消</a></div> <div class="reco-list__wrp" style="display:none;"><ul class="reco__list"></ul> <div class="show-more"><a href="/doc/search?source=more&query=&doc_type=miniprogram&jumpbackUrl=%2Fdoc%2F" class="reco-item__link">查看更多 </a></div></div> <div class="reco-list__wrp" style="display:none;"><div class="show-more"><a href="/doc/search?source=more&query=&doc_type=miniprogram&jumpbackUrl=%2Fdoc%2F" class="reco-item__link">在小程序下暂无结果，查看其它业务相关内容 > </a></div></div></div></div></header> <div class="subnavbar"><ul class="subnavbar__list"><li class="subnavbar__item selected" style="display:;"><div class="dropdown-subnavbar-title"><a href="/miniprogram/dev/framework/" target="_self" class="router-link-active"> 指南 </a> </div> </li><li class="subnavbar__item" style="display:;"><div class="dropdown-subnavbar-title"><a href="/miniprogram/dev/reference/" target="_self"> 框架 </a> </div> </li><li class="subnavbar__item" style="display:;"><div class="dropdown-subnavbar-title"><a href="/miniprogram/dev/component/" target="_self"> 组件 </a> </div> </li><li class="subnavbar__item" style="display:;"><div class="dropdown-subnavbar-title"><a href="/miniprogram/dev/api/" target="_self"> API </a> </div> </li><li class="subnavbar__item" style="display:;"><div class="dropdown-subnavbar-title"><a href="/miniprogram/dev/OpenApiDoc/" target="_self"> 服务端 </a> </div> </li><li class="subnavbar__item dropdown-subnavbar" style="display:;"><div class="dropdown-subnavbar-title"><a>平台能力</a> <span class="arrow right dropdown-subnavbar-select"></span></div> <ul class="dropdown-subnavbar-ul"><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/platform-capabilities/industry/" target="_self" class="nav-link external"> 行业能力 </a></li><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/platform-capabilities/business-capabilities/" target="_self" class="nav-link external"> 商业能力 </a></li><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/platform-capabilities/miniapp/" target="_self" class="nav-link external"> 多端能力 </a></li><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/platform-capabilities/service-market/" target="_self" class="nav-link external"> 服务市场 </a></li><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/platform-capabilities/cityservice/" target="_self" class="nav-link external"> 城市服务 </a></li><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/platform-capabilities/charge/" target="_self" class="nav-link external"> 付费能力 </a></li><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/platform-capabilities/extended/" target="_self" class="nav-link external"> 拓展能力 </a></li></ul></li><li class="subnavbar__item" style="display:;"><div class="dropdown-subnavbar-title"><a href="/miniprogram/dev/devtools/devtools" target="_self"> 工具 </a> </div> </li><li class="subnavbar__item dropdown-subnavbar" style="display:;"><div class="dropdown-subnavbar-title"><a>云服务</a> <span class="arrow right dropdown-subnavbar-select"></span></div> <ul class="dropdown-subnavbar-ul"><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/wxcloudservice/wxcloud/basis/getting-started" target="_self" class="nav-link external"> 云开发 </a></li><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/wxcloudservice/wxcloudrun/src/" target="_self" class="nav-link external"> 云托管 </a></li></ul></li><li class="subnavbar__item" style="display:;"><div class="dropdown-subnavbar-title"><a href="/miniprogram/dev/framework/release/" target="_self"> 更新日志 </a> </div> </li></ul></div> <div class="mobile-links__wrp"><div class="mobile-links_mobile"><a href="javascript:;" class="mobile-links__btn">开发</a></div> <div class="mobile-links__panel"><div class="links-panel__bd"><nav class="nav-links"><div class="nav-item selected"><a href="/miniprogram/dev/framework/" class="nav-link external"> 开发 </a></div><div class="nav-item"><a href="/miniprogram/introduction/" class="nav-link external"> 介绍 </a></div><div class="nav-item"><a href="/miniprogram/design/" class="nav-link external"> 设计 </a></div><div class="nav-item"><a href="/miniprogram/product/" class="nav-link external"> 运营 </a></div><div class="nav-item"><a href="/miniprogram/analysis/wedata/intro/" class="nav-link external"> 数据 </a></div><div class="nav-item"><a href="/miniprogram/security/basic/" class="nav-link external"> 安全 </a></div></nav></div> <div class="links-panel__ft"><ul class="lang-tab"><li class="lang-tab__icon"><img src="https://res.wx.qq.com/t/components/icons/base/translate_regular.svg"></li></ul></div></div> <div><div class="weui-mask" style="display:none;"></div> <div class="weui-actionsheet "> <div class="weui-actionsheet__menu"><div class="weui-actionsheet__cell">中文</div><div class="weui-actionsheet__cell">EN</div></div> <div class="weui-actionsheet__action"><div class="weui-actionsheet__cell">取消</div></div></div></div></div> <a href="javascript:;" class="mobile-search-btn"></a> <div class="main-container" style="margin-top:144px;"><div class="main-contontaier__bd" style="min-height:0px;"><div class="sidebar__wrp"><div class="sidebar-cell_mobile"><li class="subnavbar__item selected"><a href="javascript:;" target="_self">指南</a></li></div> <aside class="sidebar" style="top:144px;"> <div class="TreeNavigation"><div class="NavigationLevel NavigationLevel--level-0"><ul><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/" class="NavigationItem__router-link"> 起步 </a>  </span></div> <ul class="NavigationLevel__children"><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/#小程序简介" class="NavigationItem__router-link"> 小程序简介 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/#小程序技术发展史" class="NavigationItem__router-link"> 小程序技术发展史 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/#小程序与普通网页开发的区别" class="NavigationItem__router-link"> 小程序与普通网页开发的区别 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/#体验小程序" class="NavigationItem__router-link"> 体验小程序 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/getstart.html" class="NavigationItem__router-link"> 开始 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/getstart.html#申请账号" class="NavigationItem__router-link"> 申请账号 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/getstart.html#安装开发工具" class="NavigationItem__router-link"> 安装开发者工具 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/getstart.html#你的第一个小程序" class="NavigationItem__router-link"> 你的第一个小程序 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/getstart.html#编译预览" class="NavigationItem__router-link"> 编译预览 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/code.html" class="NavigationItem__router-link"> 小程序代码构成 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/code.html#JSON-配置" class="NavigationItem__router-link"> JSON 配置 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/code.html#WXML-模板" class="NavigationItem__router-link"> WXML 模板 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/code.html#WXSS-样式" class="NavigationItem__router-link"> WXSS 样式 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/code.html#JS-逻辑交互" class="NavigationItem__router-link"> JS 逻辑交互 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/framework.html" class="NavigationItem__router-link"> 小程序宿主环境 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/framework.html#渲染层和逻辑层" class="NavigationItem__router-link"> 渲染层和逻辑层 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/framework.html#程序与页面" class="NavigationItem__router-link"> 程序与页面 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/framework.html#组件" class="NavigationItem__router-link"> 组件 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/framework.html#API" class="NavigationItem__router-link"> API </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/release.html" class="NavigationItem__router-link"> 小程序协同工作和发布 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/release.html#协同工作" class="NavigationItem__router-link"> 协同工作 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/release.html#小程序的版本" class="NavigationItem__router-link"> 小程序的版本 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/release.html#发布上线" class="NavigationItem__router-link"> 发布上线 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/quickstart/release.html#运营数据" class="NavigationItem__router-link"> 运营数据 </a>  </span></li></ul></div></li><li><span class="NavigationItem">   <a href="https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a" target="_blank" class="NavigationItem__external-link">小程序开发指南</a></span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/structure.html" class="NavigationItem__router-link"> 目录结构 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/config.html" class="NavigationItem__router-link"> 配置小程序 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/config.html#全局配置" class="NavigationItem__router-link"> 全局配置 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/config.html#页面配置" class="NavigationItem__router-link"> 页面配置 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/MINA.html" class="NavigationItem__router-link"> 小程序框架 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/MINA.html" class="NavigationItem__router-link"> 介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/app-service/scene.html" class="NavigationItem__router-link"> 场景值 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/app-service/" class="NavigationItem__router-link"> 逻辑层 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/app-service/" class="NavigationItem__router-link"> 介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/app-service/app.html" class="NavigationItem__router-link"> 注册小程序 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/app-service/page.html" class="NavigationItem__router-link"> 注册页面 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/app-service/page-life-cycle.html" class="NavigationItem__router-link"> 页面生命周期 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-3"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/app-service/route.html" class="NavigationItem__router-link"> 页面路由 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/app-service/route-event-listener.html" class="NavigationItem__router-link"> 页面路由监听 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/app-service/module.html" class="NavigationItem__router-link"> 模块化 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/app-service/api.html" class="NavigationItem__router-link"> API </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/view/" class="NavigationItem__router-link"> 视图层 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/view/" class="NavigationItem__router-link"> 介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/view/wxml/" class="NavigationItem__router-link"> WXML </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/view/wxss.html" class="NavigationItem__router-link"> WXSS </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/view/wxs/" class="NavigationItem__router-link"> WXS </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-3"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/view/wxml/event.html" class="NavigationItem__router-link"> 事件系统 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/view/wxml/event.html" class="NavigationItem__router-link"> 介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/view/interactive-animation.html" class="NavigationItem__router-link"> WXS 响应事件 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/view/tap.html" class="NavigationItem__router-link"> Tap 事件 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/view/two-way-bindings.html" class="NavigationItem__router-link"> 简易双向绑定 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/view/component.html" class="NavigationItem__router-link"> 基础组件 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/view/selector.html" class="NavigationItem__router-link"> 获取界面上的节点信息 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/view/resizable.html" class="NavigationItem__router-link"> 响应显示区域变化 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/view/frameset.html" class="NavigationItem__router-link"> 分栏模式 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/view/animation.html" class="NavigationItem__router-link"> 动画 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/view/initial-rendering-cache.html" class="NavigationItem__router-link"> 初始渲染缓存 </a>  </span></li></ul></div></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/env.html" class="NavigationItem__router-link"> 小程序运行时 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/env.html" class="NavigationItem__router-link"> 运行环境 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/js-support.html" class="NavigationItem__router-link"> JavaScript 支持情况 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/operating-mechanism.html" class="NavigationItem__router-link"> 运行机制 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/update-mechanism.html" class="NavigationItem__router-link"> 更新机制 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/introduction.html" class="NavigationItem__router-link"> Skyline 渲染引擎 </a>  </span></div> <ul class="NavigationLevel__children"><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/introduction.html" class="NavigationItem__router-link"> 概览 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/introduction.html" class="NavigationItem__router-link"> 介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/features.html" class="NavigationItem__router-link"> 特性 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/comparation.html" class="NavigationItem__router-link"> 性能对比 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/experience.html" class="NavigationItem__router-link"> 示例体验 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/component.html" class="NavigationItem__router-link"> 支持与差异 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/component.html" class="NavigationItem__router-link"> 基础组件 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/wxss.html" class="NavigationItem__router-link"> WXSS 样式 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/worklet.html" class="NavigationItem__router-link"> 增强特性 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/worklet.html" class="NavigationItem__router-link"> Worklet 动画 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/gesture.html" aria-current="page" class="NavigationItem__router-link router-link-exact-active router-link-active"> 手势系统 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-3"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/custom-route.html" class="NavigationItem__router-link"> 自定义路由 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/preset-route.html" class="NavigationItem__router-link"> 预设路由效果 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/open-container.html" class="NavigationItem__router-link"> 容器转场动画 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/pop-gesture.html" class="NavigationItem__router-link"> 页面返回手势 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/share-element.html" class="NavigationItem__router-link"> 共享元素动画 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/appbar.html" class="NavigationItem__router-link"> 全局工具栏 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/scroll-container.html" class="NavigationItem__router-link"> 滚动容器及其应用场景 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/migration/" class="NavigationItem__router-link"> 从 WebView 迁移 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/migration/" class="NavigationItem__router-link"> 起步 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/glass-easel/skyline.html" class="NavigationItem__router-link"> 新版组件框架适配指引 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/migration/best-practice.html" class="NavigationItem__router-link"> 最佳实践 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/migration/compatibility.html" class="NavigationItem__router-link"> 常见兼容问题 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/migration/release.html" class="NavigationItem__router-link"> 发布上线 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/migration/migration-tool.html" class="NavigationItem__router-link"> 迁移工具 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/debug.html" class="NavigationItem__router-link"> 性能调试 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/changelog.html" class="NavigationItem__router-link"> 动态 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/changelog.html" class="NavigationItem__router-link"> 更新日志 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/runtime/skyline/status.html" class="NavigationItem__router-link"> 特性状态 </a>  </span></li></ul></div></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/glass-easel/introduction.html" class="NavigationItem__router-link"> glass-easel 组件框架 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/glass-easel/introduction.html" class="NavigationItem__router-link"> 介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/glass-easel/migration.html" class="NavigationItem__router-link"> 适配指引 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/glass-easel/beta-features.html" class="NavigationItem__router-link"> 新增特性 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/glass-easel/beta-features.html" class="NavigationItem__router-link"> 介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/glass-easel/call-data-functions.html" class="NavigationItem__router-link"> 在模板中调用 data 里的函数 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/glass-easel/chaining-api.html" class="NavigationItem__router-link"> Chaining API </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/glass-easel/chaining-api-init.html" class="NavigationItem__router-link"> Chaining API 的 init 函数 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/glass-easel/dynamic-slots.html" class="NavigationItem__router-link"> 动态 slot </a>  </span></li></ul></div></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/" class="NavigationItem__router-link"> 自定义组件 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/" class="NavigationItem__router-link"> 介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/wxml-wxss.html" class="NavigationItem__router-link"> 组件模板和样式 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/component.html" class="NavigationItem__router-link"> Component 构造器 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/events.html" class="NavigationItem__router-link"> 组件间通信与事件 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/lifetimes.html" class="NavigationItem__router-link"> 组件生命周期 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/behaviors.html" class="NavigationItem__router-link"> behaviors </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/relations.html" class="NavigationItem__router-link"> 组件间关系 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/observer.html" class="NavigationItem__router-link"> 数据监听器 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/pure-data.html" class="NavigationItem__router-link"> 纯数据字段 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/generics.html" class="NavigationItem__router-link"> 抽象节点 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/extend.html" class="NavigationItem__router-link"> 自定义组件扩展 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/trdparty.html" class="NavigationItem__router-link"> 开发第三方自定义组件 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/unit-test.html" class="NavigationItem__router-link"> 单元测试 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/update-perf-stat.html" class="NavigationItem__router-link"> 获取更新性能统计信息 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/placeholder.html" class="NavigationItem__router-link"> 占位组件 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/custom-component/debug.html" class="NavigationItem__router-link"> 查看自定义组件数据 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/plugin/" class="NavigationItem__router-link"> 插件 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/plugin/" class="NavigationItem__router-link"> 介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/plugin/development.html" class="NavigationItem__router-link"> 开发插件 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/plugin/using.html" class="NavigationItem__router-link"> 使用插件 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/plugin/api-limit.html" class="NavigationItem__router-link"> 插件调用 API 的限制 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/plugin/component-limit.html" class="NavigationItem__router-link"> 插件使用组件的限制 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/plugin/functional-pages.html" class="NavigationItem__router-link"> 插件功能页 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/plugin/functional-pages.html" class="NavigationItem__router-link"> 介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/plugin/functional-pages/user-info.html" class="NavigationItem__router-link"> 用户信息功能页 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/plugin/functional-pages/request-payment.html" class="NavigationItem__router-link"> 支付功能页 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/plugin/functional-pages/choose-address.html" class="NavigationItem__router-link"> 收货地址功能页 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/plugin/functional-pages/choose-invoice.html" class="NavigationItem__router-link"> 发票功能页 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/plugin/functional-pages/choose-invoice-title.html" class="NavigationItem__router-link"> 发票抬头功能页 </a>  </span></li></ul></div></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/network.html" class="NavigationItem__router-link"> 基础能力 </a>  </span></div> <ul class="NavigationLevel__children"><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/network.html" class="NavigationItem__router-link"> 网络 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/network.html" class="NavigationItem__router-link"> 使用说明 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/domain.html" class="NavigationItem__router-link"> 业务域名 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/mDNS.html" class="NavigationItem__router-link"> 局域网通信 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/HTTPDNS.html" class="NavigationItem__router-link"> 移动解析HttpDNS </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/storage.html" class="NavigationItem__router-link"> 存储 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/file-system.html" class="NavigationItem__router-link"> 文件系统 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/canvas.html" class="NavigationItem__router-link"> 画布 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/canvas.html" class="NavigationItem__router-link"> 介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/canvas-legacy-migration.html" class="NavigationItem__router-link"> 旧版迁移指南 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/subpackages.html" class="NavigationItem__router-link"> 分包加载 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/subpackages/basic.html" class="NavigationItem__router-link"> 使用分包 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/subpackages/independent.html" class="NavigationItem__router-link"> 独立分包 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/subpackages/preload.html" class="NavigationItem__router-link"> 分包预下载 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/subpackages/async.html" class="NavigationItem__router-link"> 分包异步化 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/lazyload.html" class="NavigationItem__router-link"> 按需注入和用时注入 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/workers.html" class="NavigationItem__router-link"> 多线程 Worker </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/server-ability/backend-api.html" class="NavigationItem__router-link"> 服务端能力 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/server-ability/backend-api.html" class="NavigationItem__router-link"> 服务端 API </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/server-ability/message-push.html" class="NavigationItem__router-link"> 消息推送 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/custom-tabbar.html" class="NavigationItem__router-link"> 自定义 tabBar </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/background-fetch.html" class="NavigationItem__router-link"> 周期性更新 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/pre-fetch.html" class="NavigationItem__router-link"> 数据预拉取 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/darkmode.html" class="NavigationItem__router-link"> DarkMode 适配指南 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/adapt.html" class="NavigationItem__router-link"> 大屏适配指南 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/ability/ohos.html" class="NavigationItem__router-link"> 鸿蒙 OS 适配指南 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/inference/tutorial.html" class="NavigationItem__router-link"> AI/AR </a>  </span></div> <ul class="NavigationLevel__children"><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-3"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/inference/tutorial.html" class="NavigationItem__router-link"> AI推理能力 <span class="wedoc-beta-tag" style="margin-left:0;">Beta</span></a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/inference/tutorial.html" class="NavigationItem__router-link"> 介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/inference/supports.html" class="NavigationItem__router-link"> 算子支持列表 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/inference/tutorial_int8.html" class="NavigationItem__router-link"> 模型量化推理 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-3"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/visionkit/base.html" class="NavigationItem__router-link"> VisionKit 视觉能力 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/visionkit/base.html" class="NavigationItem__router-link"> VisionKit 基础 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/visionkit/plane.html" class="NavigationItem__router-link"> 6Dof-水平面 AR </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/visionkit/plane-options.html" class="NavigationItem__router-link"> 6Dof-水平面 AR 扩展能力 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/visionkit/marker.html" class="NavigationItem__router-link"> Marker AR </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/visionkit/osd.html" class="NavigationItem__router-link"> 单样本检测（OSD） </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/visionkit/face.html" class="NavigationItem__router-link"> 人脸检测 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/visionkit/body.html" class="NavigationItem__router-link"> 人体检测 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/visionkit/hand.html" class="NavigationItem__router-link"> 人手检测 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/visionkit/shoe.html" class="NavigationItem__router-link"> 鞋部检测 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/visionkit/ocr.html" class="NavigationItem__router-link"> OCR检测 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/visionkit/idcard.html" class="NavigationItem__router-link"> 身份证检测 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/visionkit/depth.html" class="NavigationItem__router-link"> 深度估计 </a>  </span></li></ul></div></li></ul></div></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/" class="NavigationItem__router-link"> XR-FRAME </a>  </span></div> <ul class="NavigationLevel__children"><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/" class="NavigationItem__router-link"> 开发指南 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/" class="NavigationItem__router-link"> 开始 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#新建一个XR组件" class="NavigationItem__router-link"> 新建一个XR组件 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#在页面中使用这个组件" class="NavigationItem__router-link"> 在页面中使用这个组件 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#添加一个物体" class="NavigationItem__router-link"> 添加一个物体 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#来点颜色和灯光" class="NavigationItem__router-link"> 来点颜色和灯光 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#有点寡淡，加上图像" class="NavigationItem__router-link"> 有点寡淡，加上图像 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#让场景更丰富，环境数据" class="NavigationItem__router-link"> 让场景更丰富，环境数据 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#动起来，加入动画" class="NavigationItem__router-link"> 动起来，加入动画 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#还是不够，放个模型" class="NavigationItem__router-link"> 还是不够，放个模型 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#再来点交互" class="NavigationItem__router-link"> 再来点交互 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#组件通信，加上HUD" class="NavigationItem__router-link"> 组件通信，加上HUD </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#虚拟-x-现实，追加-AR-能力" class="NavigationItem__router-link"> 虚拟 x 现实，追加 AR 能力 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#识别人脸，给自己戴个面具" class="NavigationItem__router-link"> 识别人脸，给自己戴个面具 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#手势，给喜欢的作品点赞" class="NavigationItem__router-link"> 手势，给喜欢的作品点赞 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#OSDMarker，给现实物体做标记" class="NavigationItem__router-link"> OSDMarker，给现实物体做标记 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#_2DMarker-视频，让照片动起来" class="NavigationItem__router-link"> 2DMarker+视频，让照片动起来 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#加上魔法，来点粒子" class="NavigationItem__router-link"> 加上魔法，来点粒子 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#后处理，让画面更加好玩" class="NavigationItem__router-link"> 后处理，让画面更加好玩 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#分享给你的好友吧！" class="NavigationItem__router-link"> 分享给你的好友吧！ </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/xr-frame/#之后的，就交给你的创意" class="NavigationItem__router-link"> 之后的，就交给你的创意 </a>  </span></li></ul></div></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/bluetooth.html" class="NavigationItem__router-link"> 连接硬件能力 </a>  </span></div> <ul class="NavigationLevel__children"><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/bluetooth.html" class="NavigationItem__router-link"> 蓝牙 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/bluetooth.html" class="NavigationItem__router-link"> 介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/ble.html" class="NavigationItem__router-link"> 蓝牙低功耗 (BLE) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/ble-mesh.html" class="NavigationItem__router-link"> 蓝牙低功耗网状网络 (BLE Mesh) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/beacon.html" class="NavigationItem__router-link"> 蓝牙信标 (Beacon) </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/nfc.html" class="NavigationItem__router-link"> 近场通信 (NFC) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/wifi.html" class="NavigationItem__router-link"> 无线局域网 (Wi-Fi) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/device-access.html" class="NavigationItem__router-link"> 硬件设备接入 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/device-message.html" class="NavigationItem__router-link"> 设备消息 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/device-register.html" class="NavigationItem__router-link"> 设备认证 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/device-register.html" class="NavigationItem__router-link"> 指引 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/device-register-wmpf.html" class="NavigationItem__router-link"> 使用 WMPF（安卓）认证设备 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/device-register-sdk.html" class="NavigationItem__router-link"> 设备认证 SDK（安卓） </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/device-tee.html" class="NavigationItem__router-link"> 设备认证 TEE 规范 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/device-voip.html" class="NavigationItem__router-link"> 音视频通话（for 硬件） </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/device-voip.html" class="NavigationItem__router-link"> 指引 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-3"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/" class="NavigationItem__router-link"> VoIP 通话插件 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/" class="NavigationItem__router-link"> 接入指引 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-4"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/api/initByCaller.html" class="NavigationItem__router-link"> 接口文档 </a>  </span></div> <ul class="NavigationLevel__children"><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-5"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/api/call-intro.html" class="NavigationItem__router-link"> 发起通话 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/api/call-intro.html" class="NavigationItem__router-link"> 介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/api/initByCaller.html" class="NavigationItem__router-link"> initByCaller </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/api/callWMPF.html" class="NavigationItem__router-link"> callWMPF </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/api/callDevice.html" class="NavigationItem__router-link"> callDevice </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/api/forceHangUpVoip.html" class="NavigationItem__router-link"> forceHangUpVoip </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/api/getPluginEnterOptions.html" class="NavigationItem__router-link"> getPluginEnterOptions </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/api/getPluginOnloadOptions.html" class="NavigationItem__router-link"> getPluginOnloadOptions </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/api/onVoipEvent.html" class="NavigationItem__router-link"> onVoipEvent </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/api/setCustomBtnText.html" class="NavigationItem__router-link"> setCustomBtnText </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/api/setUIConfig.html" class="NavigationItem__router-link"> setUIConfig </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/api/setVoipEndPagePath.html" class="NavigationItem__router-link"> setVoipEndPagePath </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/api/getIotBindContactList.html" class="NavigationItem__router-link"> getIotBindContactList </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/api/errCode.html" class="NavigationItem__router-link"> 错误码 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/wxpay.html" class="NavigationItem__router-link"> 支付刷脸模式 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-plugin/changelog.html" class="NavigationItem__router-link"> 更新日志 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip/device-app-android.html" class="NavigationItem__router-link"> 开发安卓设备端应用 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-3"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip/voip-sdk.html" class="NavigationItem__router-link"> 小程序音视频通话 SDK </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip/voip-sdk.html" class="NavigationItem__router-link"> Linux 设备 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-4"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip/le-device-sdk.html" class="NavigationItem__router-link"> RTOS 设备 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip/le-device-sdk.html" class="NavigationItem__router-link"> 云对云设备端 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip/cloud-server-sdk.html" class="NavigationItem__router-link"> 云对云服务端 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip/voip-video.html" class="NavigationItem__router-link"> VoIP 视频流指南 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-sdk/wx_operation.html" class="NavigationItem__router-link"> 异步接口使用指南 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip-sdk/hal.html" class="NavigationItem__router-link"> 硬件抽象层 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip/auth.html" class="NavigationItem__router-link"> 用户授权设备 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip/call-wechat.html" class="NavigationItem__router-link"> 设备呼叫手机微信 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip/call-wmpf.html" class="NavigationItem__router-link"> 手机微信呼叫设备(安卓) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip/call-device.html" class="NavigationItem__router-link"> 手机微信呼叫设备(Linux) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip/performance.html" class="NavigationItem__router-link"> 性能与体验优化 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-3"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip/voip-faq.html" class="NavigationItem__router-link"> 问题排查 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip/voip-faq.html" class="NavigationItem__router-link"> 常见问题 FAQ </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip/guide.html" class="NavigationItem__router-link"> 通话异常排查指南 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip/notification.html" class="NavigationItem__router-link"> 通话提醒异常排查指南 </a>  </span></li></ul></div></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/download-device-register.html" class="NavigationItem__router-link"> 下载 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/download-device-register.html" class="NavigationItem__router-link"> 设备认证工具 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/voip/download-wxvoipsdk-linux.html" class="NavigationItem__router-link"> 小程序音视频通话 SDK (Linux) </a>  </span></li><li><span class="NavigationItem">   <a href="https://developers.weixin.qq.com/doc/oplatform/Miniprogram_Frame/download.html" target="_blank" class="NavigationItem__external-link">安卓小程序硬件框架</a></span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/device-group.html" class="NavigationItem__router-link"> 设备组 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/device/help.html" class="NavigationItem__router-link"> 需要帮助 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/login.html" class="NavigationItem__router-link"> 开放能力 </a>  </span></div> <ul class="NavigationLevel__children"><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/login.html" class="NavigationItem__router-link"> 用户信息 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/login.html" class="NavigationItem__router-link"> 小程序登录 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/union-id.html" class="NavigationItem__router-link"> UnionID 机制说明 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/authorize.html" class="NavigationItem__router-link"> 授权 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/signature.html" class="NavigationItem__router-link"> 开放数据校验与解密 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/getPhoneNumber.html" class="NavigationItem__router-link"> 手机号快速验证组件 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/getRealtimePhoneNumber.html" class="NavigationItem__router-link"> 手机号实时验证组件 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/userProfile.html" class="NavigationItem__router-link"> 获取头像昵称 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/bio-auth.html" class="NavigationItem__router-link"> 生物认证 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/share-timeline.html" class="NavigationItem__router-link"> 分享到朋友圈 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/share.html" class="NavigationItem__router-link"> 转发 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/share.html" class="NavigationItem__router-link"> 转发 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/share/updatable-message.html" class="NavigationItem__router-link"> 动态消息 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/share/private-message.html" class="NavigationItem__router-link"> 小程序私密消息 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/favorite.html" class="NavigationItem__router-link"> 收藏 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/material/support_material.html" class="NavigationItem__router-link"> 聊天素材打开 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/safe-password.html" class="NavigationItem__router-link"> 安全能力 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/user-encryptkey.html" class="NavigationItem__router-link"> 小程序加密网络通道 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/safe-password.html" class="NavigationItem__router-link"> 安全键盘 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/share-werun.html" class="NavigationItem__router-link"> 分享数据到微信运动 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/voip-chat.html" class="NavigationItem__router-link"> 音视频通话 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/voip-chat.html" class="NavigationItem__router-link"> 多人音视频对话 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/1v1voip.html" class="NavigationItem__router-link"> 双人音视频对话 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/launchApp.html" class="NavigationItem__router-link"> 打开 App </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/openEmbeddedMiniProgram.html" class="NavigationItem__router-link"> 打开半屏小程序 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/subscribe-message.html" class="NavigationItem__router-link"> 消息 </a>  </span></div> <ul class="NavigationLevel__children"><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-3"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/subscribe-message-overview.html" class="NavigationItem__router-link"> 订阅消息 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/subscribe-message-2.html" class="NavigationItem__router-link"> 新版一次性订阅消息开发指南 <span class="wedoc-beta-tag" style="margin-left:0;">Beta</span></a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-4"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/subscribe-message.html" class="NavigationItem__router-link"> 小程序订阅消息（用户通过弹窗订阅）开发指南 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/subscribe-message.html#订阅消息语音提醒" class="NavigationItem__router-link"> 订阅消息语音提醒 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/subscribe-message.html#订阅消息添加提醒" class="NavigationItem__router-link"> 订阅消息添加提醒 </a>  </span></li></ul></div></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/uniform-message.html" class="NavigationItem__router-link"> 统一服务消息 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-3"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/customer-message/customer-message.html" class="NavigationItem__router-link"> 客服消息 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/customer-message/customer-message.html" class="NavigationItem__router-link"> 概述 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/customer-message/receive.html" class="NavigationItem__router-link"> 接收消息和事件 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/customer-message/send.html" class="NavigationItem__router-link"> 发送消息 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/customer-message/trans.html" class="NavigationItem__router-link"> 转发消息 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/customer-message/typing.html" class="NavigationItem__router-link"> 下发客服输入状态 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/customer-message/temp-media.html" class="NavigationItem__router-link"> 临时素材 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/location-message.html" class="NavigationItem__router-link"> 位置消息 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/qr-code.html" class="NavigationItem__router-link"> 获取小程序码 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/url-scheme.html" class="NavigationItem__router-link"> 获取小程序链接 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/url-scheme.html" class="NavigationItem__router-link"> 获取 URL Scheme </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/url-link.html" class="NavigationItem__router-link"> 获取 URL Link </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/shortlink.html" class="NavigationItem__router-link"> 获取 Short Link </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/sms.html" class="NavigationItem__router-link"> 应用：短信打开小程序 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/NFC.html" class="NavigationItem__router-link"> 应用：NFC 标签打开小程序 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/migrateMiniprogram.html" class="NavigationItem__router-link"> 小程序账号迁移 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/channels-profile.html" class="NavigationItem__router-link"> 视频号 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/channels-profile.html" class="NavigationItem__router-link"> 视频号主页 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/channels-activity.html" class="NavigationItem__router-link"> 视频号视频 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/channels-live.html" class="NavigationItem__router-link"> 视频号直播 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/channels-event.html" class="NavigationItem__router-link"> 视频号活动 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/data-analysis.html" class="NavigationItem__router-link"> 数据分析 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/nearby.html" class="NavigationItem__router-link"> 附近的小程序 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/ad/banner-ad.html" class="NavigationItem__router-link"> 广告 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/ad/banner-ad.html" class="NavigationItem__router-link"> Banner 广告 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/ad/rewarded-video-ad.html" class="NavigationItem__router-link"> 激励视频广告 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/ad/interstitialAd-ad.html" class="NavigationItem__router-link"> 插屏广告 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/ad/video-feeds-ad.html" class="NavigationItem__router-link"> 视频广告 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/ad/video-patch-ad.html" class="NavigationItem__router-link"> 视频前贴广告 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/ad/grid-ad.html" class="NavigationItem__router-link"> 格子广告 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/ad/custom-ad.html" class="NavigationItem__router-link"> 原生模板广告 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/ad/preload-ad.html" class="NavigationItem__router-link"> 广告预加载接口 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-3"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/ad/ad-data-interface.html" class="NavigationItem__router-link"> 广告数据接口 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/ad/ad-data-interface.html#一、获取小程序广告汇总数据（publisher-adpos-general）" class="NavigationItem__router-link"> 广告汇总数据 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/ad/ad-data-interface.html#二、获取小程序广告细分数据（publisher-adunit-general）" class="NavigationItem__router-link"> 广告细分数据 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/ad/ad-data-interface.html#三、获取小程序广告位清单（get-adunit-list）" class="NavigationItem__router-link"> 广告位清单 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/open-ability/ad/ad-data-interface.html#四、获取小程序结算收入数据及结算主体信息（publisher-settlement）" class="NavigationItem__router-link"> 结算收入数据 </a>  </span></li></ul></div></li></ul></div></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/usability/debug.html" class="NavigationItem__router-link"> 调试 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/usability/debug.html" class="NavigationItem__router-link"> 概述 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/usability/vConsole.html" class="NavigationItem__router-link"> vConsole </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/usability/sourceMap.html" class="NavigationItem__router-link"> Source Map </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/realtimelog/" class="NavigationItem__router-link"> 实时日志 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/usability/PublicErrno.html" class="NavigationItem__router-link"> Errno错误码 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/tips/start.html" class="NavigationItem__router-link"> 性能与体验 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/" class="NavigationItem__router-link"> 概述 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/tips/start.html" class="NavigationItem__router-link"> 启动性能 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/tips/start.html" class="NavigationItem__router-link"> 概述 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/tips/start_process.html" class="NavigationItem__router-link"> 小程序启动流程 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/tips/start_optimizeA.html" class="NavigationItem__router-link"> 代码包体积优化 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/tips/start_optimizeB.html" class="NavigationItem__router-link"> 代码注入优化 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/tips/start_optimizeC.html" class="NavigationItem__router-link"> 首屏渲染优化 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/tips/start_optimizeD.html" class="NavigationItem__router-link"> 其他优化建议 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/tips.html" class="NavigationItem__router-link"> 运行时性能 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/tips.html" class="NavigationItem__router-link"> 概述 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/tips/runtime_setData.html" class="NavigationItem__router-link"> 合理使用 setData </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/tips/runtime_render.html" class="NavigationItem__router-link"> 渲染性能优化 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/tips/runtime_nav.html" class="NavigationItem__router-link"> 页面切换优化 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/tips/runtime_resource.html" class="NavigationItem__router-link"> 资源加载优化 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/tips/runtime_memory.html" class="NavigationItem__router-link"> 内存优化 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/perf_data.html" class="NavigationItem__router-link"> 性能数据 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/perf_diagnostic_tool.html" class="NavigationItem__router-link"> 性能诊断工具 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/perf_diagnostic_tool.html" class="NavigationItem__router-link"> 工具介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/perf_diagnostic_rules.html" class="NavigationItem__router-link"> 工具评测标准 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/analysis.html" class="NavigationItem__router-link"> 体验分析 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/perf_debug.html" class="NavigationItem__router-link"> 调试工具 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/perf_debug.html" class="NavigationItem__router-link"> 概述 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/remote_debug_2.html" class="NavigationItem__router-link"> 真机调试 2.0 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/devtools-perf.html" class="NavigationItem__router-link"> 「模拟器」和「调试器」 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/quality-panel.html" class="NavigationItem__router-link"> 代码质量分析面板 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/fps_panel.html" class="NavigationItem__router-link"> FPS 面板 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/panel.html" class="NavigationItem__router-link"> 性能面板 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/audits/audits.html" class="NavigationItem__router-link"> 体验评分 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/audits/audits.html" class="NavigationItem__router-link"> 体验评分简介 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-3"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/audits/scoring.html" class="NavigationItem__router-link"> 评分方法与规则 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/audits/scoring.html" class="NavigationItem__router-link"> 评分方法 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/audits/performance.html" class="NavigationItem__router-link"> 性能 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/audits/accessibility.html" class="NavigationItem__router-link"> 体验 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/audits/best-practice.html" class="NavigationItem__router-link"> 最佳实践 </a>  </span></li></ul></div></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/wasm.html" class="NavigationItem__router-link"> WXWebAssembly </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/api-frequency.html" class="NavigationItem__router-link"> 接口调用频率规范 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/network.html" class="NavigationItem__router-link"> 网络调优 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/performance/weak-network.html" class="NavigationItem__router-link"> 弱网体验优化 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/security.html" class="NavigationItem__router-link"> 安全指引 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/security.html#开发原则与注意事项" class="NavigationItem__router-link"> 开发原则与注意事项 </a>  </span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/security.html#通用" class="NavigationItem__router-link"> 通用 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/security.html#接口鉴权" class="NavigationItem__router-link"> 接口鉴权 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/security.html#代码管理与泄漏" class="NavigationItem__router-link"> 代码管理与泄漏 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/security.html#信息泄露" class="NavigationItem__router-link"> 信息泄露 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/security.html#授权用户信息变更" class="NavigationItem__router-link"> 授权用户信息变更 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/security.html#小程序违规处罚信息通知" class="NavigationItem__router-link"> 小程序违规处罚信息通知 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/security.html#后台（包括云函数与自建后台）" class="NavigationItem__router-link"> 后台 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/security.html#注入漏洞" class="NavigationItem__router-link"> 注入漏洞 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/security.html#弱口令" class="NavigationItem__router-link"> 弱口令 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/security.html#文件上传漏洞" class="NavigationItem__router-link"> 文件上传漏洞 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/security.html#文件下载" class="NavigationItem__router-link"> 文件下载 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/security.html#目录遍历" class="NavigationItem__router-link"> 目录遍历 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/security.html#条件竞争" class="NavigationItem__router-link"> 条件竞争 </a>  </span></li></ul></div></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/operation.html" class="NavigationItem__router-link"> 健康运营指引 </a>  </span></div> <ul class="NavigationLevel__children"><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/user-privacy/" class="NavigationItem__router-link"> 用户隐私保护 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/user-privacy/" class="NavigationItem__router-link"> 用户隐私保护指引填写说明 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/user-privacy/miniprogram-intro.html" class="NavigationItem__router-link"> 小程序用户隐私保护指引内容介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/user-privacy/plugin-intro.html" class="NavigationItem__router-link"> 插件用户隐私保护说明内容介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html" class="NavigationItem__router-link"> 小程序隐私协议开发指南 </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/operation.html#用户安全解决方案" class="NavigationItem__router-link"> 用户安全解决方案 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/operation.html#内容安全解决方案" class="NavigationItem__router-link"> 内容安全解决方案 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/gateway.html" class="NavigationItem__router-link"> 业务安全解决方案 </a>  </span></li></ul></div></li><li><span class="NavigationItem">   <a href="https://developer.work.weixin.qq.com/document/path/92455" target="_blank" class="NavigationItem__external-link">企业微信兼容</a></span></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/client-lib/" class="NavigationItem__router-link"> 基础库 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/client-lib/" class="NavigationItem__router-link"> 介绍 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/client-lib/version.html" class="NavigationItem__router-link"> 版本分布 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/compatibility.html" class="NavigationItem__router-link"> 低版本兼容 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/search/seo.html" class="NavigationItem__router-link"> 小程序搜索 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/search/seo.html" class="NavigationItem__router-link"> 小程序搜索优化指南 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/product/" class="NavigationItem__router-link"> 商品数据接入（内测） </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/framework/pc/" class="NavigationItem__router-link"> PC 小程序 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/framework/pc/" class="NavigationItem__router-link"> PC 小程序接入指南 </a>  </span></li></ul></div></li></ul></div></div> </aside></div> <div class="page__wrp"><main class="page"><div class="page-inner" style="min-height:0px;"> <div id="docContent"><div class="Breadcrumb"></div> <div class="content custom"><h1 id="手势系统"><a href="#手势系统" class="header-anchor">#</a> 手势系统</h1> <p>业务开发中，我们常需要监听节点 <code>touch</code> 事件，处理拖拽、缩放相关逻辑。由于 <code>Skyline</code> 采用双线程架构，在进行这样的交互动画时，会具有较大的异步延迟，这点可以参考 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html" target="_blank" rel="noopener noreferrer">wxs 响应事件<span></span></a>。</p> <p><code>Skyline</code> 中 <code>wxs</code> 代码运行在 <code>JS</code> 线程，而事件产生在 <code>UI</code> 线程，因此 <code>wxs 动画</code> 性能有所降低，为了提升小程序交互体验的效果，我们内置了一批手势组件，使用手势组件的优势包括</p> <ol><li>免去开发者监听 <code>touch</code> 事件，自行计算手势逻辑的复杂步骤</li> <li>手势组件直接在 <code>UI</code> 线程响应，避免了传递到 <code>JS</code> 线程带来的延迟</li></ol> <h2 id="效果展示"><a href="#效果展示" class="header-anchor">#</a> 效果展示</h2> <p>下图演示了使用手势、协商手势实现的拖动小球，半屏弹窗手势拖动关闭，分段半屏等效果。<a href="experience.html">点击查看更多 Skyline 示例</a>。</p> <p><img src="https://res.wx.qq.com/wxdoc/dist/assets/img/gesture-show.c3890dc0.gif" alt></p> <p>扫码小程序示例，分别体验 <code>基础手势</code> 和 <code>协商手势</code> 新特性</p> <p><img src="https://res.wx.qq.com/wxdoc/dist/assets/img/gesture-demo.f74d251e.png" alt style="height:150px;margin-right:50px"> <img src="https://res.wx.qq.com/wxdoc/dist/assets/img/bottom-sheet-demo.14829864.png" alt style="height:150px"></p> <h2 id="手势组件"><a href="#手势组件" class="header-anchor">#</a> 手势组件</h2> <div class="table-wrp"><table><thead><tr><th>组件名称</th> <th>触发时机</th></tr></thead> <tbody><tr><td><code><tap-gesture-handler></code></td> <td>点击时触发</td></tr> <tr><td><code><double-tap-gesture-handler></code></td> <td>双击时触发</td></tr> <tr><td><code><scale-gesture-handler></code></td> <td>多指缩放时触发</td></tr> <tr><td><code><force-press-gesture-handler></code></td> <td>iPhone 设备重按时触发</td></tr> <tr><td><code><pan-gesture-handler></code></td> <td>拖动（横向/纵向）时触发</td></tr> <tr><td><code><vertical-drag-gesture-handler></code></td> <td>纵向滑动时触发</td></tr> <tr><td><code><horizontal-drag-gesture-handler></code></td> <td>横向滑动时触发</td></tr> <tr><td><code><long-press-gesture-handler></code></td> <td>长按时触发</td></tr></tbody></table></div><h3 id="工作原理"><a href="#工作原理" class="header-anchor">#</a> 工作原理</h3> <p><strong>手势组件为虚组件</strong>，真正响应事件的是其直接子节点。下方代码中，我们给 <code>container</code> 节点添加了两种类型的手势监听。</p> <ol><li>当在屏幕上横向滑动时，<code>horizontal-drag</code> 手势节点的回调将被触发；</li> <li>当在屏幕上纵向滑动时，<code>vertical-drag</code> 手势节点的回调将被触发。</li></ol> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>horizontal-drag-gesture-handler</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vertical-drag-gesture-handler</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>vertical-drag-gesture-handler</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>horizontal-drag-gesture-handler</span><span class="token punctuation">></span></span> </code></pre></div><p>触摸屏幕时，渲染引擎会从内到外对手势监听器进行手势识别，当某个手势监听器满足条件时，其余的手势监听器将会失效。如在 <code>scroll-view</code> 内部添加纵向的手势监听时，将会阻断 <code>scroll-view</code> 内的手势监听器，导致无法滑动。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>scrol-view</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vertical-drag-gesture-handler</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>vertical-drag-gesture-handler</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>scroll-view</span><span class="token punctuation">></span></span> </code></pre></div><p>需要注意的是，<code>pan</code> 类型的判定条件比 <code>vertical-drag</code> 要宽松，因此纵向滑动时，<code>vertical-drag</code> 将会响应，而 <code>pan</code> 则会失效。当横向滑动时，<code>pan</code> 类型则会响应。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vertical-drag-gesture-handler</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pan-gesture-handler</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pan-gesture-handler</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>vertical-drag-gesture-handler</span><span class="token punctuation">></span></span> </code></pre></div><h3 id="通用属性"><a href="#通用属性" class="header-anchor">#</a> 通用属性</h3> <div class="table-wrp"><table><thead><tr><th>属性</th> <th>类型</th> <th>默认值</th> <th>必填</th> <th>说明</th></tr></thead> <tbody><tr><td>tag</td> <td><code>string</code></td> <td>无</td> <td>否</td> <td>声明手势协商时的组件标识</td></tr> <tr><td>worklet:ongesture</td> <td><code>eventhandler</code></td> <td>无</td> <td>否</td> <td>手势处理回调</td></tr> <tr><td>worklet:should-response-on-move</td> <td><code>callback</code></td> <td>无</td> <td>否</td> <td>手指移动过程中手势是否响应</td></tr> <tr><td>worklet:should-accept-gesture</td> <td><code>callback</code></td> <td>无</td> <td>否</td> <td>手势是否应该被识别</td></tr> <tr><td>simultaneous-handlers</td> <td><code>Array<string></code></td> <td><code>[]</code></td> <td>否</td> <td>声明可同时触发的手势节点</td></tr> <tr><td>native-view</td> <td><code>string</code></td> <td>无</td> <td>否</td> <td>代理的原生节点类型</td></tr></tbody></table></div><p><code>native-view</code> 支持的枚举值有 <code>scroll-view</code> 和 <code>swiper</code>。滚动容器纵向滚动时，使用 <code><vertical-drag-gesture-handler></code> 手势组件代理内部手势，横向滚动时，则使用 <code><horizontal-drag-gesture-handler></code>。</p> <ul><li><code>eventhandler</code> 类型是事件回调，无返回值</li> <li><code>callback</code> 类型是开发者注册到组件的回调函数，会在适当时机被执行以读取返回值</li> <li>所有的回调都只能传入一个 worklet 回调</li></ul> <h3 id="事件回调参数"><a href="#事件回调参数" class="header-anchor">#</a> 事件回调参数</h3> <h4 id="worklet-should-response-on-move"><a href="#worklet-should-response-on-move" class="header-anchor">#</a> <code>worklet:should-response-on-move</code></h4> <p>返回的参数 <code>pointerEvent</code> 各字段如下。每次触摸移动时进行回调，返回 <code>false</code> 时，则对应的手势组件无法收到该次 <code>move</code> 事件。</p> <div class="table-wrp"><table><thead><tr><th>属性</th> <th>类型</th> <th>说明</th></tr></thead> <tbody><tr><td>identifier</td> <td>number</td> <td>Touch 对象的唯一标识符</td></tr> <tr><td>type</td> <td>string</td> <td>事件类型</td></tr> <tr><td>deltaX</td> <td>number</td> <td>相对上一次，X 轴方向移动的坐标</td></tr> <tr><td>deltaY</td> <td>number</td> <td>相对上一次，Y 轴方向移动的坐标</td></tr> <tr><td>clientX</td> <td>number</td> <td>触点相对于可见视区左边缘的 X 坐标</td></tr> <tr><td>clientY</td> <td>number</td> <td>触点相对于可见视区上边缘的 Y 坐标</td></tr> <tr><td>radiusX</td> <td>number</td> <td>返回能够包围接触区域的最小椭圆的水平轴 (X 轴) 半径</td></tr> <tr><td>radiusY</td> <td>number</td> <td>返回能够包围接触区域的最小椭圆的垂直轴 (Y 轴) 半径</td></tr> <tr><td>rotationAngle</td> <td>number</td> <td>返回一个角度值，表示上述由radiusX 和 radiusY 描述的椭圆为了尽可能精确地覆盖用户与平面之间的接触区域而需要顺时针旋转的角度</td></tr> <tr><td>force</td> <td>number</td> <td>用户对触摸平面的压力大小</td></tr> <tr><td>timeStamp</td> <td>number</td> <td>事件触发的时间戳</td></tr></tbody></table></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token function">shouldResponseOnMove</span><span class="token punctuation">(</span><span class="token parameter">pointerEvent</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token string">'worklet'</span> <span class="token keyword">return</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><h4 id="worklet-should-accept-gesture"><a href="#worklet-should-accept-gesture" class="header-anchor">#</a> <code>worklet:should-accept-gesture</code></h4> <p>用法如下，框架手势识别生效时进行回调，由开发者决定手势是否生效。以 <code>Pan</code> 手势为例。</p> <p>手指触摸屏幕时进入 <code>State.Possible</code> 状态，<code>shouldAcceptGesture</code> 返回 <code>false</code> 后进入 <code>State.CANCELLED</code> 状态，返回 <code>true</code> 后进入 <code>State.Begin</code> 状态，可继续接收手续 <code>move</code> 事件。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token function">shouldAcceptGesture</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token string">'worklet'</span> <span class="token keyword">return</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre></div><h4 id="worklet-ongesture"><a href="#worklet-ongesture" class="header-anchor">#</a> <code>worklet:ongesture</code></h4> <p>不同类型手势组件返回的参数如下</p> <h4 id="tap-double-tap"><a href="#tap-double-tap" class="header-anchor">#</a> tap / double-tap</h4> <div class="table-wrp"><table><thead><tr><th>属性</th> <th>类型</th> <th>说明</th></tr></thead> <tbody><tr><td>state</td> <td>number</td> <td>手势状态</td></tr> <tr><td>absoluteX</td> <td>number</td> <td>相对于全局的 X 坐标</td></tr> <tr><td>absoluteY</td> <td>number</td> <td>相对于全局的 Y 坐标</td></tr></tbody></table></div><h4 id="pan-vertical-drag-horizontal-drag"><a href="#pan-vertical-drag-horizontal-drag" class="header-anchor">#</a> pan / vertical-drag / horizontal-drag</h4> <div class="table-wrp"><table><thead><tr><th>属性</th> <th>类型</th> <th>说明</th></tr></thead> <tbody><tr><td>state</td> <td>number</td> <td>手势状态</td></tr> <tr><td>absoluteX</td> <td>number</td> <td>相对于全局的 X 坐标</td></tr> <tr><td>absoluteY</td> <td>number</td> <td>相对于全局的 Y 坐标</td></tr> <tr><td>deltaX</td> <td>number</td> <td>相对上一次，X 轴方向移动的坐标</td></tr> <tr><td>deltaY</td> <td>number</td> <td>相对上一次，Y 轴方向移动的坐标</td></tr> <tr><td>velocityX</td> <td>number</td> <td>手指离开屏幕时的横向速度（pixel per second)</td></tr> <tr><td>velocityY</td> <td>number</td> <td>手指离开屏幕时的纵向速度（pixel per second)</td></tr></tbody></table></div><h4 id="scale"><a href="#scale" class="header-anchor">#</a> scale</h4> <div class="table-wrp"><table><thead><tr><th>属性</th> <th>类型</th> <th>说明</th></tr></thead> <tbody><tr><td>state</td> <td>number</td> <td>手势状态</td></tr> <tr><td>focalX</td> <td>number</td> <td>中心点相对于全局的 X 坐标</td></tr> <tr><td>focalY</td> <td>number</td> <td>中心点相对于全局的 Y 坐标</td></tr> <tr><td>focalDeltaX</td> <td>number</td> <td>相对上一次，中心点在 X 轴方向移动的坐标</td></tr> <tr><td>focalDeltaY</td> <td>number</td> <td>相对上一次，中心点在 Y 轴方向移动的坐标</td></tr> <tr><td>scale</td> <td>number</td> <td>放大或缩小的比例</td></tr> <tr><td>horizontalScale</td> <td>number</td> <td><code>scale</code> 的横向分量</td></tr> <tr><td>verticalScale</td> <td>number</td> <td><code>scale</code> 的纵向分量</td></tr> <tr><td>rotation</td> <td>number</td> <td>旋转角（单位：弧度）</td></tr> <tr><td>velocityX</td> <td>number</td> <td>手指离开屏幕时的横向速度（pixel per second)</td></tr> <tr><td>velocityY</td> <td>number</td> <td>手指离开屏幕时的纵向速度（pixel per second)</td></tr> <tr><td>pointerCount</td> <td>number</td> <td>跟踪的手指数</td></tr></tbody></table></div><ul><li>多指滑动时，<code>focalX</code> 和 <code>focalY</code> 为多个触摸点中心焦点的坐标</li> <li>单指滑动时，<code>pointerCount = 1</code>，此时效果同 <code>pan-gesture-handler</code>，<code>scale</code> 手势是 <code>pan</code> 的超集。</li></ul> <h4 id="long-press"><a href="#long-press" class="header-anchor">#</a> long-press</h4> <div class="table-wrp"><table><thead><tr><th>属性</th> <th>类型</th> <th>说明</th></tr></thead> <tbody><tr><td>state</td> <td>number</td> <td>手势状态</td></tr> <tr><td>absoluteX</td> <td>number</td> <td>相对于全局的 X 坐标</td></tr> <tr><td>absoluteY</td> <td>number</td> <td>相对于全局的 Y 坐标</td></tr> <tr><td>translationX</td> <td>number</td> <td>相对于初始触摸点的 X 轴偏移量</td></tr> <tr><td>translationY</td> <td>number</td> <td>相对于初始触摸点的 Y 轴偏移量</td></tr> <tr><td>velocityX</td> <td>number</td> <td>手指离开屏幕时的横向速度（pixel per second)</td></tr> <tr><td>velocityY</td> <td>number</td> <td>手指离开屏幕时的纵向速度（pixel per second)</td></tr></tbody></table></div><h4 id="force-press"><a href="#force-press" class="header-anchor">#</a> force-press</h4> <div class="table-wrp"><table><thead><tr><th>属性</th> <th>类型</th> <th>说明</th></tr></thead> <tbody><tr><td>state</td> <td>number</td> <td>手势状态</td></tr> <tr><td>absoluteX</td> <td>number</td> <td>相对于全局的 X 坐标</td></tr> <tr><td>absoluteY</td> <td>number</td> <td>相对于全局的 Y 坐标</td></tr> <tr><td>pressure</td> <td>number</td> <td>压力大小</td></tr></tbody></table></div><h3 id="手势状态"><a href="#手势状态" class="header-anchor">#</a> 手势状态</h3> <p>所有手势 <code>worklet:ongesture</code> 回调均会返回一个 <code>state</code> 状态字段。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">enum</span> State <span class="token punctuation">{</span> <span class="token comment">// 手势未识别</span> <span class="token constant">POSSIBLE</span> <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 手势已识别</span> <span class="token constant">BEGIN</span> <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// 连续手势活跃状态</span> <span class="token constant">ACTIVE</span> <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// 手势终止</span> <span class="token constant">END</span> <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token comment">// 手势取消</span> <span class="token constant">CANCELLED</span> <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> </code></pre></div><p>我们将手势分为如下两种类型：</p> <ol><li>离散手势：<code>tap</code> 和 <code>double-tap</code>，仅触发一次</li> <li>连续手势：其它类型的手势组件，随手指拖动会触发多次</li></ol> <p><code>tap-gesture-handler</code> 手势组件返回的 <code>state</code> 始终为 1。</p> <p><code>pan-gesture-handler</code> 手势组件在一个完整的拖动过程中，<code>state</code> 会按如下方式改变</p> <ol><li>手指刚接触屏幕时，<code>state = 0</code></li> <li>移动一小段距离，<code>pan</code> 手势判定生效时，<code>state = 1</code></li> <li>继续移动，<code>state = 2</code></li> <li>手指离开屏幕 <code>state = 3</code></li></ol> <p>由于嵌套的手势会产生冲突（仅有一个最终判定识别生效），因此连续手势 <code>state</code> 的变化可能有如下一些情景，开发者需要根据 <code>state</code> 值来处理一些异常情况。</p> <ol><li><code>POSSIBLE -> BEGIN -> ACTIVE -> END</code> 正常流程</li> <li><code>POSSIBLE -> BEGIN -> ACTIVE -> CANCELLED</code> 提前中断</li> <li><code>POSSIBLE -> CANCELLED</code> 手势未识别</li></ol> <p>并不是所有的连续手势均有 <code>POSSIBLE</code> 状态，如 <code>scale-gesture-handler</code> 手势组件，当双指触摸后松手，<code>state</code> 变化如下：</p> <ol><li>双指触摸屏幕，<code>state = 1, pointerCount = 2</code></li> <li>双指放大操作，<code>state = 2, pointerCount = 2</code></li> <li>双指离开屏幕，<code>state = 3, pointerCount = 1</code>，之后会相继回调 a. <code>state = 1, pointerCount = 1</code> b. <code>state = 2, pointerCount = 1</code> c. <code>state = 3, pointerCount = 0</code></li></ol> <h3 id="注意事项"><a href="#注意事项" class="header-anchor">#</a> 注意事项</h3> <ul><li>手势组件仅在 <code>Skyline</code> 渲染模式下才能使用</li> <li>手势组件为虚组件，不会进行布局，手势组件上设置 <code>style</code>、<code>class</code> 是无效的</li> <li>手势组件仅能含有一个直接子节点，否则不生效</li> <li>手势组件的父组件样式会直接影响其子节点</li> <li>手势组件的回调函数均需声明为 <a href="./worklet.html"><code>worklet</code></a> 函数</li> <li>手势不同于普通 <code>touch</code> 事件，不会进行冒泡</li> <li>手势组件的 <code>eventhandler / callback</code> 均需声明为 <code>worklet</code> 函数，回调在 <code>UI</code> 线程触发</li></ul> <h2 id="使用方法"><a href="#使用方法" class="header-anchor">#</a> 使用方法</h2> <h3 id="示例代码"><a href="#示例代码" class="header-anchor">#</a> 示例代码</h3> <p><a href="https://developers.weixin.qq.com/s/Fu8MaymS7HM3" target="_blank" rel="noopener noreferrer">在开发者工具中预览效果<span></span></a></p> <h3 id="Chaining-API-init-函数示例代码"><a href="#Chaining-API-init-函数示例代码" class="header-anchor">#</a> Chaining API init 函数示例代码</h3> <p><a href="https://developers.weixin.qq.com/s/d9ChR5mt77St" target="_blank" rel="noopener noreferrer">在开发者工具中预览效果<span></span></a></p> <h3 id="示例一：监听拖动手势"><a href="#示例一：监听拖动手势" class="header-anchor">#</a> 示例一：监听拖动手势</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pan-gesture-handler</span> <span class="token attr-name">on-gesture-event</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>handlePan<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pan-gesture-handler</span><span class="token punctuation">></span></span> </code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token function">handlePan</span><span class="token punctuation">(</span><span class="token parameter">evt</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token string">"worklet"</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>evt<span class="token punctuation">.</span>translateX<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h3 id="示例二：监听嵌套的手势"><a href="#示例二：监听嵌套的手势" class="header-anchor">#</a> 示例二：监听嵌套的手势</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>horizontal-drag-gesture-handler</span> <span class="token attr-name">on-gesture-event</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>handleHorizontalDrag<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vertical-drag-gesture-handler</span> <span class="token attr-name">on-gesture-event</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>handleVerticalDrag<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>one-way drag<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>vertical-drag-gesture-handler</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>horizontal-drag-gesture-handler</span><span class="token punctuation">></span></span> </code></pre></div><h3 id="示例三：代理原生组件内部手势"><a href="#示例三：代理原生组件内部手势" class="header-anchor">#</a> 示例三：代理原生组件内部手势</h3> <p>对于 <code><scroll-view></code> 和 <code><swiper></code> 这样的滚动容器，内部也是基于手势来处理滚动操作的。相比于 <code>web</code>，<code>skyline</code> 提供了更底层的访问机制，使得在做一些复杂交互时，可以做到更细粒度、分阶段的控制。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vertical-drag-gesture-handler</span> <span class="token attr-name">native-view</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scroll-view<span class="token punctuation">"</span></span> <span class="token attr-name">should-response-on-move</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shouldScrollViewResponse<span class="token punctuation">"</span></span> <span class="token attr-name">should-accept-gesture</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shouldScrollViewAccept<span class="token punctuation">"</span></span> <span class="token attr-name">on-gesture-event</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>handleGesture<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>scroll-view</span> <span class="token attr-name">scroll-y</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span> <span class="token attr-name">adjust-deceleration-velocity</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>adjustDecelerationVelocity<span class="token punctuation">"</span></span> <span class="token attr-name">bindscroll</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>handleScroll<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{list}}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>avatar<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comment<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>scroll-view</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>vertical-drag-gesture-handler</span><span class="token punctuation">></span></span> </code></pre></div><p>以纵向滚动的 <code><scroll-view></code> 为例，可使用 <code><vertical-drag-gesture-handler></code> 手势组件，并声明 <code>native-view="scroll-view"</code> 来代理其内部手势。</p> <h4 id="滚动事件"><a href="#滚动事件" class="header-anchor">#</a> 滚动事件</h4> <p>当滚动列表时，手势组件的事件回调和 <code><scroll-view></code> 的 <code>scroll</code> 事件回调均会触发，它们的区别在于：</p> <ol><li><code>scroll</code> 事件仅在滚动时触发，当触顶/底后，不再回调</li> <li><code>on-gesture-event</code> 手势回调当手指在屏幕上滑动时会一直触发，直到松手</li></ol> <h4 id="手势控制"><a href="#手势控制" class="header-anchor">#</a> 手势控制</h4> <p>在前面介绍连续手势状态时，我们知道手势有自身的识别过程。例如 <code>vertical-drag</code> 手势，当手指触摸时为 <code>POSSIBLE</code> 状态，移动一小段距离后才识别为 <code>BEGIN</code> 状态，此时称手势被识别（<code>ACCEPT</code>)。</p> <h5 id="_1-手势识别"><a href="#_1-手势识别" class="header-anchor">#</a> 1. 手势识别</h5> <p><code>should-accept-gesture</code> 属性允许开发者注册一个 <code>callback</code>，并返回一个布尔值，参与到<strong>手势识别</strong>的过程。当返回 <code>false</code> 时，本次触摸手势不再生效，相关联的 <code><scroll-view></code> 组件也无法滚动。</p> <h5 id="_2-事件派发"><a href="#_2-事件派发" class="header-anchor">#</a> 2. 事件派发</h5> <p><code>should-response-on-move</code> 属性允许开发者注册一个 <code>callback</code>，并返回一个布尔值，参与到<strong>事件派发</strong>的过程。当返回 <code>false</code> 时，当次 <code>move</code> 的事件不再派发，相关联的 <code><scroll-view></code> 不继续滚动。该回调在手指移动过程中会持续触发，可随时改变，进而控制滚动容器继续/暂停滚动。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">// 这里返回 false，则 scroll-view 无法滚动</span> <span class="token comment">// should-accept-gesture 会在手势识别的一开始触发一次</span> <span class="token comment">// should-response-on-move 是在 move 过程中不断触发</span> <span class="token function">shouldScrollViewAccept</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token string">'worklet'</span> <span class="token keyword">return</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 这里返回 false，则 scroll-view 无法滚动</span> <span class="token function">shouldScrollViewResponse</span><span class="token punctuation">(</span><span class="token parameter">pointerEvent</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token string">'worklet'</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 手指滑动离开滚动组件时，指定衰减速度</span> <span class="token function">adjustDecelerationVelocity</span><span class="token punctuation">(</span><span class="token parameter">velocity</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token string">'worklet'</span><span class="token punctuation">;</span> <span class="token keyword">return</span> velocity<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// scroll-view 滚动到边界后，手指滑动，scroll 事件不再触发</span> <span class="token function">handleScroll</span><span class="token punctuation">(</span><span class="token parameter">evt</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token string">'worklet'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// scroll-view 滚动到边界后，手指滑动，手势回调仍然会触发</span> <span class="token function">handleGesture</span><span class="token punctuation">(</span><span class="token parameter">evt</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token string">'worklet'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h3 id="示例四：手势协商"><a href="#示例四：手势协商" class="header-anchor">#</a> 示例四：手势协商</h3> <p>一些场景下，我们会遇到<strong>手势冲突</strong>。如下代码所示，存在嵌套的 <code><vertical-drag-gesture-handler></code> 组件，我们希望 <code>outer</code> 手势组件来处理纵向的拖动，<code>inner</code> 手势组件处理列表的滚动，但实际仅 <code>inner</code> 的手势回调会触发。</p> <p><strong>嵌套的同类型手势组件，当内层的手势识别后，外层的手势组件将不会被识别。</strong></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vertical-drag-gesture-handler</span> <span class="token attr-name">tag</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>outer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vertical-drag-gesture-handler</span> <span class="token attr-name">tag</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inner<span class="token punctuation">"</span></span> <span class="token attr-name">native-view</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scroll-view<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>scroll-view</span> <span class="token attr-name">scroll-y</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>scroll-view</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>vertical-drag-gesture-handler</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>vertical-drag-gesture-handler</span><span class="token punctuation">></span></span> </code></pre></div><p>但上述场景又是很常见的，例如视频号的评论列表，列表的滚动和整个评论区的拖动衔接的十分流畅。手势协商机制用于解决该类问题，使用上也十分简单，<code>simultaneous-handlers</code> 属性声明多个手势可同时触发。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vertical-drag-gesture-handler</span> <span class="token attr-name">tag</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>outer<span class="token punctuation">"</span></span> <span class="token attr-name">simultaneous-handlers</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{[<span class="token punctuation">"</span></span><span class="token attr-name">inner"]}}"</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vertical-drag-gesture-handler</span> <span class="token attr-name">tag</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inner<span class="token punctuation">"</span></span> <span class="token attr-name">simultaneous-handlers</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{[<span class="token punctuation">"</span></span><span class="token attr-name">outer"]}}"</span> <span class="token attr-name">native-view</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scroll-view<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>scroll-view</span> <span class="token attr-name">scroll-y</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>scroll-view</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>vertical-drag-gesture-handler</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>vertical-drag-gesture-handler</span><span class="token punctuation">></span></span> </code></pre></div><p>此时，<code>outer</code> 和 <code>inner</code> 手势组件的 <code>on-gesture-event</code> 回调会依次触发，结合上面提到的<strong>手势控制</strong>原理，可以实现预期的效果。完整代码参考<a href="https://developers.weixin.qq.com/s/uZ8sCymt7LME" target="_blank" rel="noopener noreferrer">示例 demo<span></span></a>。</p></div> <div class="fixed-translate" style="display:none;"><span>The translations are provided by WeChat Translation and are for reference only. In case of any inconsistency and discrepancy between the Chinese version and the English version, the Chinese version shall prevail.Incorrect translation. <a href="javascript:;" class="fixed-translate-btn">Tap to report.</a></span></div></div>  <div class="related"> </div> <footer class="page-edit"></footer> <footer class="footer"><ul class="footer-links"><li class="footer-link"><a href="http://www.tencent.com/zh-cn/index.shtml" target="_blank">关于腾讯</a></li> <li class="footer-link"><a href="https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=1484641676" target="_blank">文档中心</a></li> <li class="footer-link"><a href="https://kf.qq.com/faq/17030722muuu170307MFBny2.html" target="_blank">辟谣中心</a></li> <li class="footer-link"><a href="http://kf.qq.com/faq/120911VrYVrA1509086vyumm.html" target="_blank">客服中心</a></li></ul> <p class="copyright">Copyright © 2012-<span>2025</span> Tencent. All Rights Reserved.</p></footer></div></main></div> </div></div> <div id="popoverWrapId" class="pop-links__wrp popover_hide"><ul class="pop-links__list"><li class="pop-links__item"><button class="pop-link">复制</button></li> <li class="pop-links__item"><button class="pop-link">问题反馈</button></li></ul></div> <div class="fixed-btns"><a href="javascript:;" class="fixed-btn fixed-btn__feedback"><div class="fixed-btn__inner"><span class="fixed-btn__icon"></span> <span class="fixed-btn__text">反馈</span></div></a> <a href="javascript:;" class="fixed-btn fixed-btn__top" style="display:none;"><div class="fixed-btn__inner"><span class="fixed-btn__icon"></span></div></a></div></div></div></div> <script src="https://res.wx.qq.com/wxdoc/dist/assets/js/app.f9e00986.js" defer></script><script src="https://res.wx.qq.com/wxdoc/dist/assets/js/163.c2cbabc7.js" defer></script> </body> </html>