用 Builder.io 与 React 搭建可视化多页转化漏斗从零配置到源码级剖析【免费下载链接】builderVisual Development for React, Vue, Svelte, Qwik, and more项目地址: https://gitcode.com/GitHub_Trending/bu/builder本文基于仓库中的 react-multipage-funnel 示例 编写完整讲解如何使用 Builder.io 的视觉开发能力结合 React 与 React Router 构建一套「多页面转化漏斗」multipage funnel。你将掌握 Builder.io 空间Space的初始化、私有密钥与公开 API Key 的获取流程、CLI 导入 CMS 内容的方法以及BuilderContent/BuilderComponent在 React 中渲染漏斗各步骤的底层实现原理。什么是多页漏斗为什么用 Builder.io 来做转化漏斗Funnel是一系列按顺序引导用户完成目标注册、下单、填写信息等的页面组合。传统做法中每一页都写死在前端路由里营销团队想调整某一步的内容或新增一步都需要开发介入、重新发布。Builder.io 的思路是页面结构交给前端页面内容交给可视化编辑器。本示例把漏斗定义为一个名为multipage-funnel的 CMS 数据模型漏斗中的每一步section引用另一类模型funnel-section的已发布内容。于是业务人员可以在 Builder.io 后台直接编辑每一步的文案、图片、按钮前端只负责按路由把对应内容渲染出来并注入「下一步 / 上一步」的导航能力漏斗的步骤数量、顺序、标题全部由后台数据驱动前端代码无需改动。仓库中的示例工程位于 examples/react-multipage-funnel其核心依赖在 package.json 中可见builder.io/react、react-router-dom、react-scripts。快速开始两种运行方式在 CodeSandbox 中在线运行README 提供了直接在浏览器打开 CodeSandbox 示例 的入口无需本地环境即可查看效果。本地运行git clone https://github.com/BuilderIO/builder.git cd examples/react npm install npm start注意README 中的本地运行路径写作examples/react但实际工程位于仓库的examples/react-multipage-funnel目录。克隆仓库后请以实际目录为准即cd builder/examples/react-multipage-funnel后再执行npm install与npm start。前置条件本指南假设你已经安装Node.js示例使用react-scripts对应 Create React App 开发服务器npm 或 yarn工程锁定了package-lock.json见 examples/react-multipage-funnel/package-lock.jsongit完成后你将拥有一个已配置好、可直接使用的 Builder.io 多页漏斗空间Space。第一步注册 Builder.io 账号访问 builder.io 注册页 创建账号。注册后你会得到一个组织Organization所有空间与密钥都在组织层面管理。第二步获取 Builder.io 私有密钥Private Key私有密钥用于在本地通过 CLI 向你的账号创建空间操作路径如下打开组织设置页或从列表中选择一个组织点击左侧边栏的Account找到Private keys一行点击编辑图标复制自动生成的密钥或新建一个对你有意义命名的新密钥。第三步克隆仓库并用 CLI 初始化 Builder.io 空间在本地克隆本仓库并进入示例目录然后全局安装 Builder.io CLI最后用builder create命令创建空间git clone https://github.com/BuilderIO/builder cd builder/examples/react-multipage-funnel npm install --global builder.io/cli builder create --key private-key --name space-name --debug参数说明参数含义--key上一步复制的私有密钥用于鉴权--name新空间的名称后续可在后台修改--debug开启调试输出便于确认每一步执行结果执行成功后CLI 会返回新空间的公开 API Keypublic API Key控制台输出形如____ _ _ _ _ _ _ | __ ) _ _ (_) | | __| | ___ _ __ (_) ___ ___ | | (_) | _ \ | | | | | | | | / _ | / _ \ | __| | | / _ \ / __| | | | | | |_) | | |_| | | | | | | (_| | | __/ | | _ | | | (_) | | (__ | | | | |____/ \__,_| |_| |_| \__,_| \___| |_| (_) |_| \___/ \___| |_| |_| |████████████████████████████████████████| multipage-funnel | 1/1 |████████████████████████████████████████| funnel-section: writing section-three.json | 1/3 Your new space .... public API Key: 1234795283492198789217893712893关键点这个命令不只是创建空白空间还会把示例工程builder目录下预置的 CMS 内容发布到新空间。从输出可以看到CLI 依次处理了multipage-funnel模型与funnel-section模型下的三个 section 内容section-one.json、section-two.json、section-three.json。把返回的公开 API Key上例中的1234795283492198789217893712893复制下来填入 src/index.js 中的builder.init(...)。仓库中预置的 CMS 内容结构示例的builder目录本身就是一份可导入的空间备份完整呈现了漏斗所需的数据模型与内容路径为 examples/react-multipage-funnel/builderbuilder/ ├── settings.json # 空间配置type: space ├── funnel-section/ # 漏斗每一步的视觉内容模型 │ ├── schema.model.json │ ├── section-one.json │ ├── section-two.json │ └── section-three.json ├── multipage-funnel/ # 漏斗本身的数据模型 │ ├── schema.model.json │ └── my-first-funnel.json └── page/ # 通用页面模型本例未直接使用 └── schema.model.jsonsettings.json查看记录空间的名称multipage-funnels-space并通过cloneInfo中的contentIdMap/modelIdMap把源内容 ID 映射到新空间这正是builder create能完成内容迁移的原理。两个核心模型漏斗数据与漏斗步骤multipage-funnel漏斗的骨架模型定义见 builder/multipage-funnel/schema.model.json。它的kind为data纯数据模型不直接渲染为页面repeatable: false核心字段只有一个sections类型list必填漏斗的步骤列表每一项包含两个子字段titletext步骤在导航栏显示的标题contentreference对funnel-section模型内容的引用helperText明确说明Which content to render at the specified path即决定该步骤在指定路由下渲染哪份内容。实际内容示例见 my-first-funnel.json其中data.sections定义了三个步骤Welcome、Information、Good Bye每一步的content都是一个builder.io/core:Reference指向funnel-section模型下某份内容的 ID。funnel-section漏斗每一步的视觉内容模型定义见 builder/funnel-section/schema.model.jsonkind为component字段blocks类型uiBlocks承载可视化画布上的元素树。每份内容都是一个完整的 Builder 元素树。以 section-one.json 为例它包含Core:Section根容器maxWidth: 1200全宽背景图、高度 700px中屏 500px、小屏 350px 响应式Text组件标题 Something Great to Say58px 大字号随断点缩至 31px与副标题Core:Button组件Lets Go!其actions.click绑定state.navigateNext()。这个state.navigateNext不是前端组件自带的方法而是由宿主应用在渲染时通过data注入的状态这正是整个漏斗能够翻页的关键——下一节详细拆解。源码级剖析React 侧如何渲染漏斗入口文件 src/index.js 是理解整套机制的最佳样本全流程可分为四层。1. 初始化 SDKimport { BuilderComponent, BuilderContent, builder } from builder.io/react; builder.init(cebf462cf12940c78302d9b4a201d7e6);builder.init接收的正是 CLI 创建空间时返回的公开 API Key示例文件中内置的是该示例空间原本的 Key你自己的工程请替换为第三步获得的 Key。2. 用 BuilderContent 拉取漏斗数据BuilderContent options{{ includeRefs: true }} modelmultipage-funnel {(funnel, loading) { ... }} /BuilderContentmodelmultipage-funnel对应后台的数据模型名options{{ includeRefs: true }}是关键漏斗的sections[].content是**引用Reference**而非内嵌内容必须展开引用才能拿到每步的实际内容渲染时才能传给BuilderComponent渲染函数处理三种状态loading时显示占位文案funnel不存在时提示no data have you connected builder correctly?即 API Key 或空间内容未正确连接正常时渲染Steps。3. Steps 组件数据驱动路由与导航const Steps ({ funnel }) { const history useHistory(); const navigateNext step history.push(getStepLink(step 1)); const navigateBack step history.push(getStepLink(step - 1)); const getStepLink index (index 0 ? / : /step-${index}); ... };getStepLink把步骤索引映射为路由第 0 步是/后续是/step-1、/step-2……顶部导航根据funnel.sections动态生成链接并用CustomLink基于useRouteMatch判断激活态高亮当前步骤路由区域用Switch遍历funnel.sections为每一步注册一条Route。4. 向 BuilderComponent 注入导航状态BuilderComponent data{{ navigateBack: navigateBack.bind(null, index), navigateNext: navigateNext.bind(null, index), hasPrev: index 0, hasNext: index funnel.sections.length - 1, }} modelfunnel-section content{section.content.value} /这里回答了state.navigateNext从哪来data对象会被合并进该内容的渲染状态于是视觉内容里按钮的click动作state.navigateNext()就会调用这里绑定的函数通过history.push跳到下一步hasPrev/hasNext也可供视觉内容做条件判断例如在最后一步隐藏下一步按钮。content{section.content.value}传入的正是BuilderContent展开引用后得到的步骤内容。至此完整数据流可以概括为builder.init(publicApiKey) → BuilderContent 拉取 multipage-funnel 数据includeRefs 展开引用 → Steps 按 sections 生成路由 导航 → 每步 Route 渲染 BuilderComponent(modelfunnel-section, content, data) → 视觉内容中按钮 click → state.navigateNext() → history.push 翻页扩展阅读与下一步想快速上手 React SDK 的其他能力可参考 packages/react 的源码 与 READMECLI 的更多子命令与参数实现见 packages/cli/src仓库还提供了其他框架的多页/漏斗类示例例如 examples/next-js-cms-blog、examples/react-design-system用于对比不同技术栈下内容模型的组织方式。一个可以立刻动手的实验在 Builder.io 后台给funnel-section模型新增一份内容比如Thanks感谢页再回到multipage-funnel内容里新增一个 section 引用它。不需要改任何前端代码新步骤就会自动出现在导航栏和路由中——这就是数据驱动漏斗与手写多页表单的本质区别。【免费下载链接】builderVisual Development for React, Vue, Svelte, Qwik, and more项目地址: https://gitcode.com/GitHub_Trending/bu/builder创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用 Builder.io 与 React 搭建可视化多页转化漏斗：从零配置到源码级剖析
用 Builder.io 与 React 搭建可视化多页转化漏斗从零配置到源码级剖析【免费下载链接】builderVisual Development for React, Vue, Svelte, Qwik, and more项目地址: https://gitcode.com/GitHub_Trending/bu/builder本文基于仓库中的 react-multipage-funnel 示例 编写完整讲解如何使用 Builder.io 的视觉开发能力结合 React 与 React Router 构建一套「多页面转化漏斗」multipage funnel。你将掌握 Builder.io 空间Space的初始化、私有密钥与公开 API Key 的获取流程、CLI 导入 CMS 内容的方法以及BuilderContent/BuilderComponent在 React 中渲染漏斗各步骤的底层实现原理。什么是多页漏斗为什么用 Builder.io 来做转化漏斗Funnel是一系列按顺序引导用户完成目标注册、下单、填写信息等的页面组合。传统做法中每一页都写死在前端路由里营销团队想调整某一步的内容或新增一步都需要开发介入、重新发布。Builder.io 的思路是页面结构交给前端页面内容交给可视化编辑器。本示例把漏斗定义为一个名为multipage-funnel的 CMS 数据模型漏斗中的每一步section引用另一类模型funnel-section的已发布内容。于是业务人员可以在 Builder.io 后台直接编辑每一步的文案、图片、按钮前端只负责按路由把对应内容渲染出来并注入「下一步 / 上一步」的导航能力漏斗的步骤数量、顺序、标题全部由后台数据驱动前端代码无需改动。仓库中的示例工程位于 examples/react-multipage-funnel其核心依赖在 package.json 中可见builder.io/react、react-router-dom、react-scripts。快速开始两种运行方式在 CodeSandbox 中在线运行README 提供了直接在浏览器打开 CodeSandbox 示例 的入口无需本地环境即可查看效果。本地运行git clone https://github.com/BuilderIO/builder.git cd examples/react npm install npm start注意README 中的本地运行路径写作examples/react但实际工程位于仓库的examples/react-multipage-funnel目录。克隆仓库后请以实际目录为准即cd builder/examples/react-multipage-funnel后再执行npm install与npm start。前置条件本指南假设你已经安装Node.js示例使用react-scripts对应 Create React App 开发服务器npm 或 yarn工程锁定了package-lock.json见 examples/react-multipage-funnel/package-lock.jsongit完成后你将拥有一个已配置好、可直接使用的 Builder.io 多页漏斗空间Space。第一步注册 Builder.io 账号访问 builder.io 注册页 创建账号。注册后你会得到一个组织Organization所有空间与密钥都在组织层面管理。第二步获取 Builder.io 私有密钥Private Key私有密钥用于在本地通过 CLI 向你的账号创建空间操作路径如下打开组织设置页或从列表中选择一个组织点击左侧边栏的Account找到Private keys一行点击编辑图标复制自动生成的密钥或新建一个对你有意义命名的新密钥。第三步克隆仓库并用 CLI 初始化 Builder.io 空间在本地克隆本仓库并进入示例目录然后全局安装 Builder.io CLI最后用builder create命令创建空间git clone https://github.com/BuilderIO/builder cd builder/examples/react-multipage-funnel npm install --global builder.io/cli builder create --key private-key --name space-name --debug参数说明参数含义--key上一步复制的私有密钥用于鉴权--name新空间的名称后续可在后台修改--debug开启调试输出便于确认每一步执行结果执行成功后CLI 会返回新空间的公开 API Keypublic API Key控制台输出形如____ _ _ _ _ _ _ | __ ) _ _ (_) | | __| | ___ _ __ (_) ___ ___ | | (_) | _ \ | | | | | | | | / _ | / _ \ | __| | | / _ \ / __| | | | | | |_) | | |_| | | | | | | (_| | | __/ | | _ | | | (_) | | (__ | | | | |____/ \__,_| |_| |_| \__,_| \___| |_| (_) |_| \___/ \___| |_| |_| |████████████████████████████████████████| multipage-funnel | 1/1 |████████████████████████████████████████| funnel-section: writing section-three.json | 1/3 Your new space .... public API Key: 1234795283492198789217893712893关键点这个命令不只是创建空白空间还会把示例工程builder目录下预置的 CMS 内容发布到新空间。从输出可以看到CLI 依次处理了multipage-funnel模型与funnel-section模型下的三个 section 内容section-one.json、section-two.json、section-three.json。把返回的公开 API Key上例中的1234795283492198789217893712893复制下来填入 src/index.js 中的builder.init(...)。仓库中预置的 CMS 内容结构示例的builder目录本身就是一份可导入的空间备份完整呈现了漏斗所需的数据模型与内容路径为 examples/react-multipage-funnel/builderbuilder/ ├── settings.json # 空间配置type: space ├── funnel-section/ # 漏斗每一步的视觉内容模型 │ ├── schema.model.json │ ├── section-one.json │ ├── section-two.json │ └── section-three.json ├── multipage-funnel/ # 漏斗本身的数据模型 │ ├── schema.model.json │ └── my-first-funnel.json └── page/ # 通用页面模型本例未直接使用 └── schema.model.jsonsettings.json查看记录空间的名称multipage-funnels-space并通过cloneInfo中的contentIdMap/modelIdMap把源内容 ID 映射到新空间这正是builder create能完成内容迁移的原理。两个核心模型漏斗数据与漏斗步骤multipage-funnel漏斗的骨架模型定义见 builder/multipage-funnel/schema.model.json。它的kind为data纯数据模型不直接渲染为页面repeatable: false核心字段只有一个sections类型list必填漏斗的步骤列表每一项包含两个子字段titletext步骤在导航栏显示的标题contentreference对funnel-section模型内容的引用helperText明确说明Which content to render at the specified path即决定该步骤在指定路由下渲染哪份内容。实际内容示例见 my-first-funnel.json其中data.sections定义了三个步骤Welcome、Information、Good Bye每一步的content都是一个builder.io/core:Reference指向funnel-section模型下某份内容的 ID。funnel-section漏斗每一步的视觉内容模型定义见 builder/funnel-section/schema.model.jsonkind为component字段blocks类型uiBlocks承载可视化画布上的元素树。每份内容都是一个完整的 Builder 元素树。以 section-one.json 为例它包含Core:Section根容器maxWidth: 1200全宽背景图、高度 700px中屏 500px、小屏 350px 响应式Text组件标题 Something Great to Say58px 大字号随断点缩至 31px与副标题Core:Button组件Lets Go!其actions.click绑定state.navigateNext()。这个state.navigateNext不是前端组件自带的方法而是由宿主应用在渲染时通过data注入的状态这正是整个漏斗能够翻页的关键——下一节详细拆解。源码级剖析React 侧如何渲染漏斗入口文件 src/index.js 是理解整套机制的最佳样本全流程可分为四层。1. 初始化 SDKimport { BuilderComponent, BuilderContent, builder } from builder.io/react; builder.init(cebf462cf12940c78302d9b4a201d7e6);builder.init接收的正是 CLI 创建空间时返回的公开 API Key示例文件中内置的是该示例空间原本的 Key你自己的工程请替换为第三步获得的 Key。2. 用 BuilderContent 拉取漏斗数据BuilderContent options{{ includeRefs: true }} modelmultipage-funnel {(funnel, loading) { ... }} /BuilderContentmodelmultipage-funnel对应后台的数据模型名options{{ includeRefs: true }}是关键漏斗的sections[].content是**引用Reference**而非内嵌内容必须展开引用才能拿到每步的实际内容渲染时才能传给BuilderComponent渲染函数处理三种状态loading时显示占位文案funnel不存在时提示no data have you connected builder correctly?即 API Key 或空间内容未正确连接正常时渲染Steps。3. Steps 组件数据驱动路由与导航const Steps ({ funnel }) { const history useHistory(); const navigateNext step history.push(getStepLink(step 1)); const navigateBack step history.push(getStepLink(step - 1)); const getStepLink index (index 0 ? / : /step-${index}); ... };getStepLink把步骤索引映射为路由第 0 步是/后续是/step-1、/step-2……顶部导航根据funnel.sections动态生成链接并用CustomLink基于useRouteMatch判断激活态高亮当前步骤路由区域用Switch遍历funnel.sections为每一步注册一条Route。4. 向 BuilderComponent 注入导航状态BuilderComponent data{{ navigateBack: navigateBack.bind(null, index), navigateNext: navigateNext.bind(null, index), hasPrev: index 0, hasNext: index funnel.sections.length - 1, }} modelfunnel-section content{section.content.value} /这里回答了state.navigateNext从哪来data对象会被合并进该内容的渲染状态于是视觉内容里按钮的click动作state.navigateNext()就会调用这里绑定的函数通过history.push跳到下一步hasPrev/hasNext也可供视觉内容做条件判断例如在最后一步隐藏下一步按钮。content{section.content.value}传入的正是BuilderContent展开引用后得到的步骤内容。至此完整数据流可以概括为builder.init(publicApiKey) → BuilderContent 拉取 multipage-funnel 数据includeRefs 展开引用 → Steps 按 sections 生成路由 导航 → 每步 Route 渲染 BuilderComponent(modelfunnel-section, content, data) → 视觉内容中按钮 click → state.navigateNext() → history.push 翻页扩展阅读与下一步想快速上手 React SDK 的其他能力可参考 packages/react 的源码 与 READMECLI 的更多子命令与参数实现见 packages/cli/src仓库还提供了其他框架的多页/漏斗类示例例如 examples/next-js-cms-blog、examples/react-design-system用于对比不同技术栈下内容模型的组织方式。一个可以立刻动手的实验在 Builder.io 后台给funnel-section模型新增一份内容比如Thanks感谢页再回到multipage-funnel内容里新增一个 section 引用它。不需要改任何前端代码新步骤就会自动出现在导航栏和路由中——这就是数据驱动漏斗与手写多页表单的本质区别。【免费下载链接】builderVisual Development for React, Vue, Svelte, Qwik, and more项目地址: https://gitcode.com/GitHub_Trending/bu/builder创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考