这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战
这次我们打算做一个『梗百科』小程序，用户可以在小程序上搜索常见的梗，比如yyds、绝绝子等等。
大家可以先看看效果：
新建工程
申请账号
点击 mp.weixin.qq.com/wxopen/ware… 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。然后登录mp.weixin.qq.com ，就可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了
安装开发工具
developers.weixin.qq.com/miniprogram… 下载稳定版本开发工具（IDE）
新建项目
appID填入刚刚我们申请到的，初始模板选择微信云开发，它会给我们提供一些云函数、云存储接口。
引入第三方组件
在进行开发之前，我们要先引入一个第三方组件，这个组件提供了很漂亮的按钮、图案、样式（专业说法是CSS库），我们只需要复制粘贴就可以直接使用。
下载ColorUI格式库开发，如果下载失败的可以在我公众号『又是那个程序员Fia』发送“梗大全”关键字，获取百度云下载链接。
git clone https://github.com/weilanwl/ColorUI/
然后打开template/目录，把colorui这个文件复制到我们项目的根目录下
最后在app.wxss文件中添加下面代码，表示引入main.wxss和icon.wxss两个css库。大功告成！
@import "colorui/main.wxss";
@import "colorui/icon.wxss";
项目结构
不急，我们先认识一下微信小程序的项目架构。
- pages 主要是存放各个页面的，每个文件夹中包含四个文件，js文件主要放你的数据常量/变量以及定义的方法function，json文件主要存放引入的组件，wxml文件就是页面代码，相当于html，wxss就是格式文件
- pages下除了index文件以外的文件夹都是云函数，我们可以删除掉他们
- 在项目根目录下也存在app前缀的js、json、wxss、wxml四个文件，作用和index下的文件是一一对应的，只不过是它全局的。而index文件夹下的就是index页面的内容
- sitemap.json设置微信搜索范围
设置底部导航栏
先在项目目录下新建一个images文件夹，在app.json文件删除内容，复制下面内容。说一下每个作用。
- pages里面是我们所有的页面，这里有个小技巧，如果你想新增一个页面，只需要在这里添加就行了，保存后编辑器会自动帮你生成一个内含js、wxml、json、wxss文件夹。这里那个页面放在前面，小程序初始页面就是对应的，例如这里，初始页面就是hot热搜页面。
- windows中设置了背景色，小程序名...
- tarBar就是我们底部导航栏的内容。iconPath表示用户没有点击的时候图片链接，selectedIconPath表示用户点击后的图片链接，一般来说用户点击完后图片会变色，这些图标在我微信公众号发送关键词“梗大全”获得。
{
"pages": [
"pages/hot/hot", // 热搜页面
"pages/search/search" // 搜索页面
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "梗百科",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"style": "v2",
"tabBar": {
"list": [
{
"pagePath": "pages/hot/hot",
"text": "最火",
"iconPath": "images/fire.png",
"selectedIconPath": "images/fire_cur.png"
},
{
"pagePath": "pages/search/search",
"text": "搜索",
"iconPath": "images/search.png",
"selectedIconPath": "images/search_cur.png"
}
],
"selectedColor": "#DC143C"
}
}
最后效果和项目结构如下图
