PagePlug企业版开发案例（一）——企微定时群发工具PagePlug是appsmith中国化项目，一款面向研发开发使

一、背景

PagePlug是appsmith中国化项目，一款面向研发开发使用、开源的、前后端一体的低代码工具，拥有强大的可视化建模、数据库和API集成能力，目前已有将近超千家企业将PagePlug低代码开发工具融入内部研发体系，相较于传统的产研开发，使用PagePlug可大幅提升研发效率，节省项目迭代维护成本。更多介绍可点击下方文章查阅：

当前，企业内部都有在广泛使用市面上的SaaS营销工具，如有赞、微伴助手等。然而，在使用这些SaaS工具时，企业常常面临个性化功能无法实现的问题，并且对这方面的需求呈现明显增长的趋势。作为一款强大的低代码开发工具，PagePlug不仅能够开发类似的功能应用，还可以通过API接口与有赞、企微助手等SaaS工具实现数据交互和功能扩展

利用PagePlug低代码平台，企业能够快速开发符合自身需求的内部工具，并且能够满足个性化功能的定制化要求。而与有赞、企微助手等SaaS工具的API接口集成，使得企业可以轻松实现数据的交换和流程的协同，企业能够拓展功能、增强应用的灵活性，满足特定业务需求。
PagePlug提供多种API、数据库的连接方式，数据不在工具平台上存储，从而大大提升了数据安全性

本次案例以目前头部的在线教育公司为例子，通过PagePlug企业版来开发运营部门常用企业微信定时群发工具，并可以根据企业内部业务需求，自行进行功能开发客户资产管理、线索数据管理、数据分析等（后续案例再逐步更新）

二、实战教程

2.1 前置准备

新建一个数据库，在数据库中创建两张表（一张为获取企业微信用户表、一张为获取推送消息记录表）
需要在企业微信管理后台，获取到企业的ID、AgentID、Secret信息
部署PagePlug企业版，本次案例需要用到企业版中的部分功能

2.2 配置企业微信api

在左侧菜单栏中，选择添加数据源，选择企业微信图标

将企业微信对应的Corp ID、AgentID、Secret填写进去，可以点击左下角的测试，连通了之后点击保存

2.3 配置PagePlug

我们可以新建一个应用组，例如起个名称叫：运营—企微工具，新建一个桌面（PC）应用

在画布中可以拖入三个输入框组件（Input1、Input2、Input3），分别为客户姓名、客户等级、地区，用于后续筛选表格的信息内容（也可以替换成树形单选组件来进行筛选选择）

新建一个MySQL查询（这段代码主要实现模糊查询的功能），名称为：Get_customers，查询语句如下：

SELECT * FROM customers WHERE name LIKE {{'%' + Input1.text + '%'}} AND grade LIKE {{'%' + Input2.text + '%'}} AND city LIKE {{'%' + Input3.text + '%'}}

三个输入框（Input1、Input2、Input3）的OnTextChanged事件都绑定Get_customers查询

拖入一个表格组件（Table1），主要用于获取数据库中企业微信用户的表，并将Get_customers查询的结果绑定到表格上

拖入一个输入框组件（Input4），在右侧选项中，数据类型我们可以选择为【多行文本】，后续用于企业微信信息内容的发送（也可以用富文本组件来实现）

拖入一个日期选择器组件（DatePicker1）和按钮组件（Button1），后续用于选择特定的时间，进行文本信息的推送

新建一个MySQL查询，用于向数据库的表中插入特定的字段数据，名称为：Insert_logs（如果要调用组件的属性，记得关闭下预查询），查询语句如下：

INSERT INTO insertPushLog(name, grade, city, nickname, is_read, push_success, message_content, push_time) VALUES {{Table1.tableData.map(row => ( "${row.name}", "${row.grade}", "${row.city}", "${row.nickname}", 1, 1, "${Input4.text}", "${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()} ${new Date().getHours()}:${new Date().getMinutes()}" )).join(',')}}

PagePlug已支持企业微信多个api的使用，新建一个使用消息推送—发送应用消息的文本信息api，并且命名为（SeedMessage）

配置信息具体如下：

{ "touser" : "{{Table1.tableData.map(user => user.wecom_id).join("|")}}", "msgtype" : "text", "agentid" : , "text" : { "content" : "{{Input5.text}}" }, "safe":0, "enable_id_trans": 0, "enable_duplicate_check": 0, "duplicate_check_interval": 1800 }

在左侧菜单栏中，新建一个JS对象（这段代码主要通过日期选择器实现定时发送消息的功能），并命名为：DelayPushMessage，代码如下：

export default { sendMessage() { const targetDate = new Date(DatePicker1.formattedDate).getTime(); // 目标日期和时间 console.log(targetDate); const currentTime = new Date().getTime(); // 当前时间 console.log(currentTime); const timeDifference = targetDate - currentTime; // 计算时间差 console.log(timeDifference); if (timeDifference > 0) { setTimeout(function() { {{SendMessage.run().then(()=>{ showAlert('消息发送成功', 'success'); Insert_logs.run().then(() => { showAlert('success'); }).catch(() => { showAlert('消息发送失败', 'error') }) })}} },timeDifference) } else { showAlert('输入时间无效'); } } }

之后就可以试下在应用中设定一个时间，推送消息

2.4 配置信息记录后台页面

接下来将搭建一个企业微信发送消息查询页面

同样的，我们可以拖入一个容器组件，在里面拖入三个输入框组件（Input1、Input2、Input3），文本内容分别为：是否推送、是否已阅、推送消息，如下图所示：

新建一个MySQL查询（这段代码主要实现基于输入框输入的内容进行模糊查询），名称为：Get__logs，查询语句如下：

SELECT * FROM insertPushLog WHERE push_success LIKE {{'%' + Input1.text + '%'}} AND is_read LIKE {{'%' + Input2.text + '%'}} AND message_content LIKE {{'%' + Input3.text + '%'}}