我们已经写了四篇教程，涵盖了需求分析及各个页面，本篇是我们的最终篇。

咨询信息

我们小程序需要收集家长和孩子的信息，为此我们也规划了数据源。如果按照传统开发思路，那我们是要依次实现信息采集的每个字段，然后再编制后台的提交方法进行保存信息。

低代码的特点就是进行场景封装，我们这类提交场景可以使用表单容器组件来实现，往页面中添加表单容器组件

表单容器会根据所选数据源来自动生成页面，选择我们的咨询信息数据源

在提交的时候我们是如何来区分是谁提交的信息呢？在第一篇文章中我们介绍了如何获取登录用户的openid，这个openid在提交的时候就有进行保存。

保存的方法是先修改我们的数据源，增加一个openid的字段

新增字段之后需要重新打开应用，再次选择我们的数据源，就出现了刚刚新增的字段

那如何接收用户的openid呢？选中openid，我们给输入值绑定全局变量

这个openid不需要给用户显示，我们切换到样式页签，将其隐藏

回到预约报读详情页，我们给按钮增加点击行为，跳转到我们的咨询信息页面

拨打电话

我们在预约报读详情页有个电话的按钮，期望的功能是点击电话的图标就拨打电话，为此我们需要创建一个全局变量，来读取幼儿园的联系电话

然后给图标绑定拨打电话方法，并且绑定电话号码

地图导航

我们详情页还有一个地图导航的功能，我们地图导航需要调用微信的api，调用api需要自己创建一个自定义方法

点击地图图标，增加自定义方法

输入如下代码

export default function({event, data}) {const latitude = app.dataset.state.companyInfo.records[0].dz.geopoint.coordinates[1]const longitude = app.dataset.state.companyInfo.records[0].dz.geopoint.coordinates[0]wx.openLocation({latitude,longitude,scale: 18})
}

我的页面

我们就留下一个我的页面还没实现，我的页面可以让用户查询咨询提交的咨询信息，以前有个列表项组件比较方便，现在已经去掉了，我们需要自己实现一下。

首先是更改一下页面的背景

然后添加一个普通容器，设置背景、边距、边框

self {margin-top: 15px;margin-right: 15px;margin-left: 15px;padding: 15px 15px 15px 40px;display: flex;justify-content: space-between;align-items: center;flex-direction: row;border-radius: 15px;background: rgb(255, 255, 255)
}

我的咨询需要跳转到一个列表页面，我们创建一个列表页面

里边添加一个数据列表组件

数据模型选择咨询信息

筛选条件要设置openid等于全局变量的openid

然后绑定好对应的字段即可

总结

我们用了五篇的篇幅讲解了一个小程序的完整的开发过程，既要自己有产品的规划能力，又要有开发能力可以将功能进行落地。当然了，目前还属于一个纸上谈兵的过程，还需要将小程序投入到实用中才可以完善。低码学习任重而道远，需要持续的投入学习才可以掌握，愿意学习的同学关注吧，持续输出教程中。

幼儿园小程序实战开发教程（终篇）相关推荐

幼儿园小程序实战开发教程（中篇）
目录首页开发首页轮播图宫格导航新闻公告特色课程介绍教学课堂立即报名底部导航条最终效果总结上一篇我们介绍了幼儿园小程序的需求和设计过程,本篇我们开始进入开发阶段首页开发开发的过 ...
幼儿园小程序实战开发教程（下篇）
目录关于我们师资力量精彩活动作品展示新闻公告详情页总结我们的连载小程序更新到第三篇了,前两篇分别讲解了需求设计及首页开发,前两篇文章如下: 需求分析及设计首页开发我们本篇继续我们的开 ...
会员管理小程序实战开发教程（六）-会员查询功能
本实战教程是利用腾讯云微搭低代码,快速的搭建一款会员管理的小程序,方便商家日常通过小程序来管理会员.功能分为会员信息登记.充值.消费.发票及会员查询功能.历史文章目录如下: 1.首页及会员登记功能 2 ...
会员管理小程序实战开发教程-消费记录功能
我们前边利用六篇篇幅介绍了会议管理小程序的各项功能,今天我们先复习一下我们已经完成的功能: 首页首页我们分为两个区域,上边是快捷功能的入口,包含会员登记.会员充值.会员消费.发票申请四个功能.下边是 ...
会员管理小程序实战开发教程-会员信息删除
需求分析日常我们在记录会员信息的时候,随着会员信息的增多,有必要定期清理一些已经不来消费的顾客,那么小程序删除的功能是必备的. 本文就讲解一下会员信息如何进行删除,考虑到读者群还有一部分是老板,对于 ...
王者级微信小程序开发实战教学从零到高手搭建微信小程序框架开发教程
王者级微信小程序开发实战教学从零到高手搭建微信小程序框架开发教程小程序进阶王者级微信小程序开发实战教学课程,讲师手把手对同学们进行微信小程序开发的进阶实战,从零开始搭建,从本地到云端开始系统化的 ...
python开发微信小程序-Django微信小程序后台开发教程的实现
1 申请小程序,创建hello world小程序 2 添加交互框和按钮 index. wxml cal {{ result }} index.wxss /**index.wxss**/ .input ...
axure 小程序网盘_万门大学微信小程序实战开发特训班【完结】网盘高清全套最新系列精品课程...
万门大学微信小程序实战开发特训班[完结]网盘高清全套最新系列精品课程课程简介我买了这个课程,课程很有价值,我们通过链接或百度网盘群的形式在共享资料库中与您共享,需要万门大学微信小程序实战开发特 ...
微信小程序实战开发视频
微信小程序实战开发视频: 链接:http://pan.baidu.com/s/1jIAwBLs 密码:ej3b

幼儿园小程序实战开发教程（终篇）

咨询信息

拨打电话

地图导航

我的页面

总结

幼儿园小程序实战开发教程（终篇）相关推荐

最新文章

热门文章