从零开始的微信小程序线上商城开发（一）_微信开发者工具电商界面

今天开始制作一款微信小程序，一方面是巩固所学，一方面也在查漏补缺，准备尽可能的将所有电商功能模块都做出来，首先是准备工作。

这是微信小程序开发文档，下载微信开发者工具，我的开发者工具版本为1.03.2006090（突然改了界面好不习惯），UI库我选择了Vant Weapp。准备就绪，出发！

1、新建项目

打开微信开发者工具，点击新建项目进入以下界面

• 项目名称：填写你的项目名称
• 目录：选择项目保存的路径
• AppID：填写appid，若无可使用测试号
• 开发模式：小程序
• 后端服务：我这里选择不使用云服务，因为还没有了解云开发

点击新建按钮进入以下界面

 这是微信官方的HelloWorld示例，项目包含以下部分：

• pages  存放页面文件
• utils  存放工具文件
• app.js  小程序启动逻辑
• app.json  小程序公共配置
• app.wxss  小程序公共样式表

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

2、添加底部tab栏 

首先先下载两个图标，因为tabbar不支持网络图片，这里我选择去iconfont下载图标，建议尺寸为81px*81px。下载后在小程序根目录下新建static/img文件夹，把刚刚下载的图标存进img文件夹中。

接着配置tabbar，打开app.json，配置项如下：

pages属性如下：

"pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],

这表示小程序有两个页面，一个index，另一个logs，它与资源管理器中文件相对应：

删除时需要将两处都删除，否则报错。

我这边准备添加一个个人中心页面，先在pages属性中新增一行"pages/user/user"，编译后会该代码会匹配pages文件夹下的user页面文件，如果不存在会自动添加。

然后添加tabBar属性进行配置，helloworld示例中未配置，具体配置及注释如下图：

"tabBar": {
    "color": "#000000",  //tab 上的文字默认颜色，仅支持十六进制颜色
    "selectedColor": "#00BFFF", //tab 上的文字选中时的颜色，仅支持十六进制颜色
    "backgroundColor": "#FFFFFF",  //tab 的背景色，仅支持十六进制颜色
    "borderStyle": "black",  //tabbar 上边框的颜色， 仅支持 black / white
    "position": "bottom",  //tabBar 的位置，仅支持 bottom / top
    "custom": false,  //自定义tabBar
    "list": [  //tab 的列表，最少 2 个、最多 5 个 tab
      {
        "pagePath": "pages/index/index",  //页面路径，必须在 pages 中先定义
        "text": "首页",  //tab 上按钮文字
        "iconPath": "static/img/index.png",  //图片路径，不支持网络图片，当 position 为 top 时，不显示 icon
        "selectedIconPath": "/static/img/selectedIndex.png"  //选中时的图片路径，不支持网络图片，当 position 为 top 时，不显示 icon
      },
      {
        "pagePath": "pages/user/user",
        "text": "个人中心",
        "iconPath": "static/img/user.png",
        "selectedIconPath": "/static/img/selectedUser.png"
      }
    ]
  }

以上代码中的注释便于查看，实际使用中json格式不可以注释 

编译后效果如下图：

 然后我将pages属性中的logs路径及pages文件夹下的logs文件删除，把index页面的内容包括wxml和wxss以及js的事件函数全部删除，下一篇开始设计开发首页。

ps：第一次写这样的博客，旨在整理大脑里杂乱无章的东西。本系列内容算是自己的总结，主要面向初学者。如果能给新人一些帮助我会很高兴，如果大佬看到了能指出文中某些不足那再好不过。

成长源于失败！