从零开始的微信小程序线上商城开发（一）

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

这是微信小程序开发文档，下载微信开发者工具，我的开发者工具版本为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	string[]	是	页面路径列表
window	Object	否	全局的默认窗口表现
tabBar	Object	否	底部 tab 栏的表现
networkTimeout	Object	否	网络超时时间
debug	boolean	否	是否开启 debug 模式，默认关闭
functionalPages	boolean	否	是否启用插件功能页，默认关闭	2.1.0
subpackages	Object[]	否	分包结构配置	1.7.3
workers	string	否	Worker 代码放置的目录	1.9.90
requiredBackgroundModes	string[]	否	需要在后台使用的能力，如「音乐播放」
plugins	Object	否	使用到的插件	1.9.6
preloadRule	Object	否	分包预下载规则	2.3.0
resizable	boolean	否	PC 小程序是否支持用户任意改变窗口大小（包括最大化窗口）；iPad 小程序是否支持屏幕旋转。默认关闭	2.3.0
usingComponents	Object	否	全局自定义组件配置	开发者工具 1.02.1810190
permission	Object	否	小程序接口权限相关设置	微信客户端 7.0.0
sitemapLocation	string	是	指明 sitemap.json 的位置
style	string	否	指定使用升级后的weui样式	2.8.0
useExtendedLib	Object	否	指定需要引用的扩展库	2.2.1
entranceDeclare	Object	否	微信消息用小程序打开	微信客户端7.0.9
darkmode	boolean	否	小程序支持 DarkMode	2.11.0
themeLocation	string	否	指明 theme.json 的位置，darkmode为true为必填	开发者工具 1.03.2004271
lazyCodeLoading	string	否	配置自定义组件代码按需注入	2.11.1
singlePage	Object	否	单页模式相关配置	2.12.0

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

成长源于失败！