电商开发小程序中心网站-TDesign电商小程序模板解析01-定制顶部导航栏（一）

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

我们已经用两篇文章分析了陌陌小程序的TDesign模板

TDesign小程序组件库01

TDesign小程序组件库02

入门一个后端组件库，如果一一看每个组件的用法，会很枯燥，虽然即使了解了离实际开发还是有很远的距离。 为了快速上手，虽然通过实际案例来学习会更快。

一般来说，小程序比较常见的场景是电商，通常作为店铺经营者私域运营的工具。 好在已经提供了一套电商模板，我们慢慢拆解吧。

1电商模板安装

我们启动陌陌开发者工具后，当我们选择不使用云服务时，就可以看到这套电商模板

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

2创建页面

您可以通过学习一组模板来阅读代码电商开发小程序中心网站，或者创建一个空项目来重现它。 我们在复现源码的时候，边做边看电商开发小程序中心网站，这样可以更好的梳理他的思路。

打开好友程序第一步就是构建页面，我们可以根据顶部导航栏来构建。 顶部导航栏目前有四个菜单，分别是首页、类别、购物车和个人中心。

所以先建好这四个一级页面，选择页面，右键新建文件夹

进入家

然后选择主页并创建一个新页面

进入家

它将手动生成四个页面：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"
}