uniapp从零到一的学习商城实战

涵盖的功能：

 安装开发工具HBuilder：HBuilderX-高效极客技巧

创建项目步骤：

1.右键-项目：

2.选择vue2和默认模板：

3.完整的项目目录：

微信开发者工具调试：

1.安装微信开发者工具

2.打开设置---安全设置---打开服务端口

3.在XBuilder中运行即可：

效果图展示：

定义公共样式【common & static】：

引入公共样式：

图标库：iconfont-阿里巴巴矢量图标库

app.vue 引入样式：

编写底部菜单栏：

1.在static 下创建tarbar文件夹，将图片拷贝进去

2.直接创建页面index,my,shopcart,list 页面，会自动填充到page.json中

3.pages.json编写底部菜单栏：

编写swiper:

1.编写公共组件[mode的作用是使图片填充完整100%]：

2.引入组件[第3行和8行和15行]：

编写中间内容公共图片组件：

编写中间内容文字组件[猜你喜欢]：

index引入商品列表组件：

商品列表组件编写：

商品单个组件编写：

编写户外运动组件：

1.编写头部组件：

2.编写九宫格：

3.编写热卖页面组件：

4.效果图展示：

推荐店铺：

1.注意这个是带滚动条的，第7行

2.

去掉滚动条的样式：【17-23行】

第10行：

顶部菜单栏和顶栏跟随：

1.顶部菜单栏：

2.

3.方法实现：

主页处理：

1.

2.第95行-100行

nodeJs搭建后端：

0.进入cmd:

1.执行命令：npm install express-generator -g

2.进入E:\work\gitee\uni-app-mall-1\uni-app-mall-1目录下

3.执行命令：express --view=ejs server[会出现一个server的文件夹，这个就是nodeJs的生成的后端]

4.进入后端目录：cd server 

5.下载依赖项执行命令： npm install

6.启动后端：npm start[默认端口：3000]

7.浏览器访问效果【搭建成功】：

8.编写第一个接口：

重新启动：npm start

浏览器访问效果：

编写首页后端接口：

1.router文件夹下的index.js

2.重启项目npm start

3.浏览器访问：

4.前端页面访问后端代码编写【index页面】：

首页请求数据：

1.uni异步请求数据：

2.循环展示：

3.轮播图处理：

异步请求封装：

1.工具类：

2.改写异步请求

编写搜索页面：

1.新建页面search:

2.