1. 需要去 Lark Admin 修改应用可用范围（默认只有本人可用），其他人才能搜索到应用

<h1 class="group flex justify-start items-center">在 飞书 上开发一个 App<a name="在-飞书-上开发一个-app" aria-label="Anchor" id="在-飞书-上开发一个-app" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#在-飞书-上开发一个-app">#</a></h1><blockquote>
本文主要的目的是记录一下在 飞书 上开发一个 App（bot 被激活后展示一个表单，用户填写后提交内容到后端） 的过程，以及遇到的一些问题和解决方案。
</blockquote>
<h2 class="group flex justify-start items-center">核心需求简述<a name="核心需求简述" aria-label="Anchor" id="核心需求简述" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#核心需求简述">#</a></h2>内部用户 可以利用 飞书 App 将数据轻松的从 聊天工具 发送到 自有平台。
<h2 class="group flex justify-start items-center">飞书 App 是什么，能做什么<a name="飞书-app-是什么，能做什么" aria-label="Anchor" id="飞书-app-是什么，能做什么" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#飞书-app-是什么，能做什么">#</a></h2><blockquote>
<a href="https://open.feishu.cn/document/home/app-types-introduction/overview">https://open.feishu.cn/document/home/app-types-introduction/overview</a>
</blockquote>
应用是开发者向内部或外部用户提供服务的载体，也是开发者调用飞书所提供的开放能力的载体。
根据 应用的上架方式，应用可分为以下两种类型：
<ul>
<li>企业自建应用：由企业内部人员或企业授权的开发人员进行开发，只能在同一企业内发布和使用。</li>
<li>应用商店应用：由第三方服务商开发，在飞书应用目录发布，所有飞书租户均可安装和使用。</li>
</ul>
根据应用的能力形态，飞书应用主要可分为 机器人、网页、小程序、小组件四类。我们常看到的 飞书工作台 中一系列应用均为小程序、网页应用、小组件。
<h2 class="group flex justify-start items-center">Lark 应用的入口<a name="lark-应用的入口" aria-label="Anchor" id="lark-应用的入口" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#lark-应用的入口">#</a></h2><a href="https://open.feishu.cn/document/client-docs/extensions/%E2%80%9C+%E2%80%9D-menu-shortcut">https://open.feishu.cn/document/client-docs/extensions/%E2%80%9C+%E2%80%9D-menu-shortcut</a>
主要有 3 个打开应用的入口：
<ol>
<li>搜索结果快捷入口</li>
<li>聊天框“+”菜单</li>
<li>消息快捷操作</li>
</ol>
<h2 class="group flex justify-start items-center">选择合适的应用类型和形式<a name="选择合适的应用类型和形式" aria-label="Anchor" id="选择合适的应用类型和形式" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#选择合适的应用类型和形式">#</a></h2>由于核心需求是对内部用户，所以只需要选择 企业自建应用 即可。
配合 聊天框“+”菜单，可以直接在聊天界面打开应用进行表单填写。
聊天框“+”菜单 参看 <a href="https://open.feishu.cn/document/client-docs/extensions/%E2%80%9C+%E2%80%9D-menu-shortcut">https://open.feishu.cn/document/client-docs/extensions/%E2%80%9C+%E2%80%9D-menu-shortcut</a>
目前， 小程序应用、网页应用 均可开启聊天框“+”菜单（网页应用从 3.39 版本开始支持）
考虑到多平台一致性和开发成本，选择 网页应用 作为载体。
<h2 class="group flex justify-start items-center">lark 网页应用的开发流程<a name="lark-网页应用的开发流程" aria-label="Anchor" id="lark-网页应用的开发流程" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#lark-网页应用的开发流程">#</a></h2><a href="https://open.larksuite.com/document/home/integrating-web-apps-in-5-minutes/configuration-of-sso">https://open.larksuite.com/document/home/integrating-web-apps-in-5-minutes/configuration-of-sso</a>
<img src="https://images.yrobot.top/2023-08-17/CGMTi9-17-30-27.png" alt="CGMTi9-17-30-27">
大致流程如下：
<ol>
<li>前往管理后台创建应用</li>
<li>开发者本地启动网页应用（内网环境访问）</li>
<li>管理后台配置网页应用的本地地址（如 <a href="http://127.0.0.1:3000%EF%BC%89">http://127.0.0.1:3000）</a></li>
<li>发布版本</li>
<li>在 lark 客户端打开 网页应用 测试体验</li>
</ol>
<h2 class="group flex justify-start items-center">注意点<a name="注意点" aria-label="Anchor" id="注意点" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#注意点">#</a></h2><h3 class="group flex justify-start items-center">1. 需要去 Lark Admin 修改应用可用范围（默认只有本人可用），其他人才能搜索到应用<a name="1.-需要去-lark-admin-修改应用可用范围（默认只有本人可用），其他人才能搜索到应用" aria-label="Anchor" id="1.-需要去-lark-admin-修改应用可用范围（默认只有本人可用），其他人才能搜索到应用" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#1.-需要去-lark-admin-修改应用可用范围（默认只有本人可用），其他人才能搜索到应用">#</a></h3><img src="https://images.yrobot.top/2023-08-17/4NlbwR-17-34-14.png" alt="4NlbwR-17-34-14">
<h2 class="group flex justify-start items-center">bot 主要逻辑链路<a name="bot-主要逻辑链路" aria-label="Anchor" id="bot-主要逻辑链路" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#bot-主要逻辑链路">#</a></h2><img src="https://images.yrobot.top/2023-08-15/7XdaqE-11-07-15.png" alt="7XdaqE-11-07-15">

在飞书上开发一个App

函数后续参数类型依据前面参数类型进行推断

Enum 枚举类型属性支持直接传入字符串

<h2 class="group flex justify-start items-center">函数后续参数类型依据前面参数类型进行推断<a name="函数后续参数类型依据前面参数类型进行推断" aria-label="Anchor" id="函数后续参数类型依据前面参数类型进行推断" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#函数后续参数类型依据前面参数类型进行推断">#</a></h2>比如埋点函数，LOGIN 和 PAGE_VIEW 事件的参数结构不同，要怎么实现 类型和参数结构一一对应。
<h3 class="group flex justify-start items-center">问题展示<a name="问题展示" aria-label="Anchor" id="问题展示" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#问题展示">#</a></h3><pre><code class="language-ts">enum EventType {
 LOGIN = &quot;LOGIN&quot;,
 PAGE_VIEW = &quot;PAGE_VIEW&quot;,
}
type LOGIN_PARAMS = { userId: string };
type PAGE_VIEW_PARAMS = { pageId: string };
function track(eventType: EventType, params: LOGIN_PARAMS | PAGE_VIEW_PARAMS) {
 // logic inside
}
</code></pre>
这种实现方式，虽然可以实现，但是调用的时候，ts 无法根据 eventType 推断出 params 的类型，需要手动传入，这样就会导致调用的时候，传入的参数类型和 eventType 不匹配的问题。
<h3 class="group flex justify-start items-center">解决方案: 函数重载<a name="解决方案:-函数重载" aria-label="Anchor" id="解决方案:-函数重载" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#解决方案:-函数重载">#</a></h3><pre><code class="language-ts">enum EventType {
 LOGIN = &quot;LOGIN&quot;,
 PAGE_VIEW = &quot;PAGE_VIEW&quot;,
}
type LOGIN_PARAMS = { userId: string };
type PAGE_VIEW_PARAMS = { pageId: string };
function track(eventType: EventType.LOGIN, params: LOGIN_PARAMS): void;
function track(eventType: EventType.PAGE_VIEW, params: PAGE_VIEW_PARAMS): void;
function track(eventType: string, params: LOGIN_PARAMS | PAGE_VIEW_PARAMS) {
 // logic inside
}
</code></pre>
这样调用的时候，ts 就可以根据 eventType 推断出 params 的类型了。
<h2 class="group flex justify-start items-center">Enum 枚举类型属性支持直接传入字符串<a name="enum-枚举类型属性支持直接传入字符串" aria-label="Anchor" id="enum-枚举类型属性支持直接传入字符串" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#enum-枚举类型属性支持直接传入字符串">#</a></h2><h3 class="group flex justify-start items-center">问题展示<a name="问题展示" aria-label="Anchor" id="问题展示" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#问题展示">#</a></h3>不能将类型“&quot;button&quot;”分配给类型“Type”。ts(2322)
<pre><code class="language-tsx">// Component.tsx
enum Type {
 Button = &quot;button&quot;,
 Input = &quot;input&quot;,
}

export default function Component({ type }: { type: Type }) {
 return &lt;div&gt;{type}&lt;/div&gt;;
}

// App.tsx
import Component from &quot;./Component&quot;;

export default function App() {
 return (
 &lt;div&gt;
 {/* 此时 ts 会报错，因为 type 期望的是 Type 枚举类型，不支持直接传入字符串 */}
 &lt;Component type=&quot;button&quot; /&gt;
 &lt;/div&gt;
 );
}
</code></pre>
<h3 class="group flex justify-start items-center">解决方案<a name="解决方案" aria-label="Anchor" id="解决方案" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#解决方案">#</a></h3><pre><code class="language-tsx">// Component.tsx
enum Type {
 Button = &quot;button&quot;,
 Input = &quot;input&quot;,
}

export default function Component({ type }: { type: `${Type}` }) {
 return &lt;div&gt;{type}&lt;/div&gt;;
}
</code></pre>
这样 Component 的 type 属性就是一个支持 字符串 枚举的类型了，type=&#39;button&#39; 即可。

TS开发技巧

Server Component 和 Client Component 的区别

实际上组件作为 server/client component 处理 和 jsx 渲染的结构（组件树结构）无关，而是和 import 相关联

所以可以将一些 client 逻辑独立出来做一个 Wrapper 组件，来最大化 server component 的好处

Server Component 列表页 下滑加载更多

NOTE: 阅读此文前需要有一定的 Next.js 使用经验，对旧版本的 Next.js 有一定了解。
<h2 class="group flex justify-start items-center">Next.js 13.4 更新了什么特性<a name="next.js-13.4-更新了什么特性" aria-label="Anchor" id="next.js-13.4-更新了什么特性" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#next.js-13.4-更新了什么特性">#</a></h2><a href="https://nextjs.org/blog/next-13-4">https://nextjs.org/blog/next-13-4</a>
主要更新了 3 大特性：
<ol>
<li>App router<ul>
<li>React Server Components</li>
<li>Nested Routes &amp; Layouts</li>
<li>Simplified Data Fetching</li>
<li>Streaming &amp; Suspense</li>
<li>Built-in SEO Support</li>
</ul>
</li>
<li>Turbopack</li>
<li>Server Actions</li>
</ol>
<h3 class="group flex justify-start items-center">App Router<a name="app-router" aria-label="Anchor" id="app-router" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#app-router">#</a></h3><h4 class="group flex justify-start items-center">React Server Components<a name="react-server-components" aria-label="Anchor" id="react-server-components" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#react-server-components">#</a></h4>旧的 pages router 实现：
<pre><code class="language-ts">// Pages Router
// pages/index.ts
import React from &quot;react&quot;;
export default () =&gt; &lt;h1&gt;Hello, Next.js!&lt;/h1&gt;;
</code></pre>
新的 App Router 实现：
<pre><code class="language-ts">// New: App Router ✨
// app/page.ts
export default async function Page() {
 return &lt;h1&gt;Hello, Next.js!&lt;/h1&gt;;
}
</code></pre>
主要的更新点如下：
<ol>
<li>当前路由的页面文件名由 <code>xxx/index.ts</code> 变为了 <code>xxx/page.ts</code></li>
<li>组件支持 async 函数，可以直接在组件内部进行异步操作（因为 app router 的组件默认是 server component，他只运行在 server 的 node 环境中）</li>
</ol>
<h5 class="group flex justify-start items-center">Server Component 和 Client Component 的区别<a name="server-component-和-client-component-的区别" aria-label="Anchor" id="server-component-和-client-component-的区别" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#server-component-和-client-component-的区别">#</a></h5><a href="https://nextjs.org/docs/getting-started/react-essentials"><img src="https://images.yrobot.top/2023-08-19/EVDtVM-20-25-08.png" alt="EVDtVM-20-25-08"></a>
<h5 class="group flex justify-start items-center">Server Component 的好处和限制<a name="server-component-的好处和限制" aria-label="Anchor" id="server-component-的好处和限制" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#server-component-的好处和限制">#</a></h5>好处：
<ul>
<li>异步依赖可以直接在组件内部直接使用 await 请求，代码逻辑更清晰</li>
<li>数据直接嵌入 html 中，无需再次请求（接口安全和数据精简）</li>
<li>请求直接在 server 端完成，页面初始化时间更短（减少了一次 server-client 的请求时间和 react 初始化时间）（可以使用 Suspense(xxx/loading.ts) 来优化页面加载体验）</li>
<li>server component 的 大依赖只在 server 端引入，不会打包到 js 里，减少了客户端下载压力</li>
</ul>
<h3 class="group flex justify-start items-center">实际上组件作为 server/client component 处理 和 jsx 渲染的结构（组件树结构）无关，而是和 import 相关联<a name="实际上组件作为-server/client-component-处理-和-jsx-渲染的结构（组件树结构）无关，而是和-import-相关联" aria-label="Anchor" id="实际上组件作为-server/client-component-处理-和-jsx-渲染的结构（组件树结构）无关，而是和-import-相关联" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#实际上组件作为-server/client-component-处理-和-jsx-渲染的结构（组件树结构）无关，而是和-import-相关联">#</a></h3>所以 client component 中不要直接 <code>import</code> server component，而是在 client 上层通过 props 传入 子 server component 的实例。
<pre><code class="language-tsx">// app/layout.tsx
import &quot;./globals.css&quot;;
import ThemeContextProvider from &quot;./ThemeContext&quot;; // client component

export default function RootLayout({
 children,
}: {
 children: React.ReactNode;
}) {
 return (
 &lt;html lang=&quot;en&quot;&gt;
 &lt;body&gt;
 &lt;ThemeContextProvider&gt;{children}&lt;/ThemeContextProvider&gt;
 &lt;/body&gt;
 &lt;/html&gt;
 );
}
</code></pre>
<h4 class="group flex justify-start items-center">所以可以将一些 client 逻辑独立出来做一个 Wrapper 组件，来最大化 server component 的好处<a name="所以可以将一些-client-逻辑独立出来做一个-wrapper-组件，来最大化-server-component-的好处" aria-label="Anchor" id="所以可以将一些-client-逻辑独立出来做一个-wrapper-组件，来最大化-server-component-的好处" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#所以可以将一些-client-逻辑独立出来做一个-wrapper-组件，来最大化-server-component-的好处">#</a></h4><pre><code class="language-tsx">// ListPage.tsx

import { fetchList } from &quot;@/services&quot;;
import { DeleteItemWrapper } from &quot;@/clientActions&quot;; // client component

const ItemView = ({ item }) =&gt; {
 return (
 &lt;div&gt;
 // ...
 &lt;DeleteItemWrapper id={item.id}&gt;
 &lt;button&gt;Delete&lt;/button&gt; // 可能有一些复杂的format逻辑，放在server
 component里可以减少js包大小
 &lt;/DeleteItemWrapper&gt;
 // ...
 &lt;/div&gt;
 );
};

export default async function ListPage() {
 const list = await fetchList();
 return (
 &lt;main&gt;
 {list.map((item) =&gt; (
 &lt;ItemView item={item} /&gt;
 ))}
 &lt;/main&gt;
 );
}
</code></pre>
<h3 class="group flex justify-start items-center">Turbopack<a name="turbopack" aria-label="Anchor" id="turbopack" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#turbopack">#</a></h3><h3 class="group flex justify-start items-center">Server Actions<a name="server-actions" aria-label="Anchor" id="server-actions" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#server-actions">#</a></h3><h2 class="group flex justify-start items-center">一些开发场景和技巧<a name="一些开发场景和技巧" aria-label="Anchor" id="一些开发场景和技巧" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#一些开发场景和技巧">#</a></h2><h3 class="group flex justify-start items-center">Server Component 列表页 下滑加载更多<a name="server-component-列表页-下滑加载更多" aria-label="Anchor" id="server-component-列表页-下滑加载更多" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#server-component-列表页-下滑加载更多">#</a></h3><h4 class="group flex justify-start items-center">问题思考<a name="问题思考" aria-label="Anchor" id="问题思考" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#问题思考">#</a></h4><ol>
<li>为了最好的用户体验和 SEO，SSR 返回的 html 应该包含默认的 10 条数据</li>
<li>下滑加载更多需要用到 DOM 操作，所以需要在 使用 Client Component 实现</li>
</ol>
<h4 class="group flex justify-start items-center">方案设计<a name="方案设计" aria-label="Anchor" id="方案设计" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#方案设计">#</a></h4><ol>
<li>先在 server component 中初始化 10 条数据 作为 SSR 的数据</li>
<li>在 List 组件中使用 Client Component 实现下滑加载更多的逻辑</li>
</ol>
<h4 class="group flex justify-start items-center">实现<a name="实现" aria-label="Anchor" id="实现" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#实现">#</a></h4><pre><code class="language-tsx">// app/page.tsx
import List from &quot;./List&quot;;

const fetchList = async ({ offset }: { offset?: number } = {}) =&gt; {
 &quot;use server&quot;;
 const list = await db.list({ offset });
 return list;
};

export default async function Home() {
 const list = await fetchList(); // get 10 items as default data
 const total = await db.total(); // get total count
 return (
 &lt;main className=&quot;p-4&quot;&gt;
 &lt;List initialItems={list} fetch={fetchList} total={total} /&gt;
 &lt;/main&gt;
 );
}
</code></pre>
<pre><code class="language-tsx">// app/List.tsx
import React, { useState } from &quot;react&quot;;
import InfiniteScroll from &quot;react-infinite-scroller&quot;;

const PAGE_SIZE = 10;
export default function List({ initialItems, fetch }) {
 const [pages, setPages] = useState&lt;Product[][]&gt;([initialItems]);
 const items = pages.flat();
 return (
 &lt;InfiniteScroll
 loadMore={async (page: number) =&gt; {
 const data = await fetch({ offset: page * PAGE_SIZE });
 setPages((prev) =&gt; [...prev, data]);
 }}
 &gt;
 {items.map((product) =&gt; (
 &lt;ListCard key={product.id} {...product} /&gt;
 ))}
 &lt;/InfiniteScroll&gt;
 );
}
</code></pre>

在飞书上开发一个App

在飞书上开发一个 App#

核心需求简述#

飞书 App 是什么，能做什么#

Lark 应用的入口#

选择合适的应用类型和形式#

lark 网页应用的开发流程#

注意点#

1. 需要去 Lark Admin 修改应用可用范围（默认只有本人可用），其他人才能搜索到应用#

bot 主要逻辑链路#

在飞书上开发一个App

在 飞书 上开发一个 App#

核心需求简述#

飞书 App 是什么，能做什么#

Lark 应用的入口#

选择合适的应用类型和形式#

lark 网页应用的开发流程#

注意点#

1. 需要去 Lark Admin 修改应用可用范围（默认只有本人可用），其他人才能搜索到应用#

bot 主要逻辑链路#

在飞书上开发一个 App#