霍常亮淘宝客app开发系列视频课程第29节：项目初始化(底部导航)原创

哈喽，大家好，我是霍朝阳，非常高兴和大家继续通过视频的方式沟通与交流。那么我们这套课程呢，从。开头到现在啊，这是第二期的开头到现在我们已经录制了28节课，那么前面28节基本上都是属于理论居多啊，都是属于基础，那么我们学完了前面28节课，那有同学可能说，诶，我现在连正经800的第一个。组件第一个代码，而且我自己想要的这个APP都没有落实呢，啊，什么时候可以落实，我告诉你现在就可以落实，从现在开始这节课开始，我们就需要在实战中去规划，然后每一个代码，每一个组件都是要针对咱们的目标。去落实。好，那么。我们现在还是打开一个h builder之后呢。

我们重新建立一个。建立一个项目，在这里呢，我们选择UNAPP，然后呢，下面有多个模板，那么你呢，可以每一个都看一看啊，这个是我们作为一个UN开发者的必备工作，因为人家开发的能够上首页的一般来说都是比较不错的，你每一个都看一看，也许有你感兴趣的，有你需要的，那么就可以大幅度的降低你的工作时间，会减少你不必要的一些劳作。好的，那么我们现在呢，带着大家都来看一看。这里呢，我暂时先不启用unlo，因为呢，我们只是先带着大家看一看这些模板。

啊，那么我们进入首页啊，那么正常来说呢，首页都是在配置着按地插这个页面。我们可以预览一下。它应该就是一个H的图标，然后下面有个哈，那我们来看一下。对吧，这个呢，就是一个默认的模板，它呢只给你填充了一些非常非常基础的代码。好的，我们现在把它停止运行，然后我们再建立一个。一杠二第二个。那么这个呢，要比上面的要多一些了，再来创建看一下。诶，你看单纯的从文件角度是不是就比之前要多了。

然后我们可以简单的看一下read me，那么这个呢，就是作者对于啊这套源码的一个简单介绍。好，那么我们也可以在配置里面，然后找到。诶，那像这种说配置里面没有直接就能看到ID叉的，那么怎么办啊，我们可以在这边。看一看配置中数字中的第一个项表示的是启动项，所以说我们想要看入口啊，或者想要看启动项第一个页面，咱们可以在这里找配置对吧，Super。然后。这个呢，应该是一个选项卡啊，就是底部的那个东西，我们来看一下。

有一点慢啊，有一点慢，因为它这个东西就看起来就比刚才那一个要多很多了。有点慢，稍等一下。对吧，那么现在我们就可以看到。有很多很多的组件，包括说视图。基础内容，表单导航。对吧，那么这些呢，我们都是可以去挨个。去调用去使用的，那么我们要是有这里面需要的相关的功能，咱们直接可以copy它的源码啊，能够节省一些工作量。

视图容器。对吧，那么你都可以去打开看一看。横向滚动，竖向滚动。滑动视图，那么这种呢，我们通常都是用来做首页的幻灯片之类的。走势图啊。这个呢，用的不是很多啊，有时候我们可能会看到类似于验证啊，验证里面可能会有。这个呢是一个地图。你如果说是做的是企业网站啊，你可以加一个我们的地址啊，然后用这个基础的组件，基础内容。

在这里面呢，就是文字，就是这个输入法之类的。对吧。主属性。表单按钮。对这些呢，你可以根据你的需要啊，你喜欢哪个，然后你就找到它所在的位置，把这个代码复制过去，那么咱们随便举个例子，你比如说我就想要这个代码，那么我想找到他。怎么办？那么我们来看一下啊，这个页面操作它是在表单组件里边，然后呢，我们在这边找到表单组件，对吧？表单组件。那么这里肯定是没有写这个代码的，因为它肯定不是把所有都写在一个页面啊，会写在表单这个对应的页面，那么我们现在呢，再接着往下找和找表单组件所在的页面。

那这里呢，就有一些常见的方法了，你比如说我们。对吧，页面button，那我们直接在自定义组件，咱们之前课程讲过，在自定义组件里面，咱们就找和button相关的，对不对，那么直接就可以跳到button这边的页面。这是一种方法，那第二种呢，有人说，诶老师我没有学习过这套。原码的使用方式，它里面有这么多文件，我怎么找啊？每一个都删一遍，每一个都看一遍的话，太耗费时间了，有没有别的办法啊？如果说你现在手里拿的是一套你从来没有使用过，没有见过的圆盘，一者亦或者说是这套圆码的做着，人家啊，没太把你当回事儿说我。拿了一套源码，就是人家自己看能自己看懂对吧，他这里名字他不叫八字，叫别的是不是也可以对吧，人家可以自己改别的名，那么这种情况下我们想要查。

怎么着，就是说是一套不规则的。名称的源码，那我想要查指定的。组件怎么看，比如说我现在想找。按钮。你看上面的字啊。对吧，页面主操作，那么我们就直接。在这里查找，然后。查找字符串。这个时候呢？我们可以在这里进行对于字符串的一个搜索，同时呢，我们还可以在多文件中进行搜索，对吧，当前文件和多文件，那这个时候我们直接搜索一下页面，主操作页面。

这个页面吧。我们在这里可以搜索一下。页面主操作，然后我们回车。之后它就会把搜索结果展现在这里的搜索栏里面啊，然后我们快速双击一下，它就能跳转到对应的这个位置，然后我们可以看一下和老文一开始当你熟悉的时候，你找到的什么样的啊，这就两种方式，第一种呢，咱们就是凭经验啊，在左侧你找和靶相关的。这些呃组件啊，自定义组件，第二种呢，就是你如果说你对这套源码你不熟悉，或者说你拿到的这套源码，它不是一个规则的源码啊，你就可以直接在搜索里面进行搜啊，注意呢，你可以搜的不是说当前这个文件，而是说多文件啊，这样的话，它会自动系统会自动把所有的文件夹都给你搜一遍。

相对来说呢，就比较。节省时间啊，提高效率对吧，那我们到这之后那就简单了，那我想要。这个自定义组件，我们直接就把这个自定义组件搬过来，对吧，我想要什么页面主操作对吧，我就把它。支过来，然后上面这个title呢，Title指的就是这个这个页面的这个title。然后这个will啊，Button啊，对吧，我想要什么叫做搬什么。不要的我就给它删除掉啊，然后下面呢，我们之前也讲过多次嘛，这些就是一个模板模板块啊，这个是一个脚板块，下面是样式块啊，你需要什么就把它搬过来对吧，这个呢，就是一个简单的方式说我们想要。

避免啊，说重复造轮子，别人都已经写好了，那我们直接就可以进行一个复制调用啊，你觉得说这个样式好看，就直接可以搬过来用啊。好，那么这个就是一杠二这个呢，还是官方给的啊，然后呢，我们再多看几个。一杠三。第一个第二个，第三个。呃，作者迪，这也是官方的，呃，这个咱们就不看了嘛，这是关于一个云的操作，算了，都到这了看一下。这个是关于一个云的操作啊，同样呢，我们也可以看一下啊，这边的一个主页面对吧。

然后我们在这边可以看一下它的入口，然后还有一些相关的信息。正在编译之中，因为这个呢，它只是演示了一个关于云的一个调用啊，然后并不是我们主要看对吧，这个是关于一个云的调用，那么你可以在这里进行一个展示啊，和刚才的思路是一样的，你想要什么功能啊，在这里面如果说有一样的，那你就直接copy一下。其实呢，关于这个云，之前讲的云函数，云输入库，云存储对吧，也也就是增删改查那些事儿，咱们之前也都讲过。查询。新增更新删除对吧。

一杠一杠四一杠四。这个是基于UNIAPP的UI组件库，也是一些基础的。组件啊，我们也看一看吧。呃，这个呢，就是一个简单的介绍页面啊，没有什么太多的内容。

2345。命管理系统技术框架。这个呢，是d cloud官方出的一个产品啊，所以说相对来说不会有什么安全的问题。

我们后期编写的时候，嗯，我可能说大部分代码呢，还是会带着大家走一下，但是实际上你真正说做项目的时候，有些重复的东西，你可以直接copy啊，说咱们能够读得懂看得懂就行啊，你不用说每个字都实际去敲。因为未关联相关空间，请在右键关联，这个呢，还需要关联个空间，这个咱们就不关联了，太浪费时间了。这个是云端一体登录，也是一个登录的一个模板。

支持PC的新闻模板啊，这个我们可以看一下零，这是12345。六七啊，第七个。呃，没有入口，没有一袋的吗？应该就是他了。

啊，那我们现在所看到的呢，就是一个非常简单的一个新闻资讯的一个列表，其实我们后期想实现的效果就会和他有雷同的地方啊，有就会有一些值得借鉴的，比如说我们可能也需要有一个顶部的景象啊，比如说我们也需要有一个。这种。图片文字对吧，然后显示就是一些下面的选项之类的，我们可能也需要有这样的一个东西。那么到时候你如果也有这方面需要，你就可以直接在这个模板上进行更改。或者说你看他提出哪一部分不错啊，你可以直接进行一个调用。就我觉得我们学完了前面20多节课，基础的代码应该都是可以看得懂的啊，咱们大的方向上其实就是三大块对吧。模板块脚板块样式块，那这里面。

你把它打开。这些凡是带class的全都是样式的，就是控制它的这个上边框下边框啊，颜色呀，左右啊，间隙呀，就是这些东西。对不对。我们都可以看到paper，一般就是底部选项卡呀，导航啊这个东西。然后带有at click啊，这个就是事件以右键，然后能够跳转到对应的位置，一跳转的话，我们。诶没套出选中一下。这样的话也会很大。他都可以。都给折叠了啊，然后打开。光标移动到这，看这个小绿点对吧？啊，我们可以跳转到对应的位置。

这些呢，就是官方已经写的，他觉得诶已经算是比较完善的，咱们可以直接用的。呃。这个也可以，咱们也可以看一下啊。应该好像第九个吧。好，然后我们点击创建。啊，这个还是付费的，那就算了吧，对吧，咱们学来学去不就是为了能够省点钱吗。我们点击一下同意，然后呢，咱们先看一下它的样式，应该他不会说上来就让我们付费吧，应该他可能是一部分付费，要是上来就付费，谁买呀。哦，你看还真不错，也页面确实是挺多的。

看起来这是优惠券，这是喜欢订阅订单产品搜索。订单。我们随便打开一个啊，看看能不能给它加载出来，咱们看看效果对吧。其实像这种收费的呢，咱们。啊，就这么一个东西啊，大听。未关联相关服务空间，那可能是因为它是收费的啊，所以说咱们这边还没有办法去看啊，没关系，咱们就不看了，反正咱们只是带着大家走一下这个思路，让你看看说有没有之前已经比较成熟的，咱们可以直接在他的基础之上进行改进，或者说。

直接copy他的一些源码。啊，那么大概呢，咱们能调用的也就是这些啊，其他的几个呢，我就不带着大家去看了，还有其他的几个。像什么匹配的呀。的，这个是也是最最近一两年新优化的，以前呢是几对没有Q，现在DCQ了，就是手机端的意思。然后其他的呢，呃，Color UI这个是关于一个样式这个UI这个用的也是比较多的啊color。然后我们我们也可以看一下。应该是最后一个了吧。12345。六七八九十，11 12。我们把没用的给它关掉。

一杠12。好的，那么现在你所看到的就是一些组件。然后操作条啊，导航啊，卡片列表啊之类的，对吧，那么这些呢，是一个样式就让人看起来哎，看着比较顺眼，比较好看，那么如果说你有这方面的需要啊，你也可以对它进行调用，咱们。想用什么直接在这里面copy一下就可以，相对来说还是比较比较漂亮的。好的，那么我们刚刚呢，就是对于。呃，这个h builder创建UNI派能够能够直接站在剧院肩膀之上，别人写好的那些成功的组件的一些前端的素材，咱们如何去读取，去学习，去使用啊，但是说不可能说我。

三五分钟的时间，把所有的模板，所有代码都给你讲一遍，那不可能不现实，咱们呢，只要知道在这个地方有几个成功的东西啊，大概这些东西能提供哪些作用啊，后期呢，我们想要什么，可以在这边来直接copy啊，能够了解到这些就可以了。啊，那其他的这些没用的，咱们就把它删掉了，占地方。万。

好的，那上面几个呢，我们暂时先不删了，因为这个都是我们和课程相关的，等到咱们课程录制完毕之后呢，我还要需要给大家打包啊，因为你将来学习的时候可能会用得上啊，这些虽然说很多和我们实际项目没什么直接关系，但是跟你学习会有关系，对吧，比如说我想看看这里面的某些代码。

这个咱们。没有把它删除掉，都是用屏蔽的方式进行了一个。隐藏啊，到时候你需要调试啊，你直接把这个俩引号删掉就可以了。那么现在呢，我们再新建一个。项目，然后我们选择啊union APP，这个时候我们可以启用一下这个UN云。因为我们要正要正式开始进入咱们的项目撰写了对不对，起个名字吧。淘宝客啊，然后我们点击一下淘宝客零一，因为这可能是应该算是002，应该算是第二个项目第二期嘛，对吧，咱们。

咱们啊，这是第二期对吧。好，我们现在呢，点击这里的创建。这个时候我们需要给他配套一个。对应的云间。对吧，因为我们这是一个新的项目，跟之前的呢，尽量不要重复啊。我们关联云。之后这三个都是咱们之前做测试啊之类的就已经有的，对不对，那我们现在呢，再重新建立一个。比如说淘宝客。是002吧，咱们刚才起的这个名字。对，淘宝和002。

淘宝客002。然后我们点击一下这里的关键。对吧，现在你说人家官方既然给你提供了免费的数据库，免费的存储，它干嘛不用，对不对，那么我们这边再刷新一下。选中，然后关联。这个时候呢，我们就已经成功的进行了一个关联，对吧，然后呢。这个还是上一期的，咱们把它关掉啊，没有用了。咱们现在呢，已经创建完了云服务的存储函数之类的，对吧，那云cloud首次使用咱们还需要怎么样。他需要给他初始化一下对吧。你看啊，在这里面全都是空的，什么都没有，你刚刚来，你啥都没有，你需要对它进行一个初始化。

那么我们现在选中它，然后运行云服务器空间初始化向导解析一下。这个时候啊，我们已经选中了，然后下一步。然后部署项目下的所有云函数公共模块及得得得，那么如果说你要不勾选它。那么你就失去了调用云函数和公共模块的部分功能，对吧，你有兴趣的话，你也可以点击查看啊，去看一下。啊，我们把它勾选之上，然后点击开始部署。这个时候啊，正在上传公共模块，正在安装公共模块，依赖公共模块上传完成，对对对对吧。

这个呢，就是最开始的一个，你首次使用的时候需要有一个初始化。我们现在要对数据库进行一个初始化的操作，然后呢，上面的这个是。Unlo，然后下面是它的类对吧，就相当于是一个数据库啊，这里面呢，现在就一个文件。对吧，啊，这是一个基础的介绍。然后我们首次使用。在这。可以创建一个。黑色文件。在本文件中可配置云数据库的初始化。然后我们把它复制。

在咱们的浏览器里面打开。这个时候呢，你就可以看到一个初始化数据库的一个相关的信息。那么到这里呢，我们就可以看到它呢，有一个介绍对吧，就是关于我们导入数据库这样的一个方式。其实呢，我们在后台就是在这边也可以进行一个数据库的导出，导出对吧。但是呢，咱们第一次使用你根本就没得倒，所以说我们需要从头到尾去新建。那么如果说后期你做其他的项目啊，说你是买了别人的源码啊，或者说你是，呃。自己。两个程序之间。相互copy，那么你可以去使用我们刚刚所说的这个。

数据化格式的方式进行一个初始化，那么可以更加简单的去将A数据导入到B数据之中，但是呢，我们现在因为整个流场都是我们摸着石头鹅从头来，所以说呢，我们是没有。数据库可以去导入的，那咱们就需要去手动创建一个，对吧，我们试想一下啊，你在这里我们要创建哪些数据库表。咱们到这个页面之后，它呢，下面有几个可选项，那如果说你有兴趣的话，你都可以去看一下，咱们随便举一个测试对吧。创建选中的表。和我们之前讲的数据模板，还有那些组件，自定义组件是一样的，因为有些东西呢是重复的，你要是觉得别人做的不错，那你可以直接copy来，这样可以节省你的时间，对吧。

这个呢，就是它的数据库表的结构。然后我可以再新建。哦对，忘了跟大家说了啊，因为这个呢，它只能是创建一个数据库，对吧，一个数据库你可有多一个表，但是一个new cloud空间你只能有一个数据库。这个呢，就是一个演示啊，那么我们看完之后呢，你觉得如果说不符合你的需求，可以把它删除掉。创建时间、IP内容、用户。菜单一菜单二菜单三菜单四。

啊，我们再看看第二个。有你ID啊，这个应该就是一个后台登录的一个系统。第三个啊，文章，文章类别评论。第四个电商。用户商品商品类别、商品评论。吉他。通讯录啊等等等等，那么你每一个你都可以去看一看，那么如果说有你需要的啊，有你觉得用得上的，那你就能够减少一些。减少一些工作量对不对。文章，文章类别，评论，收藏文章，那么如果说你要是多个勾选呢，它每一个都会给你整进去。用户角色权限，这个一般都是能够发文章之类的，验证码，登录日志，设备信息，订单不很全啊，看的很全。

那么我们新闻可以留一个，因为我们正常的话，你展示的时候，你首页总得有点内容吧，那么可能就是一个文章页，就是咱们所说的这个。线报啊，现报消息啊，对吧，然后你还得有一个我的对吧，然后还有我们计划还得有一个收藏。收藏也有了，文章也有了，文章类别跟评论，呃，有没有都可以，咱们原计划呢，没有打算找评论，但是后期如果说涉及到了，咱们也可以加上评论文章类别。也可以。那么我们。商品。商品咱们暂时不需要一个新闻列表，然后再来一个UIID，但是这里面这么多的。信息啊，咱们并不是说每一个都需要。

我们挑几个吧，用户这个咱们有需要。然后。新闻里面。我们要的应该就是一个文章，然后还有一个类别，咱们可以用它来放一些标签，比如说是天猫啊，淘宝啊，京东啊，还是什么什么什么的。Warmer。行，咱们大概呢，暂时先创建这三个，然后不够的话后期可以再加，这就跟你放官点菜似的。当然说你要是觉得这三个不能满足你的需求，你也可以自定义对吧，你在这儿你可以手动创建一个啊，然后自定义也可以。

好，我们来看一下这个是。用户的对吧。我还挺多。这是用户的一个信息。然后这个呢，是。啊分类对吧，应该是分类就是我们用来比如说存到京东啊淘宝啊这个标签之类的。然后下面这个呢，就是一个文章ID。大概呢就是这样，然后呢，如果说觉得这些不够啊，像评论之类的，咱们不够的话，后期可以再增加啊，咱们暂时先金。好，那我们在这边创建了一个数据表之后啊，怎么把这个数据表跟咱们的这个项目给它挂上钩啊，其实呢，它已经是挂上钩了，但是呢，我们在这边。你想要更好的去使用咱们呢，还可以在这边进行一个下载，对吧。点击。在被子里面下来。

对吧，那么我们刚刚所创建的这三个就都跑到这边来了啊，这个就是关于数据库一个衔接的一个方法。然后呢，我们再做一些基础的准备，就是这里啊，这个是什么？这是一个存放呃文件啊，存放静态图片啊之类的地址，那像我们之前设计的，你底部的一个显项卡，一个导航，对吧，你得有一个首页，一个我的啊，可能还会有一个收藏，那么这图片呢，咱们之前也讲过，你自己如果有啊，你可以找你家的UI设计，找你家的设计师给你整。那么。如果说没有啊，咱说钱省点钱啊，那也没关系，咱们在阿里巴巴的啊，这个矢量库里边儿也能够下载人家东西挺全，而且呢还是免费的。我们看一下这个地址，我们应该还记得吧，之前课程也讲过。

我们呢，在幻灯片的资料之中啊，咱们可以复制一下这个地址。然后打开浏览器。这边粘贴一下，那么你在这里面就可以获取到你想要的任何图片，对吧，要啥都行，你比如说我想在这要一个，呃，首页随便搜一下。很多很多啊，或者说我想要一个叫做。我的。也有很多啊。收藏。对吧，都非常的多，那么我们在这里面选择一个你喜欢的啊，就是你觉得哪个好看，你就来哪个。收藏啊。比如说他吧，啊，咱们想要用它，然后点击一下加入购物车，然后再来一个最好找他。

都要找一个带色的吗？不太好，咱不要带，把这个删除掉。咱们找一个不带色的。就他吧，能放在第一个，应该说明这个用的比较多啊。收藏。然后我的。然后首页。这个还凑合。那然后我们现在点击这边的购物车啊。下载素材。

这个时候呢，我们需要两套对吧，第一套呢就是默认显示，第二套呢，就是点击的时候显示，咱们默认可以拿一个颜色灰暗一点的。比如说来个黑色。对吧。呃，之后咱们下载。尺寸64比较合适。下载之后啊，我们打开文件。这里面就是咱们刚刚下载出来的三个文件，我们呢，可以直接把它托放到这个文件，这个文件夹里面啊，你也可以把它当成一个资源管理器来使用。直接拖过来。对吧。喜欢首页果冻，然后呢，我们再来一个。

有颜色的啊，有颜色的就是说你选中之后，它都有显示那个红色。红色好看，可以吧？来一个红色，然后我们再下载一次。好啊，我们打开。这个是红色的对吧，咱们还是也把它拖过来。嗯。改一下名字。这样呢，我们基础的一个静态图片，咱们底部导航的静态图片已经有了，但是呢，出于安全不是很安全，就是出于习惯啊，咱们一般不整这种括号啊，咱们可以给它改成一个别的名字。

对吧。首页二。因为带括号，你有的时候要是遇到一些编码这种特殊符号，它有可能会给你整个乱码。OK啊，那现在呢，我们基础的静态图片也已经整完了。那我们现在整的这些图片啊，就是把它放在这个paper里边，所以说我们这里面啊，新建一个目录。就叫K歌吧。是新建目录没没点过吧。

新建目录。之后呢，Table里面呢，你肯定是需要有几个页面，咱们之前课程也讲过对吧，它至少得有两个页面才行啊，那我们直接把这个给它。拖过来啊，这就当成是第一个页面。把它当成是第一个页面，这个里面呢，因为咱们新建的嘛，所以说几乎就是空的啥都没有的，咱们后期可以再改，这是当成是第一个页面。这个时候啊，我们预览的时候，它就会有一个报错。为什么会报错？因为我们刚才偷懒了，咱们把这个配置啊，原先人家这个I叉是在配置下面，你现在呢，把它挪到了paper下面。所以说它这个位置哎就找不到了，那怎么办？那我们找到配置叫jacent对不对，那我们看一下这里边的地址，原原先是这个地址，然后呢，咱们把它放到了paper bar里面，所以说呢，我们在前边也得加上一个paper bar，对吧，在配置和S中间加上一个paper。

然后我们再来保存一下。这个时候就能出现了，对吧，因为我们更改之后，它就能找到这个位置了。然后啊，我们再建立。第二个跟第三个面对吧，沿一面。然后可以叫我的。啊写这样写的话是不是显得有点low啊，咱们改个英文麦啊或者命。还是卖了。然后啊。我们点击这里的创建啊，至于说下面这些呢，你你你可以都看一看啊，我的原则都是对于新出的东西，人家能在这里显示，那就说明这东西可能经常会用得到。

对吧，这。你如果说是同样的操作，他这边有了，你就可以节省很多的一个工作量。那么我们现在呢，先使用一个默认的，因为这是一个我的。好，然后我们点击创建。这边增加了一个麦，然后我们再看刚才这个配置，它这呢也就会自动多出来一个关于麦的一个。的引入，那同样我们再建一个啊，说是叫做收藏啊，或者要关注都行，叫做。这里啊，咱们再建一个。

嗯，这里呢，叫做关注啊，收藏啊，喜欢呀都行。然后我们这里点击一个创建。同样这边增加了之后，我们在这头也会增加了一个啊。那么我们现在已经建了三个页面，建了三个页面之后怎么办？回忆一下咱们之前的课程对吧，那这个底部是在这个位置，那能写在某一个页面不行对吧，因为你每一个页面它都会有这个东西。所以说呢，我们要把它写在。配置啊，写在这个，我们要在它的下面进行一个关于table的一个撰写。在这块。

呃，用双引号。然后你打出双引号之后，它下面就有了，对吧，PAPER8底部table的表现啊，至于其他的几部你都可以点击一下看一看。之后。一个大括号打开。那么在这呢，我们可以给它一个底部的，比如说一个颜色。没有出来，没有自动匹配出来，那就说明我们还得加个引号。第五个。那么我们刚才往这里静态图片这里传了两种颜色，一个是黑色，一个是红色，对吧，所以说我们默认的底色呢，哪一个颜色浅一点的。这个可以，这个。就他吧。

这个是颜色啊。之后呢，你像咱们在这边放静态图片的时候，也是有两个，当时咱们就设计了对吧，默认的是一个色是黑色的，然后你点之后又变成一个色是红色的，那我们再来一个。红色。啊，背景color对吧，那我们找一下有没有红色。这个这个算是红色吗？不太像，我们可以直接写二啊，或者说我们就用它凑一下，这个应该也还可以看着像，就它吧啊。啊，现在是颜色。然后咱们再给它添加一个背景色。背景色。白色背景色呢，咱们就可以来白色。

然后诶。哦哦，不对，上面这写错了啊，这个这个不这个我们是要找选中的颜色啊，不是背景选中的颜色。Table上文字选中，选择它。好。接下来呢，就是咱们这个列表了，对吧。对吧，开的列表，它这边也有介绍，双击。然后呢，这里呢，是一个中括号。中国。之后。我们是有三个页面对吧，那这里面就应该是有三个大括号。对不对。中间有逗号。严格。那么这个就是一个列表的展示，咱们把第一个打开。

那么列表里面你想一下它会有什么，会有文字，会有图片啊，就是你这边，比如你显的示一个我的，或者显示一个首页，你总得有一个字吧，对吧。然后啊。好，当我们打出这个双引号之后，它这里自然就给我们提示出来了啊，你可以选择在这个位置选择常见的四个对吧，第一个是什么？第一个是图片路径啊，我们按照它这个顺序来图片路径。咱们想要的是手印。对。第二个。是。这里是图片哦，它这里因为是顺序，因为。它是第一个，所以刚才咱们就写的第一个，然后这个呢是页面镜啊。页面路径，咱们刚才不是建了三个页面吗？对吧，首页啊。

然后再来一个第三个，这个是选中时图片的途径。首页变成红色的这张。最后一个是ta上的按钮的文字啊，有可能就写首页。好，那么现在呢，就已经是完成了第一个，至于下面两个，那就照葫芦画瓢了，对吧。还是一样啊，我们双击一个。引号啊，它自然就有了第一个，然后这个是呃图标的地址，第二个咱们是想放一个收藏啊，或者喜欢呀，我喜欢呀之类的收藏啊。然后第二个是页面什么跳转到的路径啊看。

第三个是选中时的图片。从方二就是变成那张图片。第四个是。Table上的按钮文字对吧。然后就是。名字你可以自己改啊，像收藏啊，叫喜欢呀，叫我的呀都行，咱们。呃，还算喜欢。对吧，显得唯美一点。好，第三个我们也来一次。第一个这是。我的应该是。对，应该是他。这边地址，然后对应的是麦。然后选中的图片。

就是变变色的那个红色的。对吧。然后最后这个是。文字。好的，那我们现在保存看一下效果。对吧，这底部已经有了。首页，喜欢我的。因为我们这个除了首页它里边默认有一个hello UNI，其他两个都是空白啊，咱们暂时不用管，咱们暂时就先把这个底部这个给它实现了。之后呢，这边如果说觉得空啊，我不知道成没成功，那你直接在里边，你可以增加一点东西。对吧。里边我们也可以增加。这只是我的的页面。然后上面这里是喜欢的页面，这里是喜欢的页面。

然后我们点击一下保存。之后我们再点击看到了吧，那就说明我们的这个地址的页面都没有问题。好，那咱们这节课呢，主要就是讲的这些，呃，我们可以在下面再建一个。然后。写一下项目的步骤吧。

初始化云，包括数据库。然后。建立，然后是准备图片。做底部的天底部导航。啊，这个呢，就是第一步啊，咱们基本上已经完成了。好的，那么咱们这节课呢，就讲到这里啊，感谢您的关注，我是霍长亮，然后如果有什么关于淘课呀，APP啊，有什么合作的项目啊之类，大家都可以加我QQ微信啊，就算没有的话也加个好友啊，这个多个朋友多条路，然后也欢迎加入我们的群啊，我们的网站都可以去看一看，感谢您的关注，拜拜。