前言

现在学校已经有了初步的信息化意识，老师日常在和家长互动时，通过微信群发布各类信息，通过在线采集表来收集各类信息。

采集表收集信息有如下弊端
1、家长及学生的个人隐私信息在采集表中暴露无疑
2、像学生基础信息，如姓名、性别、身份证号、家庭住址，反复多次重复填报
3、手机上操作在线文档，填报不便，尤其在表格字段内容比较多的时候
4、老师在汇总的时候需要和花名册逐个核对，尤其需要提供截图这类信息的时候，需要将附件导出到电脑，操作繁琐

如果只是利用群和在线表格，那学校的信息化还停留在线下纸质填表转到电子填表的阶段。现在可以将学校反复采集的基础信息形成数据库，在填报的时候自动调取，这样既方便了家长又方便了老师。

如果采用传统开发，需要和服务商签订合同，沟通需求、需求确认、编码、测试、上线等一系列步骤。先不说费用负担不负担的起，等功能开发好了，这项工作也结束了。

为了解决时效性的问题，可以采用低代码的方案，快速制作采集表，并发布成小程序，一件事就是一个采集表单，制作简单，使用方便。

本文就依托于学校的日常业务场景，利用低码工具来开发一款家校协同的小程序。

1 设计数据源

为了方便信息录入，需要先设计一个学生的数据源，由家长录入学生的基础信息。学生的基础信息包括姓名、性别、证件类型、证件号码、出生日期、民族、手机号码、居住地址、学籍编号、所在班级

为了采集的方便，我们可以将一些常见的可以下拉选择的字段做成数据字典，这样就可以减少录入。在微搭里是使用通用选项集来维护数据字典的

具体操作方式是登录低码控制台，点击通用选项集，点击新建选项集

在新增界面录入选项集的名称、标识及具体的选项。我们先录入证件类型

按照同样的方法我们增加性别、民族的选项集

这里还有个设计就是班级，在微搭里也有传统数据库的表关系的概念，我们可以进行表拆分，比如将班级和学生拆分成两种表，通过班级id来维护表之间的关系

但是拆分表之后如果需要做多表关联查询的，必须要使用自定义连接器按照云开发的聚合语法进行编写。聚合语法比较复杂，需要按照对象的语法编制，对于初学低代码的同学来说，这块的难度无疑就劝退了。

为了降低编程的难度，像这种变化不大的信息，我们也可以维护在通用选项集里，这样查询的时候就不需要进行表关联。我们建立一个班级的选项集，分别录入可供选择的各个班级

下拉项维护好之后我们就可以设计数据源了，点击数据模型，点击新建数据模型

输入数据源的名称和标识

点击编辑按钮进入编辑视图

按照我们的数据源设计添加字段

添加字段的时候重点是需要考虑字段的类型，数据源的字段一共有文本、布尔值、数字、数组、对象、邮箱等各种各样的类型。具体选择什么样的类型要依据你需要填报的信息决定。

比如我们的姓名就是纯汉字，那么选择文本就可以

性别因为我们要下拉选择，从男和女中进行选择，因此我们选择枚举类型，选择我们刚刚建立的通用选项集的性别

证件类型也是下拉选择，还是选择枚举类型

证明号码我们还是输入文本信息，因此类型选择文本

出生日期因为需要弹出选择日期，因此我们选择日期时间类型，格式我们选择日期

民族也需要下拉选择，也选择枚举类型，选项集关联民族

手机号码为了正确输入，我们选择电话类型，电话类型需要输入默认值

居住地址也是文本，所以选择文本类型

学籍编号也是文本

所在班级也需要下拉选择，类型选择枚举，选项集关联班级

除了业务字段外，我们还需要一个数据权限控制的字段。一般家长录入基础信息后，为了让家长看到自己的数据，我们一般是通过openid来做数据权限过滤，因此需要增加一个openid的字段

最终设计好的数据源如下图

2 创建模型应用

日常老师下发采集表信息后，需要进行汇总导出，这个需求是在微搭自带的企业工作台完成的。如果需要使用企业工作台，就需要根据数据源来自动创建一个模型应用。

在控制台点击应用，点击新建应用，新建模型应用

输入应用名称

勾选学生数据源来创建页面

模型应用会自动根据数据源的字段生成增删改查的页面

生成完毕后就可以点击发布按钮，发布之前会做配置核查，在控制台里会显示具体的不符合项，按照提示一一处理好

导航条上小虫子变成对号的图标就说明配置核查都通过了

然后再次点击发布，我们可以先发布成体验版进行测试

有的同学在实际操作时问，我录入数据但是小程序里没有，正式版和体验版数据是分开的，要分清楚是录入到了哪个版本里

发布后功能是在企业工作台里使用，菜单栏里出现了学生列表及创建学生的功能

点击创建学生可以直接进行录入

其实随着技术的迭代与进步，好些过去感觉费了半天劲要开发的功能，随着自动化水平的提高只不过是一分钟自动生成的事。这也是低码工具比较便捷的地方。

3 开发小程序

微搭里开发小程序需要先创建一个自定义应用，点击应用，点击新建应用，点击新建自定义应用

输入应用名称，支持平台我们选择小程序，如果需要多端发布的，可以选择第二种或者第三种类型，既可以发布成H5也可以发布成web网站

创建应用的时候，先需要创建一个空白页

一般小程序会有各种各样的功能，我们这里用宫格导航组件来做，往页面中添加一个宫格导航组件

我们这一个基础版本先考虑家长的需求，一般是需要先注册学生信息，日后等学生升班了之后还需要继续维护，我们还需要一个学生信息维护的功能，因此我们改一下菜单项

设置时候我们需要打开具体的页面，我们添加一个学生注册页面，在页面组件区点击+号来创建页面

输入页面的名称和标识

我们再添加一个页面，学生修改

页面创建好之后，我们再次设置菜单项的时候打开页面选择对应的页面即可

4 学生注册

学生注册的时候需要填写各种信息，在微搭中我们可以使用表单容器来自动生成注册页面，先切换到学生注册页面。在页面组件区从页面列表中选中学生注册页面

往页面中添加表单容器

数据模型我们选择学生数据源

手机号码我们将默认值删掉

还有一个问题是如何获取用户的openid，一般openid是我们一登录的时候就需要获取，页面中使用的时候需要从全局变量获取，我们先定义一个全局变量openid

然后点击导航条的代码编辑器

在lifecycle里输入如下的代码

/*** 可通过 app 获取或修改全局应用的 变量 状态 等信息* 具体可以console.info 在编辑器Console面板查看更多信息* 如果需要 async-await，请在方法前 async**/
export default {async onAppLaunch(launchOpts) {//console.log('---------> LifeCycle onAppLaunch', launchOpts)const { OPENID, FROM_OPENID } = await app.utils.getWXContext()let userId = FROM_OPENID || OPENIDif (!userId) {const { wedaId } = await app.cloud.getUserInfo()userId = wedaId}//userId = "o29js5TnCwiYJayG9AieKzkIlOBg"app.dataset.state.openid = userIdconsole.log("openid", app.dataset.state.openid)},onAppShow(appShowOpts) {//console.log('---------> LifeCycle onAppShow', appShowOpts)},onAppHide() {//console.log('---------> LifeCycle onAppHide')},onAppError(options) {//console.log('---------> LifeCycle onAppError', options)},onAppPageNotFound(options) {//console.log('---------> LifeCycle onAppPageNotFound', options)},onAppUnhandledRejection(options) {//console.log('---------> LifeCycle onAppUnhandledRejection', options)}
}

获取到openid后我们选中表单中的openid，点击输入值旁边的超链接图标

从全局变量中绑定

openid是系统需要的字段，对用户不可见，因此可以设置样式，布局选中隐藏即可

5 学生修改

学生信息修改也是使用表单容器，修改信息时候需要先获取到学生的数据标识，我们可以定义一个普通变量来存储学生的数据标识

变量的赋值我们选择在页面生命周期函数里根据登录人的openid来获取

export default {async onPageLoad(query) {//console.log('---------> LifeCycle onPageLoad', query)const result = await app.cloud.callModel({name:'xs_kerw7ud',methodName:'wedaGetRecords',params:[{"key":"openid","rel":"eq","val":app.dataset.state.openid}]})$page.dataset.state.id = result.records[0]?._idconsole.log( $page.dataset.state.id)},onPageShow() {//console.log('---------> LifeCycle onPageShow')},onPageReady() {//console.log('---------> LifeCycle onPageReady')},onPageHide() {//console.log('---------> LifeCycle onPageHide')},onPageUnload() {//console.log('---------> LifeCycle onPageUnload')},
}

往页面中添加表单容器，场景选择更新，数据标识绑定我们变量定义的id

然后将openid设置为影藏，更新业务也做好了

总结

我们本篇介绍了家校协同小程序学生注册及学生修改的功能，这个业务可以作为业务的起点，下一篇我们介绍如果根据已经填写的信息默认填充到采集表里，敬请期待。

家校协同小程序实战教程相关推荐

计算机毕业设计Python+uniapp家校通小程序(小程序+源码+LW)
计算机毕业设计Python+uniapp家校通小程序(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pychram社区版+ python3 ...
电商小程序实战教程-分类导航
电商小程序实战教程第一章总体介绍第二章创建数据源第三章创建管理后台第四章首页的创建前言从上一篇开始,我们就正式进入到了电商小程序的实战开发阶段.首先是介绍了首页的开发,首页主要是展 ...
微信小程序实战教程-闫涛-专题视频课程
微信小程序实战教程-38472人已学习课程介绍介绍微信小程序API,包括页面布局.网络交互.媒体文件.本地缓存.地理位置.WebSocket和传感器技术,后以翼健康为模板,开发一套 ...
微信小程序实战教程1503---生成二维码
在微信小程序中,如果我们可以自己将指定内容生成二维码,出示给别人,将是一个比较有用的功能.但是微信小程序API中,目前暂时还没有这个功能,但是我们可以通过变通的方法,来实现这一功能. 本文所提到的方法 ...
基于云开发的微信小程序实战教程（二）
基于云开发的微信小程序实战教程(二) 上篇文章中,简单介绍了下小程序云开发的概念,还有开发工具的安装和配置,云开发环境已经搭建完毕. 本章主要内容:微信开发者工具如何使用,小程序云开发的基础目录结构 ...
【项目源码】智慧班牌源码家校互联小程序源码智慧校园云平台
智慧校园平台源码智慧班牌源码人脸识别技术电子班牌源码家校互联小程序源码源码开发环境:Java+springboot+vue+element-ui+mysql 智慧校园系统定位于中小学教育学校 ...
智慧校园平台源码智慧班牌源码人脸识别技术电子班牌源码家校互联小程序源码
智慧校园平台源码智慧班牌源码人脸识别技术电子班牌源码家校互联小程序源码源码开发环境:Java+springboot+vue+element-ui+mysql 智慧校园系统定位于中小学教育学校 ...
微信小程序实战教程：模仿—网易云音乐（二）
接上一篇:微信小程序实战教程:模仿-网易云音乐(一) wxml进行渲染:  <view class="lyric-content" hidden ...
电商小程序实战教程-商品详情页
电商小程序实战教程第一章总体介绍第二章创建数据源第三章创建管理后台第四章首页的创建第五章分类导航前言我们已经完成了首页和分类导航页面的开发,本节我们介绍一下商品详情页的开发.商 ...
基于云开发的微信小程序实战教程（一）
基于云开发的微信小程序实战教程(一) 最近刚开发了款小程序,在开发过程中发现,基于云开发的教程资源不是很多,而且很不详细.所以边实战边总结了下云开发的简单教程,希望对你有所帮助. 本章主要内容:什么是 ...

家校协同小程序实战教程

目录

前言