TDesign电商小程序模板解析01-自定义底部导航栏（一）

我们已经利用了两篇文章解读了一下微信小程序带的TDesign模板

TDesign小程序组件库01

TDesign小程序组件库02

入门一款前端组件库，如果挨个去看每个组件的用法未免比较枯燥，即使看懂了其实离实际开发还是比较远的。为了快速的入门，其实带着一个实际的案例去学习就比较快了。

通常小程序比较常见的场景是电商，一般是作为商家一个私域运营的工具。好在已经提供了一套电商模板，我们来逐步拆解一下。

1 电商模板安装

在我们启动了微信开发者工具后，选择不使用云服务的时候，就可以看到这套电商模板

安装后就可以看到具体的文件的目录

2 创建页面

学习一套模板可以阅读代码，也可以创建一个空项目复刻一下。源代码我们在复刻的时候边做边看，这样可以比较好的梳理一下他的思路。

开发小程序第一个步骤是搭建页面，我们可以按照底部导航栏先进行搭建。底部导航栏目前有四个菜单，分别是首页、分类、购物车和个人中心。

那么就先搭建这四个一级页面，选中pages，右键新建文件夹

输入home

然后选中home，新建Page

输入home

它会自动生成四个页面分别是home.wxml、home.js、home.wxss、home.json

然后创建分类页面，分类页面是在商品页面下的二级页面，结构如下

之后建立购物车cart、个人中心usercenter页面

页面创建好之后，页面的路径会自动的注册到app.json里

{
    "pages": [
        "pages/home/home",
        "pages/goods/category/index",
        "pages/usercenter/index",
        "pages/cart/index"
    ],
    "usingComponents": {},
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#f6f6f6",
        "backgroundColor": "#f6f6f6",
        "navigationBarTitleText": "TDesign",
        "navigationBarTextStyle": "black"
    },
    "sitemapLocation": "sitemap.json"
}