低代码布道师的博客

这篇是本次实战课程的最后一篇，我们在上篇还有两个问题没解决。一个是会员卡类型显示不对，一个是不同的会员卡我们希望背景色显示不同。我们先处理一下这两个问题。

打开我们的应用，点击变量，新建一个对象变量点击新建变量变量我们命名为cardlist来表示是会员信息这里要注意我们要根据当前用户的openid来做数据过滤，如果不填写查询条件那么就把所有的会员卡信息都查询了出来，和我们实际的业务规则不符。这里要注意的是，如果你直接设置筛选条件，无法传入变量，只能设置常量条件初学的同学，可能对常量和变量不是太清楚。常量和变量指变量的类型，如果你的变量定义之后不再改变值的我们就可以定义为常量。在低码方法中我们定义常量使用const关键字，比如。

有个问题是关联关系生成的是下拉选择组件，我们即使填充了选中值也依然没有选中，为了让有默认值，我们可以将系统生成的组件删掉，添加一个当行输入组件，绑定为我们的memberid即可。剩下就是会员标识如何获取，会员的信息我们可能很多页面都需要，那我们在变量里定义一个全局变量用来存放会员的标识。点击添加字段，我们第一个添加的字段是会员卡类型，我们的类型有汽油卡、CNG卡、汽/柴油卡、柴油卡四种类型。设置好之后我们切换到我的页面，将宫格导航的菜单修改为开卡，页面跳转到我们的开卡页面。

首先呢梳理一下会员注册的业务逻辑，如果用户是首次登录，那他肯定还没有给我们的小程序提交任何的信息。那么我们就在我的页面给他显示一个注册的按钮，如果他已经注册过了，那么就正常显示会员的信息，他可以使用后续的功能。提交成功后需要做的是将全局变量的isRegister赋值为true然后返回上一页，因此我们需要修改一下提交事件，选中表单容器，先把返回上一页事件删除掉。我们这种绑定是给变量做了一个取反，JS里用叹号表示取反的意思，取反的意思是如果变量是false一取反就是true。第二个普通容器，我们直接绑定变量。

初学者可能不知道openid是啥概念，当你使用微信小程序时，微信会为每个人分配一个openid的，这个openid就像每个人的身份证号一样，是唯一的，而且分配之后就属于你，并不会你下次登录的时候再给你分配一个。需要先注册成为会员，然后进行开卡的动作。这里要注意，会员的信息是唯一的，但是卡呢一个会员可能有多张，因为一个加油站不仅加汽油、也可能加柴油，有的可能还可以加天然气。一般店铺运营的时候可能会根据他充值的额度来升级会员，通常有普通会员，银牌会员，黄金会员，铂金会员几种，我们这里设计一个会员的类型字段。

还有就是我们的格式和数据列表的格式不一样，组件是纵向的显示数据，我们的原型图里需要横向的显示，那我们改造一下他的样式。数据准备好之后我们就需要实现一下列表的功能，在微搭中列表功能可以通过数据列表组件来实现，往页面中添加一个数据列表组件。为了存放数据，我们先需要设计数据源，这个数据源比较简单，我们只需要按照我们的原型的表格作为我们的字段新增即可。我们考虑要显示最新的日期，因此需要创建一个日期类型的字段，用来存放是几号的价格。数据源设计好之后，点击列表的更多，点击管理数据，我们录入一些测试数据。

变量名需要起一个有意义的名字，通常起一个英文辨识度比较好，如果起拼音也可以，但是拼音因为汉语不是一个明确的语言，同样的拼音会有多重意思。在定义变量的时候要考虑你的信息是否需要做共享，比如登录用户的信息，可能在若干个页面都用的到，那就定义成全局变量比较有用。在技术世界里，描述这个对象的，我们叫JSON对象，语法是以一对儿大括号命名，里边的属性的语法是键：值，不同的属性用逗号分隔。初学的同学可能看到我们这么长的嵌套都晕了，其实可以在控制台里看你输出的变量的结构，一层层的往下取，直到得到你需要的值。

有了这些基础，我们需要看一下地图计算距离的API，它一共有三个参数需要传入，model，from，to。model我们选择步行，from是我们当前的位置，因为目前的类目限制无法直接获取到经纬度，我们给一个固定值。to是我们的目的地，我们从数据源里获取。数组的元素的索引是从0开始，0表示第一个位置，length属性表示数组的长度，我们只有1个元素，因此长度是1。这里的name表示api的标识，而methodName表示API的方法名，params表示入参，name和methodName都需要替换成自己的。

开启调试后小程序会多一个console窗口，可以看到具体打印的信息，经过调试发现现在开发阶段已经不允许调用这个接口了，那为了模拟这个地理位置，我们只能默认定义一个具体的变量，存放一个固定的值。我们本篇带着大家一步步的探索了微信API的使用，学习了小程序的调试方法，讲解了如何在低码编辑器中调用数据源的方法。计算距离需要先获取当前用户的位置信息，要想获取用户的位置，需要征得用户的授权，因此我们需要打开获取位置的授权。打开数据源之后，我们需要找到我们需要的方法，目前我们需要查询多条的方法，粘贴标识。

打开微搭的控制台，在小程序开发认证的列表里找到你的appid 贴入界面中。计算距离需要我们引入地图的API，在微搭中先需要创建API。点击之后会跳转到腾讯位置服务，我们需要先登录，登录之后可以看到你已经创建过的Key。将得到的信息填到表单里即可，我们下一篇介绍如何获取用户的位置及如何计算距离。会有重名的，可以点击你所在的城市，进入地图之后就可以看到我们需要的信息。字段创建好之后，我们在列表上点击管理数据，录入加油站的经纬度信息。第一次使用的时候需要点击添加Key，信息填写可以参考我的设置。

数据录入好之后，我们实现第一部分内容，是一个标题，左侧显示充值优惠，右侧显示更多。开发之前我们要思考如何展示信息，在我们的功能规划里，在首页部分是要展示三个充值的套餐信息。刚才这样的设置忘记了下边还有内容，我们重新搭建一下结构，外层普通容器用来显示背景，里边的普通容器用来盛放标题。默认文本内容是垂直排列的，为了让它们一行显示，两端对齐，我们需要设置普通容器的样式为横向排列。这个设置好之后，我们在普通容器点击右键，选择克隆，分别克隆出两个来，修改背景色。现在是纵向排列，我们设置父容器为横向排列，横向平分。

我们上一篇介绍了应用的一些常见操作，本篇我们就进入到页面开发。首先要开发首页，我们在一开始的时候就介绍了广告数据源的设计，本篇我们利用这个数据源来开发轮播图的功能。先往页面中添加一个轮播容器组件。轮播容器可以循环的展示图片，默认是循环三张图片，我们一般要循环展示的时候只需保留一张图片，进行变量绑定即可那要如何来进行循环展示呢？我们先要定义一个变量，用来读取广告数据源中的数据变量的类型选择对象，而数据模型我们选择广告。变量定义好之后就可以绑定循环展示了，选中图片组件，展开通用配置，我们进行变量绑定在循环

通常是由于没有任何开发基础，一方面看不懂模板，另一方面因为底子比较薄弱，无法按照自己的想法搭建出想要的模板。编辑页面我们通常会将组件进行搭建，创建数据源可以方便的创建和修改数据源，一般应用用到的图标、背景等素材上传到应用里。第四部分是组件编辑预览区域，在这个区域可以调整组件的位置，预览区域可以看到各种设置的最终的效果。需要注意的是，如果需要调用微信API的，比如打开文件的，需要发布成小程序在手机里才可以看到。第二部分是顶部导航，我们通常在顶部导航创建变量，编写前端的业务逻辑，预览发布应用。

图片上传的时候有多张和单张的区别，这个区别是和你数据源设计时候字段类型相关的，如果你的字段类型选择是图片的，那么这个组件就会识别类型变成单张上传，如果你的类型选择为数组，数组里的元素类型选择为图片的，那么这个组件就可以上传多张。首页的第一部分是轮播图，所谓的轮播图是一组图片的轮询展示，需要考虑两方面的问题，第一个是图片往哪存，第二个方面是图片可不可以点击。第二方面初学者的疑问是，如何将图片上传到微搭中，一般设计图片上传的，需要调用图片上传组件，微搭中使用的是图片上传组件。你上传的所有附件都会存放到这里。

随着这两年微搭产品的迭代，目前组件基本够用，像常用的支付这种功能也是有的，因此我们就可以结合现有功能来完成一个实际使用的小程序的开发。我们本次的实战课，是以加油站的业务场景为出发点，涵盖会员的开通、充值、消费、积分兑换等常用场景。结合实战案例，我们完整的介绍一下IT的常用技能，如需求分析、原型制作、数据源及功能设计、编程技巧等。通过实战案例的讲解，带着大家从0到1的搭建一款小程序，让零基础的同学也可以循序渐进的学会低码的开发方式。掌握之后，稍微变化一下就可以变成你自己实用的小程序。