在前面章节中我们有介绍过这个 微信小程序了，如果有忘记，可以重新翻阅。
本章节要做的事情
我们这个章节要做的事情如下
- 创建微信小程序-云开发版本
- 制作 tabbar（导航栏）上的小图标
- 新建好几个 tabbar上页面
- 选择好对应的云开发环境
按照以下图示新建即可
成功创建
成功创建后，在微信开发者工具上，能看到 云开发按钮
同时，资源目录能看到以下两个文件夹
cloudfunctions
专门用来存放 云函数的代码
我的项目的截图
miniprogram
专门用来存放 小程序前端代码
我的项目的截图
准备tabbar上的素材
tabbar指得是小程序中自带的导航栏结构，但是图标需要我们自己制作。要求大小最好为 40kb，尺寸为 81 * 81 。不能使用网络路径
如图
一般的前端工程师不太熟练使用ps工具来制作精美的图标，那么我们可以借助 阿里巴巴字体图标库的帮助。
制作步骤
登录账号
自己选择喜欢的登录方式哦
选择自己风格的图标库
网站内提供 丰富好看的字体图标库，在搜寻字体图标时，支持在整体风格一致的图标库中寻找，也支持按照关键字寻找。我比较建议 在整套中来寻找，因为这样的图标风格比较统一，建议不要对自己的审美太自信。
整套搜索
关键字搜索
添加到项目中
看上谁了，直接添加到购物车中
准备下载
挑选完毕后，可以点击页面右上角的购物车按钮，会弹出以下界面
点击添加到项目（这样方便以后的使用和修改）
然后点击下载
在弹出的新界面内，可以简单编译下图标，然后点击 png 下载
小程序中搭建tabbar
小程序中搭建tabbar的详细教程在官网文档那里有，这里简单讲解下。
新建tabbar上的页面
可以直接在微信开发者工具中编辑 app.json文件中的pages字段，保存，然后微信开发者会自动的帮你新建好四个页面。
{
"pages":[
"pages/index/index",
"pages/boiling/boiling",
"pages/search/search",
"pages/book/book",
"pages/user/user"
]
}
引入 图标文件到目录中
在 miniprogram 目录中 新建 icons文件夹，用来存放 tabbar上的图标
添加tabbar配置
在 app.json中，添加以下配置，请注意路径中正确性
{
"tabBar": {
"color": "#c8cbd4",
"selectedColor": "#0c85ff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/icons/home-fill.png",
"selectedIconPath": "/icons/home-fill-o.png"
},
{
"pagePath": "pages/boiling/boiling",
"text": "沸点",
"iconPath": "/icons/daytimemode.png",
"selectedIconPath": "/icons/daytimemode-o.png"
},
{
"pagePath": "pages/search/search",
"text": "发现",
"iconPath": "/icons/search.png",
"selectedIconPath": "/icons/search-o.png"
},
{
"pagePath": "pages/book/book",
"text": "小册",
"iconPath": "/icons/ali-clould-fill.png",
"selectedIconPath": "/icons/ali-clould-fill-o.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "/icons/bussiness-man-fill.png",
"selectedIconPath": "/icons/bussiness-man-fill-o.png"
}
]
}
}
效果
如果成功的话，可以看到以下界面了，并且点击是能跳转到对应的界面的
选择云开发环境
微信给免费提供的云开发环境有两个，环境和环境之间互不影响， 每一个环境中包含着有以下独立的资源
- 云数据库
- 云函数
- 云托管
- 。。。
我们可以将当前的小程序关联到其中一个云开发环境。
关联很简单，鼠标右键即可
如果没有开通过的话，那么就需要自己先点击 微信开发者工具中的 云开发按钮进行设置了。
好友微信号
添加大佬微信 和上千同伴一起提升技术交流生活
hsian_
最后
码字不容易 你的点击关注点赞留言就是我最好的驱动力
