【How To 系列】好友裂变平台搭建

码匠是什么？

码匠是一款国内研发的开发者友好的低代码平台，您无需了解 React/Vue 等框架的开发、部署等各种细节，就可以快速打通前后端，连接 REST API、MySQL、MongoDB 等多种数据源，然后通过一套开箱即用的组件，轻松搭建功能完善的数据看板、数据洞察、Admin 管理后台等多种应用。
码匠主要面向国内用户，相较于国外开发的 Admin/CRM/CMS 等后台工具，码匠的 UI 界面设计更加适合国内业务场景。同时码匠整合了多款国内常见数据源，包括飞书、企业微信、钉钉、阿里云 OSS 等。不仅如此，码匠还一站式提供了企业内部系统常用的租户管理、细粒度的权限控制、审计日志等功能，让您快速搭建后台应用的同时，也为您的企业信息安全保驾护航。

使用码匠搭建好友裂变平台

现如今社会上的产品营销竞争十分激烈，为了吸引用户，不少商家都选择通过在大家常用的微信平台上开展活动、进行产品营销。于是便有了好友裂变的概念：商家通过各种优惠活动吸引用户添加企业微信客服为好友，这些已添加的用户同样也可以成为活动发起者，通过专属海报将该商家分享给其他用户，帮助推广，与此同时分享海报的用户也会得到相应的奖励。
本期 How To 系列，码匠将带领大家搭建一个好友裂变平台，希望对您的工作有所帮助。

一、 梳理需求

一个好友触达平台可能需要以下功能：

1.新建一个裂变活动：点击新建好友裂变按钮将弹出一个对话框，在该对话框内主要是进行好友裂变的活动规则设置，包括基础设置和活动邀请内容设置。

在完成该部分设置之后点击下一步按钮。将会跳转至发起者规则设置。该页面即为已添加企业微信的用户设置奖励规则，让这些用户也能成为活动发起人以触发更多裂变。

2.查找裂变活动：用户可以通过左上角的查找选项进行查找，至少补充一项内容即可点击查询按钮。

3.管理裂变活动：首先是右上角的饼状图，该图可以对活动状态进行实时预览，数据获取自下方的表格；其次，在下方表格中详细列出了每一项活动的具体信息，其中「状态」列支持排序，方便快速筛选，「操作」列也有查看详细数据、推广、编辑等选项。

二、 开始搭建

在本例搭建中主要用到了下述组件：

• 按钮 (Button)
• 图表 (Chart)
• 容器 (Container)
• 日期 (Date)
• 日期范围 (Date Range)
• 分割线 (Divider)
• 文件上传 (File)
• 文本输入 (Input)
• 对话框 (Modal)
• 数字输入 (Number Input)
• 单选 (Radio)
• 表格 (Table)
• 选择器 (Select)
• 文本 (Text)
• 多行输入 (Text Area)

步骤：

1.根据需要拖拽右侧组件搭出应用框架，本例中码匠布局如下图，读者也可以根据美观和功能自己设计。

💡 码匠使用小技巧：
在画布中拖拽组件时，其余组件的边框和排布会一并显示出来，如下图蓝色虚线所示，应用开发者可以利用该线条对齐组件、合理布局。

2.修改组件的属性值填充细节，这里码匠修改了组件名称和一些组件外观上的设置，例如组件中文字的位置和对齐方式等。

💡 码匠使用小技巧：
合适的组件名能让应用后续的修改更方便，左侧的数据浏览面板也能帮助您快速定位组件。

3.选择合适的数据源进行设置：码匠将常见的几款数据库类型及 API 帮助开发者配置完成，开发者只需选择想要接入的数据类型，简单填写表单即可完成配置。

4.创建查询并将查询结果和组件进行数据绑定，接下来补充一些事件触发逻辑，响应式交互让 UI 操作对用户更加友好，例如：对于下图对话框中的上一步按钮，需设置两个响应事件：关闭当前对话框和打开上一个对话框：

💡 码匠搭建应用常用步骤：

1. 快速连接数据源 & 创建查询
2. 确定组件布局并拖放组件，使用 JavaScript 表达式绑定数据
3. 设置查询和组件的事件触发，提供响应式 UI 交互

5.应用至此就已搭建完成了，用户可以在右上角点击预览查看应用或点击权限邀请他人一起查看、编辑，还可以点击「···」选择发布或导出。下图展示了权限管理相关界面：

💡 码匠使用小技巧：
善用历史记录功能可以减少许多不必要的麻烦，在多人协作修改应用时尤为重要。

更多码匠模板参考及使用技巧

想要了解更多还请移步码匠官网 (https://majiang.co/)，码匠官网为您提供了海量的工作模板，可以服务于自媒体、风险投资、咨询、广告业、零售业、医疗等团队，您都可以免费选用。除此之外，若您在使用过程中遇到了问题也可以随时查看帮助文档或向客服寻求帮助。最后欢迎大家探索码匠～

---

首发于码匠官方博客。本文为原创内容，版权归「码匠」所有，欢迎文末点赞、收藏、评论！转载请联系我们～