Zion初体验|入门学习模板-待办事项小程序

帮助初次接触Zion的用户在短时间内,通过“入门学习模板-待办事项小程序”体验Zion的基本使用,并完成一个待办事项小程序。

本教程针对从未使用过Zion的零基础用户
该文档及教程视频会以保姆级的方式带用户快速上手Zion,对于已经学会使用Zion的用户可以根据自己遇到实际问题查找相关的帮助文档,或到Zion学院通过视频教程继续学习:https://college.functorz.com/index

项目素材

待办事项小程序项目素材1650626433621.zip
10.5 KB

准备工作

1. 安装Chrome浏览器

Zion需要通过Google Chrome浏览器来使用,下载地址:https://www.google.cn/intl/zh-CN/chrome/
并确保浏览器为最新版本
可以在浏览器“设置-关于Chrome”中确认

2. 注册微信公众平台小程序

在使用Zion发布预览小程序之前,需要注册微信公众平台的小程序,具体操作指南:https://doc.functorz.com/universal/register_wechat_app

3. 注册并开始使用Zion

Zion官方网站:https://www.functorz.com/
点击页面右上角“开始搭建”进入Zion
首次登录需要注册,之后浏览器会保存登录信息自动登录
可以通过微信扫码登陆,或者用邮箱/手机号验证注册账户登录;
使用微信扫码登录的用户请注意
在扫码成功之后的下个页面需要为自己添加一个Zion用户名,并且务必在手机号和邮箱留下一个有效信息,否则无法重置密码在登录后将鼠标移动到用户名(首次显示为微信名),选择“重置密码”可以为自己账号修改密码,之后就可以通过用户名和密码登录

成果展示

微信扫码体验小程序
浏览、添加待办事项
可以为事项选择优先级
点击开关按钮完成事项,可以在已完成页面查看完成的事项

额外功能点:

  1. 添加新待办时,当输入框内没有输入内容的时候无法点击添加按钮添加
  2. 选择优先级时,右边会出现对应的优先级图标
  3. 待办事项按优先级从高到底排序;已完成事项会显示完成时间,按最近完成时间排序
  4. 待办事项和已完成事项都有计数显示
  5. 可以在已完成事项中点击开关按钮取消完成状态

通过这个项目的制作,你将体验到以下内容

制作流程

创建新项目

登录Zion后点击右上角“创建新项目”
在弹出的对话框中选择“待办事项模板”,“使用此模板”
看不到“待办事项模板”?可能是屏幕分辨率的问题导致显示不完整
尝试缩小浏览器的显示大小,Mac:command -;Windows:ctrl -
我们可以为项目取名为“我的待办事项”
打开模板后由于是首次登录,会跳出新用户向导
进入界面后可以看到该项目已经创建好了3个页面:待办事项(主页),模板使用指南,添加新待办
对于正在阅读本片教程指南的同学可以忽略“模板使用指南”这个页面
完成该小程序大约需要30分钟时间,我们的任务是在模板的基础上完善:
  1. 页面的设计
  2. 后台的数据及绑定
  3. 交互行为的添加

熟悉界面布局和基本操作

左侧为全局工具栏,右侧选中元素时为该元素编辑窗口,顶部显示项目名和聚焦状态,底部为视图调整,右下角为帮助信息,右上角为项目工具,左下角为用户中心

小程序授权并发布预览,让数据模型生效

使用Zion平台做微信小程序开发,需要微信授权Zion为您的第三方服务商
Zion的管理后台需要在小程序预览成功后才能使用
你可能不知道什么是“数据模型”和“管理后台”
对于没有开发基础的同学来说这是很正常的,完全不必担心。本项目已经建立好了会用到的数据模型,在这里可以理解为储存我们待办事项内容的方式。而管理后台可以让我们对建立好的数据模型进行数据的修改。
点击左侧工具栏中的“发布”,找到“小程序授权”,完成授权后会显示为“已授权小程序”
之后点击右上方“预览”,项目会进行预览准备工作,预览成之后,为了让管理后台生效,需要点击数据库部署,直到部署成功。(如若出现一个预编译报错的警告,点击“继续生成预览即可”。)

已完成页面的制作

找到左侧工具栏的第一个“添加页面”,如果第一个显示的是“添加组件”,那你应该是进入了某个页面的聚焦模式,双击背景空白处或者按"esc"键退出聚焦模式就可以了
将新页面取名为“已完成事项”,新创建的页面会出现在最后一个位置,我们可以通过拖动改变他的位置(鼠标要拖动到目标页面上,而不是页面之间)
双击新页面进入聚焦模式,右侧会出现页面的编辑窗口,在这里我们可以修改页面的样式,我们可以对照待办事项页面完成页面的编辑

1. 修改背景颜色

点击背景颜色下的颜色块,选中右侧“#3”的颜色,其Hex值为“f9f9f9”,(hex值的每两位对应的是RGB颜色的16位数值,00-ff对应000-255);再次点击上方颜色块关闭小窗口
所有的样式修改并不影响小程序的使用,同学可以按照自己的喜好进行修改、探索;这里为了和最后呈现效果统一,方便教学,给到了准确的参数。

2. 修改顶部导航栏

可以看到页面上方的顶部导航栏默认显示的是“Page Title”,我们双击顶部导航栏区域,右侧的编辑窗口会变为导航栏的内容
将背景颜色改为“#0”,也就是纯白
接着点击“样式”旁的“数据”这一栏,下方内容会切换为标题。点击“Page Title”旁的×,将其删除。接着点击下面的“请输入”框,输入“已完成”,按下回车。这样页面的顶部文字就修改好了。
目前“数据”栏已更名为“内容”栏
本教程中“数据”栏指的就是“内容”栏

3. 为页面添加组件

首先制作列表上方内容

他们是由一个图片组件和两个文字组件制作的,在Zion中页面的内容都是通过一个个组件实现的,就像拼乐高一样。计数目前在待办事项页面中显示为“count”是因为它的内容是一个动态数据
从左侧找到“图片”组件,点击将其拖入到页面当中,然后点击选中它。我们可以通过拖动或拉拽它的边框来调整它的位置或大小,也可以通过右侧的编辑窗口输入精确的参数。(16x,84y),(20w,20h)。
在这里xy代表了组件左上角相对于页面左上角的坐标位置,比如(0x,64y),组件就会刚好出现在顶部下方左侧贴边的位置(微信小程序顶部导航栏的高度为64);w(width)h(height)表示组件的宽高。
打开它的“悬浮”,这样这个组件的位置在页面中就不会跟着屏幕滚动而移动,我们不希望这部分内容会因为事项内容的过多而在下拉查看时被向上推掉
接着修改一下组件名称,养成合理为组件命名的习惯可以方便之后对组件的查找和修改,将其修改为“已完成事项图标_图片”,通常我们会用“_”来连接命名中的多个词组。
现在这个图片组件是空白的,没有任何内容。
本次项目会用到的素材已经全部打包在这个压缩包中,点击右侧按钮下载
待办事项小程序项目素材.zip
10.5 KB
点击“数据”栏,“+上传”为该组件上传一张图片。
这里我们选择“已完成事项_icon.png”这张图片
接下来的两个组件我们可以从待办事项页面复制过来编辑。同很多地方的操作一样,在Zion中我们可以通过框选或按住(Mac:comand;Windows:ctrl)+鼠标点击的方式来选择多个组件。双击待办事项页面进入该页面的聚焦模式,选中这两个组件之后我们可以右键点击来复制他们,也可以直接用对应的快捷键来实现,页面会提示“已复制到剪切板”。回到已完成页面的聚焦模式,将他们粘贴到页面当中。他们会保留原来的样式信息,这里需要修改他们的位置大小,组件名称以及内容。
“已完成计数__文字”组件的数据先不做修改

“已完成事项_列表”制作

接下来制作这个部分
这部分内容会根据数据的多少来显示,并且他们是动态数据,所以显然一个一个来制作是不实际的。
因此在这里我们会用一个“列表”组件。我们同样可以将待办事项对应的列表复制过来。将其位置改为(16,120),组件名称修改为“已完成事项_列表”,
复制的组件在修改名称后要记得按回车保存修改
垂直布局模式修改为“充满父组件”,这样该列表即使在内容不够多的情况下也能填充完整个页面,这里的“父组件”指的就是“已完成页面”。
接着双击列表,我们会进入该列表的聚焦模式,就可以对列表中的每个元素进行修改了。
我们可以首先点击“容器视图”这几个字,右侧编辑窗口会变为“空白容器”,也就是这个列表中的每个框。将其高度修改为“78”,别忘了你也可以通过拖动容器的边框来实现,可以看到下面预览的每个容器也发生了变化。然后将垂直布局模式修改为“适应内容”,这样这个容器的高度就会随着内容的增加而增加。
点击图片组件,将其删除(backspace/Del),在这个页面我们不需要显示优先级;需要显示的内容是该事项的完成时间。

动态数据的绑定
到此为止我们都没有进行过动态数据的绑定,而现在项目应该已经预览成功了,先不着急用手机扫码查看
我们点击左侧工具栏中的“管理后台”,“自定义控制台”进入该项目的后台页。
如果提示项目尚未进行预览,我们可以刷新页面再尝试一下,或者查看项目后台是否部署成功,如果没有成功请重新部署
在页面左侧可以看到该项目已经建立的数据表
我们可以回到Zion中点击左侧工具栏中的“数据”来了解一下本项目使用的数据表
账户(account)”数据表是微信小程序默认生成的数据表,用来储存用户的基本信息
todo_list(待办事项)”数据表是我们用来储存待办事项数据的
priority(优先级)”数据表储存了优先级相关的数据,为“todo_list”数据表的数据添加了优先级这个维度的数据
“账户”和“priority”两个数据表对于“todo_list”都是一对多的关系,我们暂且理解为“todo_list”的数据表里可以出现多个同样的“账户”和“priority”中的数据。
有点不好理解?
没关系,这不影响我们完成本项目,我们需要知道的是本项目中的动态数据是由这几个表来实现的;如果想了解更多关于数据模型的知识可以查看数据模型的概念
这里我们需要在后台为“priority”数据表添加3个优先级的数据。
在后台点选“priority”数据表,目前的结果为空,我们可以通过右上角的【CREATE_OBJECT】新建数据
接着如图所示,level这个字段是该条数据的优先级,level_image这个字段是该条数据对应的图标。 
新建三条数据,第一条的level为1,level_image为1的图片,以此类推
结果如图所示,这里我们记一下level=1的那条数据的ID,一会儿会用到
查看一下“账户”这个数据表,目前显示“结果为空”,这是因为还没有人用过这个小程序。
接着,我们用微信扫Zion上生成的预览二维码,登陆小程序后在电脑后台重新刷新页面就会看到“账户”数据表里生成了一条数据
Zion的项目默认会在应用程序加载完成时添加一个用户微信静默登录的行为
因此当新用户扫码加载小程序后,该项目的“账户”就会自动添加一条新数据
再来看一下“todo_list”这个数据表,我们尝试新建一条数据来看一下每条字段的内容
内容我们就填“在后台偷偷加的待办事项”
“account”选择我们刚才登录生成的ID,通常第一个是“1,000,000,000,000,001”
“priority”填优先级1对应的ID,(这里我的是“2”)
点击提交,查看手机上的小程序,可以看到计数已经变为1了。我们下拉一下页面刷新列表,待办事项也出现了。
关于数据模型我们先了解到这里,更多内容可以查看:数据模型的概念

为列表选择数据
回到Zion中,我先来看一下“待办事项”页面中的“待办事项_列表”,在“数据”这一栏可以看到数据来自“列表:todo_list”;
并且列表的排序根据了“priority/level”这个字段进行了升序排序,这样列表中的事项就会根据优先级从最高级1到3进行排序。
同时在下面还对数据进行了“过滤”,这里“过滤条件”有两个:
1. “if_finished”等于“false”;
2. “account_账户”等于“已登录用户/ID”
Zion会根据你添加的顺序来对数据进行过滤
这样“待办事项_列表”就只会有满足这些条件的数据。
了解了这些后找到“已完成事项_列表”,为它选择数据源、排序和过滤条件。与“待办事项_列表”不同的是,在这里我们希望将内容按最近的完成时间排序并且过滤的是完成状态的事项。有的同学可能会问了,“todo_list”并没有记录完成时间的字段呀。
其实这里可以利用“更新时间”这个字段,当一条数据的内容发生了变化时,更新时间会记录这个时间。因此当一个事项的“if_finished”从“false”变为“true”时,它的“更新时间”就可以用作“完成时间”。想要时间最近的显示在前,就要按“降序”排序(过去的时间值比现在的小)。
而过滤条件,我们需设置:
1. “if_finished”等于“true”;
2. “account_账户”等于“已登录用户/ID”
操作演示,先完成1部分,再完成2部分
已完成事项名_文字
为列表选择数据后,我们双击它进入聚焦模式
选择文字组件,将其位置大小修改为 255 x 22 | (40,16)
垂直布局模式在复制后会变回默认的固定高度,这里还需要修改为“适应内容”,将组件取名为“已完成事项名_文字”
另外由于是已完成的事项,这边我们为其添加一个“删除线”的“装饰线”,装饰线颜色改为#000000
接下来绑定其数据,这里需要显示的是事项名
删除“文字”,然后点击输入按钮,这里我们会用到“项数据”这个数据类型
选择“项数据”-“todo_list_(组件序号)”- “item”- “todo_name
按图片数字顺序选择
绑定之后会看到列表组件的容器中的内容也变成了“todo_name”,在Zion中,动态数据会默认显示为字段名
你也可以在“设置”中打开“动态数据显示全路径”
底部留白/组件树
仔细的同学可能发现了,在“已完成事项名_文字”组件下方有一个名为“待办事项列表底部余量_文字 2”的空白组件。它的作用就和它的名字一样,是为了让这个容器的底部始终保持一部分的空白部分。
找不到组件?没关系,这里正好有一个小技巧教给大家:
当你在某个元素的聚焦模式下,左侧的第二个工具会变为“组件树”,点开它就可以看到这个页面的元素会像许多设计软件的图层一样呈现出来。展开“已完成事项_列表”,在空白容器中我们就可以看到那个空白的文字组件。
我们将其名字改为“底部余量_文字”,拖到容器底部,左侧和todo_name对齐,然后复制粘贴一份用来制作完成时间的组件。
完成时间_文字
将其位置大小修改为 254 x 20 | (40,42),名称改为“完成时间_文字”
文字颜色改为:#96a6de,字号:12,透明度:100,行高:16;在数据栏先输入“完成时间:”,接着添加项数据中的“更新时间”。然后点击我们添加的“更新时间”这个项数据,对它进行格式的修改,将其日期格式选为“日期时间”,然后点击“保存”。
对动态数据进行修改后要记得点击“保存”
已完成_开关
将复制过来的“未完成_开关 2”改名为“已完成_开关”,接着在数据栏,修改“selected”的值为“true”,这样开关就显示为打勾状态了
我们稍后再为这些组件添加交互行为
远程数据:count
退出聚焦模式,在了解了动态数据后我们可以为“已完成计数_文字”绑定数据。
在这里我们会使用“远程数据”这个数据类型。首先选中待办事项页面,来看一下这个页面的远程数据,可以看到一个名为“todo_count”的远程数据:
回到已完成页面,为其添加一个远程数据,取名为“finished_count”,类型选择“todo_list”。
关闭限额,请求类型选为“订阅”,
添加两个过滤条件
1. “if_finished”等于“true”
2. “account_账户”等于“已登录用户/ID”
接着我们点选“已完成计数_文字”组件,为其修改数据
这样已完成页面中,除了交互行为和底部导航栏以外的内容就都完成了

底部导航栏

我们来为待办事项和已完成这两个页面添加底部导航栏
在设为“初始屏幕”的待办事项(主页)下方可以看到“底部Tab栏”工具
点击之后我们可以打开“显示底部Tab栏”,
打开后我们可以在“底部导航栏”编辑导航栏的背景颜色:#0(#ffffff),未选中的字体颜色:#838790,和选中时的字体颜色:#4(#4076ff)
接着我们点击页面一,也就是底部导航栏最左侧的页面,这里“目标页面”已经默认选择了主页。我们将文本改为“待办”,从素材文件夹分别为“图标”、“选中时图标”上传“待办_未选中.png”、“待办_选中.png”这两个图片。
同样,为页面二编辑已完成内容
编辑好之后关闭页面就会自动生效底部导航栏
为页面添加导航栏之后,通常我们需要为页面设置一定的底部余量,防止内容被导航栏盖住。选中已完成页面,将“填充时底部余量”修改为“49”(底部导航栏的高度)。

添加新待办页面的完善

在开始完善本项目的最后一个页面前,我们可以来思考一下这个项目的交互行为逻辑。
  1. 用户可以通过底部导航栏跳转“待办事项”和“已完成”页面
  2. 用户可以点击开关按钮选择事项的完成状态
  3. 在“待办事项页面”点击“+”按钮会跳转到“添加新待办页面”
  4. 在“添加新待办”页面可以输入待办事项内容并且选择优先级,添加新待办
在Zion中实现交互行为通常会为组件添加特定的“行为
现在我们来给“待办事项页面”中的“+”按钮添加跳转到“添加新待办页面”的行为
选中“添加待办_按钮”,在“行为”栏中为“点击时行为”添加行为“路由”-“跳转”-“添加新待办”。
你也可以通过键盘输入“跳转”找到该行为进行添加:
添加完行为后可以点击打开编辑该行为下的设置,这里我们不用修改“转换”方式,选择默认的“推入页面”即可
来到“添加新待办”页面,这里我们使用了两个新的组件用来提供内容的输入和优先级的选择。他们分别是“文字输入”和“数据选择器”

事项名_文字输入

选中“事项名_文字输入”这个组件,在样式栏中我们为其“占位符”输入“添加待办事项”,占位符内容会在没有内容输入的情况下显示。
接着打开“自动聚焦”,这样我们在跳转到该页面时就是自动选择这个文字输入框准备输入。

数据选择器

该组件在本模板中已经全部制作完成,它请求了“priority”这个表的“level”字段的数据,让用户来选择事项的优先级。想了解更多关于可查看:数据选择器
在这里我们需要实现成果展示中的额外功能点2:选择优先级时,右边会出现对应的优先级图标。
因此我们需要用到一个图片组件,实际上这个“优先级预览_图片”组件也已经在页面当中了,只不过被数据选择器给盖住了。
我们可以在“组件树”将其层级向上拖动,它就能出现在数据选择器之上了:
然后在数据栏为该图片绑定图片源,在这里我们的图片需要根据输入框选择的值而变化。
可以直接选择“输入框”-“数据选择器”-“level_image”来实现吗?我们可以尝试一下,然后发布预览,可以发现预编译报错了,信息是“Unsupported inputs item type -> IMAGE”,这是因为数据选择器的数据是“level”这个字段的类型:整数,并不是图片。
因此我们需要另外一个办法调用到“level_image”这个数据:“远程数据
退出聚焦模式,回到“添加新待办”页面,在该页面的远程数据下可以看到一个已经创建的远程数据“level_selected(选中的优先级)”。
它调用的是“priority”数据表,过滤条件是“level”等于“数据选择器/level”。这样在用这个远程数据的“level_image”时就会是选择的优先级的图片了
我们可以根据不同需要创建“远程数据“来满足我们对数据的调用
现在我们只要回到“优先级预览_图片”,为其绑定“level_selected”远程数据中的“level_image”就可以了。

确定添加_按钮

为按钮添加行为之前我们想一下它实现了什么交互:
  1. 在点击按钮之后,会新添加一个待办事项,也就是在“todo_list”中添加了一条数据,并且将“事项名_文字输入”中的内容和“数据选择器”中的值添加到数据表对应的字段。
  2. 在完成添加后跳转到“待办事项”页面,给予用户反馈并且防止重复添加相同内容
  3. 待办事项的内容也会同步更新
  4. 当输入框内没有输入内容时按钮呈灰色,点击会显示提示
因此在这里我们会用到“修改表数据”、“跳转”、“刷新”这3个行为完成前3点。
用“条件式容器”组件,“重计算条件”、“显示提示”行为来实现第4点。

修改表数据

1. 选中“确定添加_按钮”,在行为栏为其添加点击时行为:“请求”-“修改表数据”-“添加 todo_list
当然也可以键盘输入“添加 todo_list”直接搜索
2. 添加后点击打开该行为进行编辑,在这里我们需要为这条数据的各个字段选择参数
3. 新添加的事项默认是未完成的,所以“if_finished”修改为“false
4. 事项名是“事项名_文字输入”中的内容,所以“todo_name”修改为“输入框”-“事项名_文字输入
5. “account_账户”选择“已登录用户/ID”,也就是谁添加的这个待办事项
6. “priority_priority”选择“输入框”-“数据选择器”-“ID”,这样数据就关联上了想要的优先级

刷新

通常在“修改表数据”行为成功后我们需要对相应的组件进行“刷新”,让修改后的数据能及时显示出来。
1. 在下方找到“成功时
2. 在这里添加一个“刷新”行为
3. 添加后打开该行为,添加要刷新的对象
4. 这里我们需要刷新“待办事项”页面本身
5. 和其中的“待办事项_列表”

为开关完善行为

学会了“添加表数据”和“刷新”行为后,我们趁热打铁为“未完成_开关”和“已完成_开关”完善行为的绑定

未完成_开关

先回到“待办事项”页面,打开左侧“组件树”,在“待办事项_列表”下的空白容器中找到“未完成_开关”,可以看到在行为栏下已经添加了“更新 todo_list”的行为。
点击打开可以看到,这里只修改了“if_finished”的参数为“true”,也就是将事项的状态变为完成,其余的参数都没有输入。
在更新数据时,如果参数留空,那就不会对这些字段进行修改。
另外我们需要为修改的数据添加过滤条件,避免对非目标的数据进行修改,在这里使用的条件是“ID(todo_list)”等于“项数据中的todo_list/ID”。
确保了我们修改的仅是开关边上对应的这条事项。
然后同样,需要在成功时添加“刷新”行为,对象为
  • 待办事项
  • 待办事项_列表
  • 已完成
  • 已完成事项_列表
添加已完成页面的刷新对象

已完成_开关

同样的我们为“已完成_开关”完善“更新 todo_list”行为,这里唯一需要修改的参数是:将“if_finished”修改为“false”。 
然后完善需要刷新的对象:“待办事项_列表”和“已完成”

跳转

回到“确定添加_按钮”
1. 再次点击“刷新”行为编辑栏顶部可以将其收起。
2. 刷新之后,我们在成功时再添加一个跳转的行为,跳转到“待办事项”页面。
由于“待办事项”是一个拥有底部导航栏的页面,所以这里跳转的转换方式默认为“跳转到TabBar页面”。小程序执行行为时会按照我们添加的顺序执行。

条件式容器

为了完成按钮的最后一点交互设计,我们需要利用“条件式容器”这个组件对“事项名_文字输入”的状态进行判断
条件式容器可以在同一个位置根据情况的不同显示不同的内容。了解更多可以查看:条件式容器
我们先将“确定添加_按钮”拖到一旁,向页面拖入一个“条件式容器”,修改其位置大小:343 x 38 | (16,614)
打开“悬浮”,将其“垂直流方向”改为“从下向上”,这样该组件就会始终在屏幕下方的位置,将其名称改为“添加按钮_条件式容器”
在样式中将其“背景颜色”改为透明,将A(alpha)值改为“0”
来到数据栏,在这里我们可以为条件式容器编辑可选状况。
对于“确定添加_按钮”这个组件,我们只需要它显示两种不同的状况:
  1. 文字输入有内容,是“有效输入”的状况,可以点击触发“修改表数据”行为
  2. 文字输入无内容,是“无效输入”的状况,在点击时给予显示提示
在“新状态名称”这栏输入“有效输入”,点击“添加”按钮,新添加的状况就会出现在“可选状况”中。然后再添加一个“无效输入”的状态。
条件式容器总会以从上到下的顺序来判断状况的条件是否满足
当上方的状况条件满足时,会优先显示该状况,忽略下方的状况条件
我们可以拖动状况来为他们排序,将“有效输入”拖至最上方,“空白项”拖着最下面。然后双击这个条件式容器,进入该组件的聚焦模式
可以看到3个“条件式子容器”,“有效输入”、“无效输入”和“空白项”,他们分别对应了该组件在这3个状况下的内容。
通常我们不对“空白项(default)”状况进行修改,对需要显示的状况都做新添加
接着我们选择“有效输入”子容器,可以通过点击左侧“组件树”中的“有效输入”,或点击容器上方的“有效输入”这几个字
在数据当中为其添加显示该状况的条件:
  1. 点击“条件”,打开条件编辑窗口
  2. 点开下拉窗口,打开条件判断类型选择栏
  3. 选择判断类型“非空
  4. 运算数选择“输入框”-“事项名_文字输入”
那接下来是不是要为“无效输入”选择“事项名_文字输入”“为空”的条件呢?
其实这里条件保留为“总是”就可以了,只要“有效输入”的条件不满足,就显示“无效输入”的状况。
设置好条件后,来制作两个状态的按钮。
可以在“组件树”中找到“确定添加_按钮”复制进来,这样就不需要回到页面中操作。
复制粘贴进“有效输入”的按钮保留了其“行为”,我们无需再做修改,将其名称修改为“有效确定添加_按钮”。
再复制一次按钮到无效输入子容器中,名称修改为“无效确定添加_按钮”。在样式中将按钮的“背景颜色”改为“#C6C6C6”。
添加“显示提示”
在行为栏为“无效确定添加_按钮”添加一个“显示提示”的行为,点开该行为,输入标题“待办内容还没写呢!”
做好按钮的条件式容器后我们退出聚焦模式回到页面,把之前的按钮删除

重计算条件

现在还差最后一步整个小程序就制作完成了,我们需要为刚才制作的“添加按钮_条件式容器”添加相应的“重计算条件”。这样当判断它的情况发生改变的时候,该组件才能及时的切换显示状况。
在这里我们需要为“事项名_文字输入”在改变时行为添加“重计算条件”,也就是当用户在输入框改变输入内容的时候
在添加重计算条件的时候会直接选择要重计算的对象

预览测试-优化

至此本小程序的制作就完成了!最后我们可以删除“模板使用指南”这个页面,然后发布预览测试一下小程序。
预览成功后,用微信扫码登录小程序。
在后期制作复杂项目的时候可以在关键步骤后进行预览测试,及时发现存在的问题进行调整
我们可以针对每个想要实现的功能点在小程序上做测试,如果发现有不符合预期的地方,正好可以用待办事项记录下来。然后回到文档相关目录的位置对照查看是否有制作步骤的出入。

下一步?What's next

相信通过“我的待办事项”的制作之后,你已经掌握了Zion的基本使用技能,
可以微信扫下方二维码进行一个课后测试
也可以在这个项目的基础上尝试实现一些新功能:
  1. 待办事项创建后过了多久的时间提示
  2. 设置事项预期完成时间和倒计时
  3. 团队/组织的To-do list
或者去挑战制作一些更复杂的项目,可以是能解决你实际需求或感兴趣的内容。
Zion作为一个开发平台虽然不要求你具备代码知识,但是熟练掌握这个工具需要学习和练习,而最好的方式就是去用它去完成实际的项目和需求!
别忘记遇到问题可以随时在帮助中心查询相关内容,或者访问 Zion学院 查看视频教程
2022-11-10
12 8