一、准备工作

1、电脑需要安装有 微信web开发者工具，如果没有请点击这里安装：下载地址

2、成为微信小程序开发者，到微信公众号平台注册一个账号。需要用到appkey

二、程序实现

1、项目目录如下：

主要页面代码都放在components文件夹下面，每个页面包含wxml,wxss,js,json四种格式的文件。

模块说明：

index即主页，

address是地址管理，

cart是购物车，

category是分类，

detail是商品详情，

list是商品列表，

orders是订单管理，

user是用户中心。

最外层的app.json 是小程序的配置文件。

可以设置小程序的基础配置。不清楚的可以查看官方文档

（注意：页面里面的数据为静态写死的数据。）

三、运行效果

只需打开微信web开发者工具，打开时选择本项目文件夹，就会在开发者工具中打开了，可以正常的运行了。如果需要在手机上预览，可以在微信开发者工具中打开预览，通过手机扫描二维码即可预览。要预览就需要appkey，也就是上面准备说要先注册一个小程序开发者账号才有appkey.

运行截图如下：

四、其他补充

1、现在也有一些小程序商城是基于我这个项目代码稍微改造一下然后上线的。比较方便快捷。

2、关于购物车的功能，我有一篇文章让你更熟悉使用代码：微信小程序之购物车功能