微信小程序综合训练 - 花店小程序

一.页面效果展示

1.购物车页面：

 vant组件库引入：在app.json中引入van-submit-bar组件。

        card.wxml配置：使用van-swipe-cell组件实现购物车商品的滑动删除功能，使用van-          checkbox组件实现商品的选中状态，使用van-stepper组件实现商品数量的                                      增减。

        card.scss样式配置：设置购物车商品列表的样式，包括商品信息、价格、购买按钮等。

        效果展示图：

2.我的页面：

1. my.js配置：引入mobx-miniprogram-bindings库，实现数据的绑定和更新。
2. my.wxml配置：展示用户的头像、昵称、订单信息、售前售后服务等内容。
3. my.scss样式配置：设置我的页面的样式，包括顶部展示图、用户信息、订单面板、关于售前售后服务面板等。
4. 效果展示图：

3.商品列表页面

1. list.wxml配置：使用goods-card组件展示商品列表，使用hidden属性控制文字的显示与隐藏。
2. list.scss样式配置：设置商品列表的样式，包括商品卡片、文字区域等。
3. 效果展示图：

4.商品细节页面

1. detail.js配置：定义点击按钮事件，控制面板的显示和隐藏。
2. detail.wxml配置：展示商品的大图、基本信息、详细信息、底部导航栏等内容，使用van-goods-action组件实现底部导航栏的功能，使用van-action-sheet组件实现自定义盒子的功能。
3. detail.scss样式配置：设置商品细节页面的样式，包括商品大图、基本信息、详细信息、底部导航栏、自定义盒子等。
4. 效果展示图：

5.订单页面

1. dingdan.wxml配置：展示订单列表，包括订单号、订单状态、商品信息、实付金额等内容。
2. dingdan.scss样式配置：设置订单页面的样式，包括订单列表、订单详情等。
3. 效果展示图：

二.通用模块封装知识点

1.消息提示模块封装

• **wx.showToast()**：用于显示消息提示框。
• 封装思路：创建toast方法对wx.showToast()进行封装，传递对象作为参数，设置默认值，通过模块化方式导入或挂载到wx全局对象上使用。
• 调用方法：模块化导入或全局挂载后，使用toast()或toast({ title: '数据加载失败....', mask: true })调用。

2.模块对话框封装

• **wx.showModal()**：用于向用户询问是否执行一些操作。
• 封装思路：对wx.showModal()方法进行封装，传递对象作为参数，通过Promise返回用户的操作，可通过模块化方式导入或挂载到wx全局对象上使用。
• 调用方法：模块化导入或全局挂载后，使用const res = await modal()或const res = await modal({ title:'新的提示', showCancel:false })调用。

3.封装本地存储API

• 实现步骤：在utils目录下新建storage.js文件，封装对本地数据进行存储、获取、删除、清除的方法。
• 运行代码：在app.js中导入并使用setStorage、getStorage、removeStorage、clearStorage方法。

三.网络请求封装

1.请求封装 - request方法

• 封装思路：创建WxRequest类，通过类的方式封装wx.request，处理异步请求和请求参数。
• 使用方法：导入实例后，使用instance.request()方法发送请求，可通过then和catch接收返回的值，或通过await和async接收返回的值。

2.请求封装 - 设置请求参数

• 思路分析：在发起网络请求时，需要配置一些请求参数，包括默认参数、实例化时参数和调用实例方法时传入的参数。
• 实现方法：在WxRequest类中定义defaults实例属性来设置默认值，在constructor构造函数中接收实例化时传入的参数，在request方法中合并请求参数。

3.封装请求快捷方法

• 思路分析：在request()方法的基础上封装一些快捷方法，简化request()的调用。
• 实现方法：在WxRequest类中暴露get、delete、post、put方法，内部调用request方法发送请求。

4.定义请求/响应拦截器

• 拦截器的作用：请求拦截器本质上是在请求之前调用的函数，用来对请求参数进行新增和修改；响应拦截器本质上是在响应之后调用的函数，用来对响应数据做点什么。
• 实现方法：在WxRequest类内部定义interceptors实例属性，包含request和response方法。在发送请求之前，调用请求拦截器；在服务器响应以后，调用响应拦截器。