【Zion项目实战】资源付费小程序开发（1）

　　前面2篇文章大概介绍了Zion的使用方法，今天开始来聊聊我的小程序是怎么制作的。

点击图片预览小程序

　　在前面的文章已经介绍了小程序的页面组成：首页、详情页、分类页、账户页等，今天先来分享一下首页的制作过程。

先声明一下：我也是新手，在数据表设计和开发过程中，可能存在一些不是最优操作的地方，还请淡定！欢迎与我交流，一起学习。

创建数据表

无论是web应用，还是app应用，还是小程序应用，所有的应用如果只有UI没有数据，那就是一空壳。这些数据都来自后台的数据表，我为我的资源单独新建了一张表，字段如红框所示，可以自己看下，这里就不做太多解释。可以对照小程序进行比较，很容易理解。

创建页面

点击左侧“添加页面”按钮，创建一个名为“小程序首页”的页面

修改背景色

双击“小程序首页”页面，进入聚焦模式，将背景色设置为“＃6A5AE0”，同时双击顶部导航栏，一样配置背景色为“＃6A5AE0”

在顶部导航的配置页面，我们切换到“内容”标签，将该页面的标题设置为“UI8下载”，可以看到页面中标题已经同步修改。

添加搜索框

从左侧的组件面板，按住“文本输入”组件，将其拖拽到页面的可见区域，当页面边缘出现橙色高亮时松开鼠标，就完成了输入框的添加。

下面开始对输入框进行设置，如图所示，坐标设置为12，76，尺寸设置为351,40，如果你希望修改搜索框的默认文字显示，可以在内容标签的占位符字段中输入。

添加列表

使用添加“输入框”的方式，将“列表”组件拖拽到页面中，完成后，你会看到有三个大色块，这就是列表组件了。

在列表组件的右侧，红框处，我们可以对列表进行纵列的数量设置，以及间距设置，假设我们将纵列设置为3，间距设置为20，具体效果如下图所示。这里只是做个演示，我们使用默认的即可。

设置列表数据来源

选择列表，在右侧“内容”标签下，将数据源设为远程数据，将哪个列表选择为我们的资源表，这里设置的意思是告诉程序数据从哪个表进行获取。

下一步将过滤条件设置为“无过滤条件”，无条件标识的意思是展示资源表中所有数据，大家可以看到列表右侧有个感叹号，这是因为默认情况下是有筛选条件，但是没有设置条件，所以工具自动进行报错，当你选择无过滤条件，泽感叹号消失。

设置展示字段

完成了数据来源的设置，下一步开始设置数据的展示，双击列表组件，进入列表的模式。在页面中放入一个图片组件，左上角对齐，并且设置尺寸为351x240。

这是你会发现页面怪怪的，那是因为图片组件的高度已经大于容器的高度，所以我们要将容器设置的比图片还要高，这里设为280，并且将背景色设置为“#5B4DC3”

设置完成可以看到图片下方多出一块紫色区域，正好可以用于放置资源的标题。我们在拖入一个文本组件，调整好位置，把颜射设置为白色。

设置数据绑定

完成上面的组件配置，我们就来到了最关键的一步，数据绑定。顾名思义，我们需要设置图片组件和标题组件的数据从哪里获取。

大家应该还记得，前面我们对列表内容进行设置的时候，选择的资源表，对了，数据就从资源表进行获取，下面来看下实际操作步骤。

选择图片组件，在右侧设置面板中，将“图片源”设置为图片

然后点击下方加号，依次选择列表数据/你的表名/item/IMG字段，表示图片从img这个字段中获取。

同理，把标题字段的内容，设置为列表数据/你的表名/item/title字段

完成以上配置后，双击返回页面的聚焦模式，选择列表组件，将布局模式改为“充满父组件”

配置搜索框

在一开始，我们就设置了一个搜索框的存在，最后，我们选择列表组件，为其添加过滤条件，有人会问，刚刚为什么设置为无过滤条件，现在又要设置过滤条件呢？

因为刚刚的演示，是为了展示列表的配置，而不是搜索框，现在设置搜索框，就需要将过滤条件开启。

这里将过滤类型设置为“有过滤条件”，然后惦记右侧+，选择title，在title下方下拉框中选择“相似（不区分大小写）”，这个意思表示用户在输入框输入关键词时，不需要区分大小写，因为我们做的是国外资源，所以大小写很敏感。

最后，选择下拉框下的橙色+，选择输入框。

预览

完成最后的配置，我们点击右上角的预览按钮，就可以看到最终效果了。

今天就先分享到这里，我们就完成了首页的所有开发功能，下一期文章，我们将分享如何从列表页，进入内容页。

喜欢这类文章的话就请帮我点个赞，点个在看吧。

谢谢！

点击图片预览小程序