微信小程序

一：项目初始化

1.1：创建项目与项目初始化

在微信开发者⼯具的开始界⾯左侧检查项⽬类型，需要为 [⼩程序]。 然后在右侧点击 [+] 开始新建项⽬。 最后在弹出的界⾯中输⼊项⽬相关的信息，点击确定即可。

项⽬初始化

重置 app.js 中的代码。

重置 app.wxss 中的代码。

删除 app.json 中 pages 下的 "pages/logs/logs" 路径，同时删除 pages/logs ⽂件夹。

重置 pages/index ⽂件夹下的 index.js 、index.wxss、 index.html 以及 index.json ⽂件。

更新 utils 下 util.js 的⽂件名为 formatTime.js。

1.2：自定义构建 npm + 集成Sass

随着项⽬的功能越来越多、项⽬越来越复杂，⽂件⽬录也变的很繁琐，为了⽅便进⾏项⽬的开发，开发 ⼈员通常会对⽬录结构进⾏调整优化，在慕尚花坊项⽬中，我们就需要将⼩程序源码放到 miniprogram ⽬录下。

⾸先在project.config.json 配置 miniprogramRoot 选项，指定小程序源码的目录

然后配置 project.config.json 的 setting.packNpmManually 为 true。

初始化项⽬。

最后配置 project.config.json 的 setting.packNpmRelationList 项，指定 packageJsonPath 和 miniprogramNpmDistDir 的位置。

在project.config.json ⽂件中，修改 setting 下的 useCompilerPlugins 字段为 ["sass"] ，即可开 启⼯具内置的 sass 编译插件。

更改wxss后缀名为sass

配置app.json⽂件

首页结构

首页背景图

构建banner组件结构

完成轮播图组件

entrance组件

完成广告区域

注册goods-card和goods-list全局组件

完成goods-card组件

完成goods-list组件

分类页面

flex布局

我的界面

js部分

scss界面

wxml界面

效果图

购物车结构

购物车样式

margin和padding的使用

外边距（margin）：

外边距定义了元素与其周围元素之间的空白区域。
外边距可以设置为正值、负值或百分比。
外边距可以用来控制元素之间的间距、对齐元素、扩展元素的可点击区域等。
外边距不会影响元素的背景颜色或边框。
内边距（padding）：

内边距定义了元素的内容与其边框之间的空白区域。
内边距可以设置为正值、负值或百分比。
内边距可以用来控制元素内容与边框之间的间距、增加元素的可点击区域等。
内边距会影响元素的背景颜色。

效果图

商品列表界面

新建page

完成商品列表界面

list界面

商品列表样式

detail界面

界面样式

效果图

订单页面

页面结构

list

界面样式

detail

界面结构

界面样式

效果图

网络请求封装

request

1. 添加默认参数：在封装request方法时，可以设置一些常用的默认参数，比如请求方法默认为GET，请求头默认为包含Content-Type为application/json的对象等。这样在实际调用时，只需传入需要修改的参数即可。

2. 错误处理：在封装request方法时，要考虑添加错误处理机制，例如捕获请求失败的情况并返回相应的错误信息，以便在调用处进行处理。

3. 请求拦截器：可以考虑在封装request方法时添加请求拦截器，用于在发送请求前对请求进行一些处理，比如添加token、统一处理请求参数等。

4. 响应拦截器：类似地，可以在封装request方法时添加响应拦截器，用于在接收到响应后对响应进行一些处理，比如统一处理响应数据、处理特定状态码等。

5. 封装为类：如果需要在多个地方使用request方法，可以考虑将其封装为一个类，这样可以更好地组织代码，并提供更多的功能扩展性。

请求封装-设置请求参数

1. 查询参数：在GET请求中，查询参数是通过URL中的?key1=value1&key2=value2的形式传递的。我们可以通过设置params参数来传递查询参数。

2. 请求体参数：在POST请求中，我们可以通过设置data参数来传递请求体参数。请求体参数通常是以表单形式提交的数据，也可以是JSON格式的数据。

3. 请求头参数：除了查询参数和请求体参数，我们还可以设置请求头参数。通过设置headers参数，我们可以传递自定义的请求头信息，如User-Agent、Content-Type等。

4. 文件上传参数：如果需要上传文件，我们可以通过设置files参数来传递文件数据。

5. 超时参数：设置timeout参数可以指定请求的超时时间，避免请求长时间无响应。

6. SSL验证参数：通过设置verify参数可以控制SSL验证的行为，如忽略SSL证书验证。

7. 代理参数：如果需要通过代理服务器发送请求，可以设置proxies参数来指定代理服务器的地址。

封装请求快捷方式

1、GET

2、PUT

3、POST

4、DETELE

wx.request 知识点

在使用wx.request 发送网络请求时。

只要成功接收到服务器返回，无论 statusCode 是多少，都会进入 success 回调。

开发者根据业务逻辑对返回值进行判断。

什么时候会有 fail 回调函数 ？

⼀般只有网络出现异常、请求超时等时候，才会走fail 回调。

完善请求/响应拦截器示例