【uniapp开发从0开始做一个小程序-03(主界面)】

【uniapp开发从0开始做一个小程序-03(主界面)】

之前我们学习了几个简单的元素使用方法，现在我们正式进入小程序页面的制作中。
首先是将之前在index.vue和index.css写的代码删掉或者注释掉，或者新建一个页面（我是注释一部分，删除一部分）

目录

• 导入colorui框架
• 完成5个页面的新建和路由的认知
• 替换图标，设置下方导航栏

导入colorui框架

Colorui是一个写好了的uniapp样式框架，比如说我们有一个毛坯房，colorui相当于做好了的门、窗、家居，在装修房子的时候直接放进房子里，自己选好位置和样式，就能得到好看的精装房
1-1：百度搜索uniapp官网

1-2：点击插件市场

1-3：搜索colorui

1-4：翻到第二页的colorui组件库

1-5：点击名字后打开网页，然后点击下载zip

1-6：下载完成后，解压

1-7：点击文件->导入->从本地导入

1-8：找到解压后的文件夹，选择确定

1-9：此时我们的项目管理器中就会出现colorui的文件

1-10：我们点击运行到chorm浏览器，就会出现各种元素、插件和扩展组件的样式成果。
我运行的时候报了两个找不到图片的错误，都是背景图片，问题不大。
1-11：在我们创建的项目下创建utils文件夹，utils是工具文件夹的意思

1-12：将组件里的colorui文件夹整个复制

1-13：粘贴到utils文件夹下

1-14：仿照ColorUI的App.vue（翻到最下面的 style），将icon.css和mian.css引入本项目的App.vue，导入过程注意项目的路径（我的路径是utils/colorui/xxx.css）

1-15：回到项目index.vue，输入一行代码，如果出现下面的情况，则导入成功
以上则是colorui组件导入成功

完成5个页面的新建和路由的认知

我的导师给的项目要求是5个主要界面（tabbar组件最多只有5个按键位置），可以根据自己的需求合理创建
2-1：首先在pages文件夹下新建4个页面，分别是附近、发现、关注、我的

2-2：在页面里写上页面名字，作为区分

2-3：可以通过修改路由访问不同页面

2-4：打开pages.json文件，找到最后，添加tabbar组件

2-5：修改tabbar，加一些样式内容

2-6：修改后的运行结果

替换图标，设置下方导航栏

3-1：在网上下载字体图标，首先在百度上搜索‘iconfont’，点击阿里巴巴矢量图标库

3-2：登录后搜索自己想要的图标

3-3：点击下载图标

3-4：在项目的static/ img下新建tabbar文件夹，选择自己想要的颜色和大小，点击png下载，下载到项目的tabbar文件夹

3-5：取名为index_select.png ，作为选中时的图片

3-6：再下载一个一样的，但是颜色不一样，作为未选中时的图片，取名为index.png。其他四个菜单栏一样操作

3-7：在page.json中完成list的内容，将每个菜单都完成相应的内容

3-8：运行结果

**总结：**今天的内容差不多添加了colorUI组件，写完了下面的菜单栏（即tabbar组件），内容没有改太多，用的大多都是默认选项。明天的内容，大概会把首页搜索框和轮播图写完，今天的内容就写到这里吧，每天完成一点点，坚持！(ง •̀_•́)ง