一、背景
PagePlug是appsmith中国化项目，一款面向研发开发使用、开源的、前后端一体的低代码工具，拥有强大的可视化建模、数据库和API集成能力，目前已有将近超千家企业将PagePlug低代码开发工具融入内部研发体系，相较于传统的产研开发，使用PagePlug可大幅提升研发效率，节省项目迭代维护成本。更多介绍可点击下方文章查阅：
各行业的市场营销部门在策划并执行营销推广活动时，经常需要迅速构建H5营销表单页面，如活动报名表、营销活动推广页、会员注册页、新产品介绍页等，以高效捕获潜在客户。
为实现这一目标，他们通常会面临以下几种开发方式及其相应的挑战：
1、内部产研开发：
-
优势：可以完全按照市场营销部门的需求进行定制开发，确保功能的全面性和与品牌风格的一致性。
-
劣势：由于开发这类表单页面通常不是公司的核心业务，会因为投入产出比不高而难以获得足够的内部资源支持，内部产研团队会将其开发优先级排后，这就会导致开发周期延长，影响项目上线时间。
2、外部SaaS工具：
-
优势：SaaS工具通常提供了丰富的模板和易用的拖拽式界面，能快速上手并创建出满足大部分需求的H5表单页面。此外，SaaS工具还具备较高的可用性和稳定性，能够确保表单页面的正常运行。
-
劣势：
-
定制化限制：虽然SaaS工具能满足70%-80%的通用需求，但对于一些特定的个性化要求，可能无法直接实现。即使工具提供了自定义代码的功能，但由于数据存储在外部平台，市场营销部门可能仍然无法完全掌控页面的所有细节。
-
数据安全风险：使用SaaS工具意味着敏感数据（如用户信息、报名数据等）将存储在外部平台上，这增加了数据泄露的风险，尤其是对于那些对数据安全性有较高要求的行业来说，这是一个不容忽视的问题。
-
PagePlug将目前某银行客户内部使用的其中一个场景案例——信用卡获客活动页，通过配置活动背景图+热区效果，5分钟完成一个活动H5的上线。相信通过本次案例，除了内部系统和内部营销工具开发之外，大家更能体会到PagePlug相较于市面上的表单无代码/低代码（例如：轻流、简道云、宜搭、微搭等），开发H5表单更轻松简单。
二、实战教程
2.1 创建新的应用
请私有化部署最新版本的PagePlug，从Dockerhub上拉取镜像需要使用神奇魔法，不然会影响镜像的拉取，详细部署方式可以查阅PagePlug官方文档
在PagePlug应用组中，我们可以创建一个新的PC端应用
在画布尺寸中，我们选择移动端画布
从左侧拖入一个容器（Container）组件至画布中
点击样式，可以贴一个图片url或者base64的内容，在背景图片中，例如下面的例子：
一个H5的宣传页面/表单页面就搭建完成了，不需要一个一个组件的拖入进行摆放，配置一个容器背景图即可
2.2 配置热区效果
以上面的效果图为例子，例如说，我想点击海报中的【立即咨询，立即开卡】，可以出现弹窗内容，我们可以在容器中，拖入一个图片组件
点击图片组件，将默认图片的内容清除掉，变成一个透明状态，调整下图片组件大小
给图片组件配置一个onClick事件，例如打开弹窗
调整下弹窗大小，在弹窗中拖入组件，例如input组件、Text组件等等
三、其他相关案例
-
工程管理系统：优化数据源信息内容及审批流程
线上体验地址：工程管理系统
-
跨境电商仓库管理系统案例：该系统允许用户管理多个仓库的产品和库存、以及跟踪供应商产品和管理供应商
线上体验地址：跨境电商仓库系统
四、企业版的介绍
如果想了解PagePlug企业版/商业版的价格及更多功能，可放大下方图片查看
对PagePlug上一些功能使用讲解及介绍，可以点击下方文章查看
1、PagePlug企业版案例（二）—表单生成Excel文件（中国式报表）并发送至邮箱中
PagePlug企业版案例（二）—表单生成Excel文件（中国式报表）并发送至邮箱中-CSDN博客文章浏览阅读1.3k次，点赞48次，收藏26次。PagePlug企业版表单生成excel案例，使用邮箱服务定向发送邮件_pageplug企业版https://blog.csdn.net/AppsmithCN/article/details/1400991922、PagePlug企业版开发案例（一）——企微定时群发工具
PagePlug企业版开发案例（一）——企微定时群发工具_pageplug开源低代码融合工作流开发教程——保姆级实战开发-CSDN博客文章浏览阅读944次，点赞31次，收藏16次。快速开发内部应用工具，告别SaaS数据存储安全问题及个性化需求问题_pageplug开源低代码融合工作流开发教程——保姆级实战开发https://blog.csdn.net/AppsmithCN/article/details/135380573
https://blog.csdn.net/AppsmithCN/article/details/1353805733、PagePlug开源低代码融合工作流开发教程——保姆级实战开发
PagePlug开源低代码融合工作流开发教程——保姆级实战开发-CSDN博客文章浏览阅读80次。PagePlug是一款面向研发开发使用、开源的、前后端一体的低代码工具，拥有强大的可视化建模和API集成能力，支持与工作流的融合，实现更强大的企业应用开发https://blog.csdn.net/AppsmithCN/article/details/134317961?spm=1001.2014.3001.5501https://blog.csdn.net/AppsmithCN/article/details/134317961?spm=1001.2014.3001.55014、Formily开发实战——3分钟完成一个登录页的开发，Formily表单与PagePlug低代码的完美融合
Formily开发实战——3分钟完成一个登录页的开发，Formily表单与PagePlug低代码的完美融合_formily github-CSDN博客文章浏览阅读706次，点赞3次，收藏7次。Formily——更高效的表单解决方案与开源低代码Pageplug的融合_formily githubhttps://blog.csdn.net/AppsmithCN/article/details/130765565https://blog.csdn.net/AppsmithCN/article/details/1307655655、国内优秀的开源低代码框架：PagePlug，面向研发使用，拒绝重复、低价值的工单循环开发
国内优秀的开源低代码框架：PagePlug，面向研发使用，拒绝重复、低价值的工单循环开发_低代码开源框架-CSDN博客文章浏览阅读1.9k次，点赞2次，收藏7次。面向研发使用、更懂国内企业的开源低代码_低代码开源框架https://blog.csdn.net/AppsmithCN/article/details/131380008https://blog.csdn.net/AppsmithCN/article/details/1313800086、保姆级低代码实战教程——玩转PagePlug表格开发，增删改查分页如此简单
保姆级开源低代码实战教程——玩转PagePlug表格开发，增删改查分页如此简单_pageplug github-CSDN博客文章浏览阅读997次，点赞3次，收藏7次。面向研发使用开发的开源低代码，比低代码区别很大的，相较于轻流、简道云、轻宜搭、微搭、帆软、活字格等等的低代码灵活性及维护更好_pageplug githubhttps://blog.csdn.net/AppsmithCN/article/details/131210730https://blog.csdn.net/AppsmithCN/article/details/1312107307、PagePlug：低代码平台入门教程—10分钟搭建一个用户改查系统
PagePlug：低代码平台入门教程—10分钟搭建一个用户改查系统-CSDN博客文章浏览阅读635次，点赞2次，收藏5次。PagePlug，面向研发使用的开源低代码平台，10分钟搭建一个用户改查系统_pageplughttps://blog.csdn.net/AppsmithCN/article/details/131790256https://blog.csdn.net/AppsmithCN/article/details/1317902568、PagePlug低代码入门教程——与Websocket的集成
PagePlug低代码入门教程——与Websocket的集成_websockets.send body-CSDN博客文章浏览阅读154次，点赞2次，收藏2次。通过PagePlug低代码与Websocket集成，实现前端页面的数据实时通信_websockets.send bodyhttps://blog.csdn.net/AppsmithCN/article/details/132511483https://blog.csdn.net/AppsmithCN/article/details/1325114839、PagePlug组件使用技巧（一）——Iframe组件开发日程管理功能
PagePlug组件使用技巧（一）——Iframe组件开发日程管理功能https://blog.csdn.net/AppsmithCN/article/details/135654077
10、B站上也有一些案例教程，欢迎查看研究～～
欢迎点赞、收藏、喜欢三连鼓励下哟 ，避免找不到文章啦
标签：PagePlug,代码,表单,开源,csdn,article,net,H5 From： https://blog.csdn.net/AppsmithCN/article/details/144512946