看到文章题目的**眼：

噫~01？从新开始讲一遍？啥意思？

哈哈，此时我只想用一句歌词来解释：

我还是从前那个少年，没有一丝丝改变……

对于一个拖延症晚期的我来说，在百忙之中抽出一点点时间（牺牲我看电影的时间），

将小程序的基础知识01-32篇终于于于讲完了，

可能有些知识点我们没有讲到……

不要害怕，我不会离开的~

我们还是要继续和小程序相爱相杀滴~

前面的时间，理论我们铺垫的差不多了，

从今天开始，带领大家一起实战~

我们一起做一个电商项目——优购商城，还是手把手的哈~

长什么样呢？

在long long ago ，我们小程序训练营开启之前的**讲展示过。

忘了？？

没事儿~~生图搬过来，再回顾一下~~~~

基本和市面上网购小程序类似，比如唯品会、京东等~~

本项目一共分为12大模块，这里不赘述（其实是我懒~）

传送门：相信自己：手把手教你零基础搭建小程序（01）

所以，

从这一章开始，我们又翻开了新的篇章，只要你之前学习小程序训练营的知识，

就能一起将这个电商项目逐步搭建起来。

市面上类似的小程序社区商城、餐饮服务等都可以独立完成了~~~

并且，还有一些之前没讲的、讲过你没明白又很重点的内容，

通过项目实战搭建，还可以继续再学习、再巩固。

毕竟，理论要结合实战才能发光发热嘛~~~

对于这个实战的项目呢，我们先搭建一下最基本的框架，分为四大步：

（一）新建小程序项目

（二）搭建小程序的目录结构

（三）搭建项目的页面

（四）引入字体、图标

（五）搭建项目的tabbar结构

前三步，我们今天来讲一下，后两步会各用一章来讲解~

这五步完成后，

就是每个页面（比如：首页、分类、购物车）组件的搭建、修改、美化、渲染等。

别激动，都会一点点呈现出来的~~~

（一）新建小程序项目

首先，**步，在微信开发者工具中新建一个空白的小程序项目：

1、点击菜单栏"项目"—— 新建项目

2、编辑"项目名称"、 "目录"、"Appid"

Appid可先用测试号，等到最后上线的时候再修改为自己的。

（二）搭建小程序的目录结构

虽是新建的项目，但是某些文件中还是原先就带有一些代码。

首先，我们要先清除一下无关代码：

1、在app.json文件中，删除pages/logs/logs 这行代码（本次项目中用不到），

将 navigationBarTitleText 的名称修改为 "优购商城"

如下图：

2、代码全删：app.wxss 文件、index.wxss 文件、util文件夹下的。

3、app.js 文件中，原先的代码全部删除，输入 wx-app —— 相关解析结构，

最后的globalData 也要删除。

4、文件 index.wxml中，原先的代码全部删除，加入view标签，代码如下：

<view>首页</view>

5、文件 index.js中，输入 wx-page ，轻松将原先的代码全部删除。

6、文件 index.json中，输入以下代码：

{ "usingComponents": {}, "navigationBarTitleText": "优购首页" }

7、保存代码，小程序页面如下：

在控制台部分没有发现任何报错，说明一切正确，如上图所示。

清除完不必要的代码后，接下来我们新增一些目录结构。

1、新增styles 文件夹，存放样式；

2、新增components文件夹，存放组件；

3、新增lib 文件夹，存放第三方库；

4、新增 util 文件夹，建立该项目的帮助库；

5、新增 request 文件夹，建立该项目的接口帮助库；

最后的目录结构大体如下：

（三）搭建项目的页面

在app.json文件中，一一新建13个页面，具体代码如下：

"pages": [ "pages/index/index", "pages/category/index", "pages/goods_list/index", "pages/goods_detail/index", "pages/cart/index", "pages/collect/index", "pages/order/index", "pages/search/index", "pages/user/index", "pages/feedback/index", "pages/login/index", "pages/auth/index", "pages/pay/index" ],

打开pages 文件夹，系统已经自动生成了13个文件页面。

我们的页面目录就搭建好了。

（四）引入字体、图标

（五）搭建项目的tabbar结构

这两部分我们明后两天继续讲解哈~~~

期待ing~~