我们要实现的小程序的页面大概是这个样子，底部四个导航栏， 首页，分类 ，订单，我的 。
附上wx小程序的官方APIhttps://developers.weixin.qq.com/miniprogram/dev/framework/structure.html
首先我们来了解一下项目的目录
项目在创建好之后：
images：存放图片
pages：页面 默认有两个index和login
utils：可以将一些公共的代码抽离成为一个单独的 js (utils.js)文件，作为一个模块
在最外层有四个文件
app.js: 小程序逻辑
app.json：小程序公共设置
app.wxss：小程序公共样式表
project.config.json：这是一个项目配置文件，比如项目的名字，appid等等
详细的介绍可以查看https://segmentfault.com/a/1190000011508000
接下来查看对应页面的目录结构
其实每个页面的目录结构都是相同的，通过后缀名可以看出和项目根目录下的几个app配置文件功能相似
index.js：用来编写页面对应的js代码
index.json：页面配置
index.wxml：页面布局，类似于android中的xml
index.wxss:控件对应css样式
我们可以通过点击左上角加号，来创建更多的目录和page
了解完目录结构之后 我们来开始创建页面
首先我要创建四个页面分别是首页，分类，订单，我的
创建好对应的目录之后，在目录下创建page，就会自动生成出 js,json,wxml,wxss这四个文件
首先，实现底部导航栏的功能
首先我们在app.json配置文件中将page中默认的内容替换成我们创建的四个页面
顺便将下面window下navigationBarBackgroundColor属性改成 我们的主题色#FFD161 黄色
在wxapi中可以看到 底部导航栏对应是tabBar
我们在app.json这个页面中通过设置如下代码就可以实现
{
"pages": [
"pages/home/home",
"pages/mine/mine",
"pages/order/order",
"pages/classification/classification"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#FFD161",
"navigationBarTitleText": "商店",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#858585",
"selectedColor": "#f0145a",
"backgroundColor": "#ffffff",
"borderStyle": "#000",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "images/home.png",
"selectedIconPath": "images/home_select.png",
"text": "首页"
},
{
"pagePath": "pages/classification/classification",
"iconPath": "images/classify.png",
"selectedIconPath": "images/classify_select.png",
"text": "分类"
},
{
"pagePath": "pages/order/order",
"iconPath": "images/cart.png",
"selectedIconPath": "images/cart_select.png",
"text": "订单"
},
{
"pagePath": "pages/mine/mine",
"iconPath": "images/mine.png",
"selectedIconPath": "images/mine_select.png",
"text": "我的"
}
]
}
}在tabBar中 最先设置的是默认字体颜色，选中颜色等属性
在list中 对应着就是底部导航栏中要展示的内容和对应展示的页面
完成之后 编译运行 在模拟器中显示
以上就是底部导航栏的实现方式
一步一步实现商城微信小程序（三）
