一步一步实现商城微信小程序（二）

我们要实现的小程序的页面大概是这个样子，底部四个导航栏， 首页，分类 ，订单，我的 。

附上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中 对应着就是底部导航栏中要展示的内容和对应展示的页面

完成之后 编译运行 在模拟器中显示

以上就是底部导航栏的实现方式

一步一步实现商城微信小程序（三）