零基础学习微信小程序（二）

零基础学习微信小程序之底部导航栏

一、新创建一个项目

1、打开微信开发者工具后，扫码登录，点击加号

2 项目名称自己填写
目录放在桌面即可，当然你也可以放在别的地方
注意！！！APPID在你申请完小程序后会生成，不要让无关人员看到，后期想让项目上线，就要用到他了！！！
现在我们只是学习，所以使用测试号就好了。
一些高级服务在云开发这里，不过既然是零基础，也就暂时用不上。
选择测试号是无法使用云开发的！！！
最后新建就好了！

二、开始搭建

1、刚进来之后，模拟器变绿就是在显示，你想收起来就点击它，让他变灰。

2、我们找到app.json，这就是目前自带的代码
修改全局变量在app.json
全局配置相关代码详解可在微信开放文档自行查看
微信开放文档之全局配置

3、我们先借用默认界面作为首页，然后继续创建几个相关页面
这里我打开vscode来敲代码，选择你创建的项目文件夹，右击vscode打开。
在"pages"中创建两个新页面，分别对应购物车和我的
名字你随意起，要保证同一路径
保存后，左侧便会出现两个相关文件夹

注意！！！
语句之间要有逗号
排在第一行的代码即优先显示的页面
vscode中保存后，微信开发者工具便会自动保存，若没有，请在微信开发者工具打个空格，再保存一下
4、顶部导航栏配置
navigationBar…
背景颜色得写16进制
文字样式有黑白两种
以此类推，另外两个页面的 json中也要修改一下颜色和文字

5、下拉刷新：
第一句填为dark，刷新时会出现三个小黑点
最后两句一条表明启用，一条设置颜色

6、底部导航栏
和"window"并列
{}和{}之间要有，
在"tabBar"板块写"list"，

这里的页面路径要和上方"pages"里的路径保持一致
这里就要创建个icon文件夹啦，然后把相关图片放进去就好
注意！！！第一个是未选中图片时候的路径，第二个是选中时的路径

以此类推写三个

这时候底部导航栏已经大致有样子了，我们再给他渲染一下

在"tabBar"中
color表示图标未选中时颜色，selectedColor表示选中后
都是16进制！
导航栏的背景颜色就可以任选啦
设置定位和边框颜色为后两句，一般都在底部，且为黑色

这样我们的导航栏大功告成！！！