微信小程序个人商城开发(第一篇：首页导航栏)

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

微信小程序下面的自定导航的定义和使用，各种常用属性的设置，图标的设置，怎么和相应的页面关联。

一、怎么定义导航

在我们新建的小程序项目中有一个app.json文件，我们打开app.json文件，并在文件中增加tabbar定义，这个是小程序定带的tabar定义方式。

 "tabBar": {
    
    
    "custom": false,
    "color": "#666666",
    "selectedColor": "#FF5F15",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
    
    
        "iconPath": "./images/home.png",
        "selectedIconPath": "./images/home2.png",
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
    
    
        "iconPath": "./images/category.png",
        "selectedIconPath": "./images/category2.png",
        "pagePath": "pages/goods/category/index",
        "text": "分类"
      },
      {
    
    
        "iconPath": "./images/cart.png",
        "selectedIconPath": "./images/cart2.png",
        "pagePath": "pages/cart/index",
        "text": "购物车"
      },
      {
    
    
        "iconPath": "./images/my.png",
        "selectedIconPath": "./images/my2.png",
        "pagePath": "pages/usercenter/index",
        "text": "我的"
      }
    ]
  },

二、怎么定义图标及分别定义选择和默认情况下的图标

常用的图标我们一般不用自己来设计，我们可以通一个网站来在线生成图标。
https://www.iconfont.cn/
把设计好的图标下载下来放到小程序的目录images中，我们在小程序的根目录建一个images文件夹，然把把图标文件拷贝到这个文件夹当中去，注意我们图片一般为png格式，要定义图标我们使用iconpath，而定义选择时的图标用selectedIconPath属性，两个属性用不同的图片就行了。

三、定义各项对应的页面

我们只是在app.json中定义了list还是不能显示的，没有图片会出现错误信息，因此我们还要把pagePath定义的页面一个个的建好，因此我们在pages目录下建相应的文件夹用来存各自的页面。
然后可以点击各自的文件夹来创建page,这里新建Page会自动的产生4个文件，index.js,index.json,index.wxml,index.wxss