微信小程序笔记

目录

129 mobx-miniprogram 介绍

130 创建 Store 对象

131 在组件中使用数据

132 133 在页面中使用数据-方式

134 fields、actions 对象写法

135 绑定多个 store 以及命名空间

136 计算机属性和监听器

137 mbox 与 compute 结合使用

138 什么是 token

139 Token 的具体流程

142 获取用户信息并存储到 store

143 使用数据渲染用户信息

144 配置分包以及与下载

145 渲染用户信息

146 更新用户头像

147 更新用户昵称

148 定义新增参数以及封装接口 API

149 收集省市区数据

150 收集新增地址其他请求参数

151 地理定位功能介绍

152 拒绝授权后的解决方案

153 开通腾讯位置服务

154 LBSni 逆地址解析

155 表单验证

156 新增收货地址表单验证

157 实现新增收货地址

158 收货地址列表渲染

159 实现更新收货地址

160 实现删除收货地址

161 删除滑块

162 封装商品模块接口 API

163 商品列表-准备列表请求参数

164 获取商品列表数据并渲染

165 实现上拉加载更多功能

166 判断数据是否加载完毕

167 节流阀进行列表节流

168 实现下拉刷新功能

169 获取并渲染商品详情

170 优化：配置@路径别名优化访问路径

171 封装购物车接口 API

172 模板分析和渲染

173 关联 Store 对象

174 加入购物车和立即购买区分处理

175 展示购物车购买数量

176 购物车关联 Store 对象

177 获取并渲染购物车列表

178 更新商品的购买状态

179 控制权权限按钮的选中状态

180 实现全选和全不选功能

181 更新商品购买数量思路分析

182 更新商品购买数量

183 更新商品购买数量防抖

184 购物车商品合计

185 删除购物车中的商品

186 封装结算支付的接口 API

187 获取收货地址

188 更新收货地址功能

189 获取订单详情数据

190 获取立即购买数据

191 收集送达时间

193 梳理小程序支付流程

194 创建平台订单

195 获取预付单信息

196 发起微信支付

197 支付状态查询

198 梳理订单列表模块

199 代码优化与代码质量检测

200 演示上线流程

---

129 mobx-miniprogram 介绍

mobx-miniprogram 是一个基于 flobx 的 状态管理库。

使用 mobx-miniprogram 定义管理的状态是响应式的 , 当状态一旦它改变 , 所有关联组件

都会自动更新相对应的数据

通过该扩展工具库 , 开发者可以很方便地在小程序中全局共享的状态 , 并自动更新视图组

件 , 从而提升小程序的开发效率

注意事项

1. mobx-miniprogram 的作用 : 创建 Store 对象 , 用于存储应用的数据

2. mobx-miniprogram-bindings 的作用 : 将状态和组件、页面进行绑定关联 , 从而在组件和

页面中操作数据

需要安装两个包 :mobx-miniprogram 和 mobx-miniprogram-bindings

安装命令：

之后在微信小程序点击工具，点击构建 npm ，完成构建。

130 创建 Store 对象

mobx-miniprogram 三个核心概念 :

1.observable: 用于创建一个被监测的对象 , 对象的属性就是应用的状态 (state), 这些状态

会被转换成响应式数据。

2. action: 用于修改状态 (state) 的方法 , 需要使用 action 函数显式的声明创建。

3. computed: 根据已有状态 (state) 生成的新值。计算属性是一个方法 , 在方法前面必须加

上 get 修饰符

mobx-miniprogram 使用步骤

在项目的根目录下创建 store 文件夹 , 然后在该文件夹下新建 index.js

在 /store/index.js 导入 observable 、 action 方法

import { observable, action } from 'mobx-miniprogram'

使用 observable 方法需要接受一个 store 对象 , 存储应用的状态

observable 用于创建一个被监测的对象，对象的属性是应用的状态 (state) ，状态会被自

动转换为响应式数据。

action 函数是用来显示的定义 action 方法， action 方法是用来修改、更新状态。

计算属性 computed 是根据已有的状态产生新的状态。计算属性前面需要使用 get 修饰

符进行修饰。计算属性内部必须有返回值。

131 在组件中使用数据

需 要 Page 或 者 Component 中 对 共享 的 数 据 进 行读 取 、 更 新操 作 , 则 要 使 用

mobx-miniprogram-bindings

mobx-miniprogram-bindings 的作用就是将 Store 和 页面或组件进行绑定关联

如 果 需 要 在 组 件 中 使 用 状 态 , 需 要 mobx-miniprogram-bindings 库 中 导 入

ComponentWithStore 方法 在使用时 : 需要将 Component 方法替换成 ComponentWithStore 方法 , 原本组件配置项 也需要写到该方法中

在替换以后 , 就会新增一个 storeBindings 配置项，配置项常用的属性有以下三个：

1. store: 指定要绑定的 Store 对象

2. fields: 指定需要绑定的 data 字段

3. actions: 指定需要映射的 actions 方法

注意事项 :

导入的数据会同步到组件的 data 中

导入的方法会同步到组件的 methods 中

全局注册

132 133 在页面中使用数据-方式

Component 方法用于创建自定义组件。

小程序的页面也可以视为自定义组件 , 因此页面也可以使用 Component 方法进行构建 ,

从而实现复杂的页面逻辑开发。

如果我们使用了 Component 方法来构建页面 , 那么页面中如果想使用 Store 中的数据 ,

使用方式和组件的使用方式是一样的

从 mobx-miniprogram-bindings 库中导入 ComponentWithStore 方法将 Component 方

法替换成 ComponentWithStore 方法

然后配置 storeBindings 从 Store 中映射数据和方法即可

添加编译模式

使用 Component 替换 page 方法编译

如果不想使用 Component 方法构建页面。这时候需要使用 mobx-miniprogram-bindings

提供的 BehavliorWithStore 方法来和 Store 建立关联

使用方式：

新建 behavior 文件 , 从 mobx-miniprogram-bindings 库中导入 BehaviorWithStore 方法

在 BehaviorWithStore 方法中配置 storeBindings 配置项从 Store 中映射数据和方法

在 Page 方法中导入创建的 behavior, 然后配置 behavior 属性 , 并使用导入的 behavior

134 fields、actions 对象写法

fields 、 actions 有两种写法 : 数组 或者 对象。

如果 fields 写成对象方式 , 有两种写法 :

1. 映射形式 : 指定 data 中哪些字段来源于 store 以及它们在 store 中对应的名字。

例如 { a: 'numA',b: 'numB'}

2. 函数形式 : 指定 data 中每个字段的计算方法

例如 {a:() ⇒ store.numA, b:()= anotherStore.numB }

如果 actions 写成对象方式 , 只有一种写法 :

映射形式 : 指定模板中调用的哪些方法来源于 store 以及它们在 store 中对应的名字。

一般情况用数组写法，如果要自定义再改成对象写法就行

135 绑定多个 store 以及命名空间

开发中 , 一个页面或者组件可能会绑定多个 Store ，这时候需要将 storeBindings 改造成数

组。数组每一项就是一个个要绑定的 Store 。

如果多个 Store 中存在相同的数据 , 显示会出现异常。

还可以通过 namespace 属性给当前 Store 开启命名空间 , 在开启命名空间以后 , 访问数

据的时候 , 需要加上 namespace 的名字才可以。

136 计算机属性和监听器

安装命令：

安装完成之后需要构建 npm

之后新建组件然后注册在主页中使用

监听器 wath

137 mbox 与 compute 结合使用

解决方案 :1 使用旧版 api 2 使用兼容写法

Mobx 允许开发人员在应用程序中统一管理所有组件之间的公共数据。通过使用 Mobx,

开发人员可以轻松地将 token 存储到全局状态中 , 并实现在整个应用程序中的共享。并且 ,

存储到 Mobx 中的数据是响应式的 , 数据发生了变化 , 使用的地方也会发生变化 安装 Mobx, 然后进行实例化 , 在实例化的时候 , 创建共享的数据 Token, 以及对 Token 修改

的方法，然后使用 Component 构造页面 , 并导入 ComponentWithStore 方法 , 并配置

storeBindings 方法让页面和 Store 对象关联

安装依赖，安装完成后构建 npm

命令： npm i mobx-miniprogram mobx-miniprogram-bindings

138 什么是 token

Token 是服务器生成的一串字符串 , 用作客户端发起请求的一个身份令牌

当第一次登录成功后 , 服务器生成一个 Token 便将此 Token 返回给客户端 , 客户端在接

收到 Token 以后 , 会使用某种方式将 Token 保存到本地。以后客户端发起请求 , 只需要在请

求头上带上这个 Token, 服务器通过验证 Token 来确认用户的身份 , 而无需再次带上用户名

和密码。

139 Token 的具体流程

1. 客户端向服务器发起登录请求 , 服务端验证用户名与密码

2. 验证成功后 , 服务端会签发一个 Token, 并将 Token 发送到客户端

3. 客户端收到 token 以后 , 将其存储起来 , 比如放在 LocalStorage 、 sessionStorage 中

4. 客户端每次向服务器请求资源的时候需要带着服务端签发的 Token, 服务端收到请求 ,

然后去验证客户端请求里面带着的 Token ，如果验证成功 , 就向客户端返回请求的数据

小程序登录流程介绍

140 实现小程序登录功能

给登录按钮绑定点击事件，在时间处理程序中，调用 wx.logoin 获取登录凭证 code, 然后

调用后端端口，将临时登录凭证 code 传递给后端。

141 用户信息存储到 Store

token 存储到 Store

将 token 存储到了本地 , 但是将 Token 直接存储到本地不方便对数据进行操作 , 要先从

本地存储取出 , 然后在使用 , 关键的一点 , 存储到本地的数据不是响应式的 , 当本地存储里面的

内容发生改变 , 页面不会发生改变

142 获取用户信息并存储到 store

在 store/index.js 中新增 userInfo 可观测字段 , 同时创建赋值和删除的 action 方法

然后熟悉接口文档 : 获取用户信息

在熟悉了接口文档以后 , 根据接口文档封装接口 API 函数

获取用户信息的接口需要使用 token, 所以我们需要在登录成功以后 , 调用获取用户信息

的接口

登录成功以后 , 将用户信息存储到本地 , 然后调用 action 方法 , 将用户信息存储到 Store

实现步骤：

1. 在 store/userstore.js 中新增 userInfo 字段 , 同时创建修改的 action 方法

2. 在 login.js 中使用映射 userInfo 数据和 setUserInfo 方法

3. 在 /api/user.js 文件中根据接口文档 , 创建获取用户信息的 API 函数 reqUserInfo

4. 在 /pages/Login/Login.js 中导入封装好的获取商品列表的 API 函数

5. 创建 getUserInfo 方法 , 在 getUserInfo 方法中调用接口 API 函数 reqUserInfo

6. 在登录成功以后 , 调用 getUserInfo 方法获取用户 , 然后将用户信息存到本地以及

Store

143 使用数据渲染用户信息

从 Store 中取出用户信息数据 , 并渲染到页面上

个人中心页面展示用于展示个人信息

如果用户没有登录的时候 , 展示没有登录的头像、提示用户登录的文案信息 , 不展示设置

按钮

如果用户已经登录 , 展示用户的头像和昵称 , 并且展示设置按钮 , 方便用户对收货地址、头

像、昵称进行更改

实现步骤 :

1. 在个人中心页面导入 ComponentwithStore 方法构建页面

2. 配置 storeBindings 让组件和 Store 建立关联

3. 渲染页面

144 配置分包以及与下载

随着项目功能的增加 , 项目体积也随着增大 , 从而影响小程序的加载速度 , 影响用户的体

验。

因此我们需要将 更新个人资料 和 收货地址 功能配置成一个分包

当用户在访问设置页面时 , 还预先加载 更新个人资料 和 收货地址 所在的分包

145 渲染用户信息

点击个人中心的设置 , 然后点击修改个人资料 , 就可以对用户的头像和昵称进行修改

在这个页面中 , 我们需要先渲染信息用户 , 用户信息目前是存储到 Store 中的 , 因此我们

需要先从 Store 中取出用户信息的数据 , 进行渲染的渲染。

让 页 面 和 Store 数 据 建 立 关 联 , 可 以 使 用 mobx-miniprogram-bindings 提 供 的

BehaviorWithStore 方法

实现步骤 :

新建 behavior.js 文件 , 从 mobx-miniprogram-bindings 库中导入 BehaviorWithStore 方法

在 BehaviorWithStore 方法中配置 storeBindings 配置项从 Store 中映射数据和方法

在 Page 方法中导入创建的 behavior, 然后配置 behavior 属性 , 并使用导入的 behavior

146 更新用户头像

获取头像临时路径

使用小程序提供的头像填写能力步骤

将 button 组件 open-type 的值设置为 chooseAvatar

当用户选择需要使用的头像之后，可以通过 bindchooseavatar 事件回调获取到头像

信息的临时路径

实现步骤：

1. 给 button 按钮绑定 open-type 属性，值为 chooseAvatar

2. 用户点击了头像后，在 bindchooseavatar 事件回调获取到头像信息的临时路径

注意事项

临时路径具有失效时间，需要将临时路径上传到公司的服务器，获取永久的路径，再 +

在获取永久的路径以后，需要使用永辉路径更新 headimgurl 。用户点击保存按钮，才算真正

的更新头像和昵称

头像上传到服务器

通过 bindchooseavatar 事件回调获取到头像信息的临时路径。

当临时文件超过一定的容量的时候 , 小程序就会将临时文件清理掉 , 也就是说临时文件可

能会随时失效 , 为了解决这个问题 , 我们需要将获取到头像信息的临时路径上传到自己的服务

器。如果需要将本地资源上传到服务器 , 需要使用到小程序提供的 API 方法 :wx.uploadFile ，

第二种实现本地资源上传的方式：使用 mina-request 提供的 upload 实例方法

完成头像更新

当用户点击保存时 , 就需要实现头像的更新功能 , 既然需要同步到服务器 , 依然需要调用

接口

首先熟悉接口文档 : 更新用户信息

熟悉了接口文档以后 , 根据接口文档封装接口 API 函数 , 点击保存的时候调用接口函数 ,

然后将最新的用户信息同步到服务器。

在同步到服务器以后 , 我们需要将用户信息存储到本地同时同步到 Store

实现步骤 :

1. 在 /api/user.js 文 件 中 根 据 接 口 文 档 , 创 建 获 取 用 户 信 息 的 API 函 数 reqUpdateUserInfo

2. 给修改个人资料的保存按钮绑定点击事件 , 触发 updateUserInfo 回调函数

3. 在回调函数中调用接口 API 函数 reqUpdateUserInfo, 同时传入用户的信息

4. 更新用户信息以后 , 将用户信息存储到本地同时同步到 Store

147 更新用户昵称

需要使用 form 组件包裹住 input 输入框以及按钮组件

需要给 input 输入框添加 type 属性，属性只需要设置为 nickname

只有将 input 输入框 type 属性属性值需要设置为 nickname ，键盘上方才会显示微信昵

称

需要给 input 输入框添加 name 属性

form 组件会自动收集带有 name 属性的表单元素的值

给按钮添加 form-type 属性，如果属性值是 reset, 就是重置表单

给按钮添加 form-type 属性，如果属性值是 submit ，就会将按钮变为提交按钮

在点击确定按钮时，就会触发 form 组件的提交事件

148 定义新增参数以及封装接口 API

点击新建地址按钮，需要跳转到新增地址页面

因为新增和编辑收货地址是同一个页面，我们需要在这个页面处理新增和编辑功能，为

了做区分处理。

我们在后续做进行编辑的时候传递 id 属性，值为收货地址的 id 值。

149 收集省市区数据

省市区的结构使用了小程序本身自带的 picker 件 , 并将组件的 mode 属性设置为了

region, 从而变成省市区选择器

如果想获取省市区的数据 , 需要给 picker 选择组件添加 change 事件来监听属性值的

改变 , 获取选中的省市区

Mode ：给组件添加 mode 属性设置为了 region, 从而变成省市区选择器

Value ：要求是一个数组，表示选中的省市区，默认选中每一列的第一个值

Bindchanga ：来监听属性值的改变，也就是获取选中的省市区

需要将请求参数放到 data 对象下，方便在模版中绑定数据

picker 组件是小程序 提供的组件，从底部弹起滚动选择器

mode 选择器类型， mode 属性值是 region ，弹起的就是省市区选择器

Vslue ：要求是一个数组，选中的省市区

150 收集新增地址其他请求参数

使用简易双向数据 model:value 绑定来收集新增地址表单数据。

在将数据收集以后 , 需要组织两个数据 :

1. 是否是默认地址 ,0 不设置为默认地址 ,1 设置为默认地址

2. 拼接完整的收货地址

实现步骤 :

1. 使用简易双向数据绑定来收集新增地址表单数据。

2. 给按钮织绑定点击事件，在事件处理函数中收集并整理数据

151 地理定位功能介绍

小程序地理功能定位是指通过小程序开发平台 API ，来获取用户的地理位置信息。用户

在使用小程序时，可以授权小程序获取自己的地理位置 1. wx.getLocation() ：获取当前的地理位置

2. Wx.chooseLocation() ：打开地图选择位置

申请开通：暂时只对部分类目的小程序开放，需要先通过类目审核，然后在小程序管理

后台， [ 开发 ]-[ 开发管理 ] - [ 接口设置 ] 中自助开通该接口权限

使用方法：

1. 在 app.json 中配置 requiredPrivateInfos 进行声明启用

2. 在调用 wx.getLocation() 时需要在 app.json 配置 permission 字段 , 同时使用

scope.userLocation 声明收集用户选择的位置信息的目的 ,wx.chooseLocation() 接口不需要配

置该字段 , 可以直接进行调用

3. 在配置好以后 , 调用 wx.getLocation() 和 wx.chooseLocation() 接口

152 拒绝授权后的解决方案

在调用 wx.getLocation() 获取用户地理位置时，如果用户选择拒绝授权，代码会直接抛

出错误。

在拒绝授权以后，再次调用 wx.getLocation() 时，就不会在弹窗询问用户是否允许授权。

如果给按钮添加 open-type 属性，属性设置为 openSetting ，就会打开微信客户端小程

序授权页面

153 开通腾讯位置服务

使用 wx.chooseLocation() 能够很方便的让用户来选择地理位置 , 但是 wx.chooseLocation()

返回的数据并没有包含省市区、省市区编码数据。而新增收货地址接口 , 需要传递省市区、

省市区编码数据。 这时候我们可以使用 腾讯位置服务 将返回的经度、纬度进行逆地址解析 , 转换成详细

地址。

腾讯位置服务专为小程序开发提供了 JavaScript SDK, 方便开发者在小程序中可以使用

腾讯地图服务。

使用腾讯位置服务可以很方便的让开发者实现地址解析、逆地址解析等功能。

使用方式：

1. 申请开发者密钥 (key): 申请密钥

2. 开 通 webserviceAPI 服 务 : 控 制 台 -> 应 用 管 理 -> 我 的 应 用 -> 添 加 key-> 勾 选

WebServiceAPI-> 保存

( 小程序 SDK 需要用到 webserviceAPI 的部分服务 , 所以使用该功能的 KEY 需要具备相应

的权限 )

3. 下载微信小程序 JavaScriptSDK, 微信小程序 JavaScriptSDK v1.1 JavaScript SDK v1.2

安全域名设置 , 在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名”中设置

request 合法域名 , 添加 https://apis.map.qq.com

154 LBSni 逆地址解析

使用步骤 :

1. 在项目中引入 SDK 核心类

2. 在 onLoad 中实例化 API 核心类 , 同时配置创建的 key

3. 使用实例方法 reverseGeocoder 方法进行逆地址解析 , 将提供的坐标转换为详细的地

址位置信息

155 表单验证

Async-validator 基本使用

156 新增收货地址表单验证

在点击新增收货地址的时候 , 我们需要对用户输入的值进行验证。产品需求如下 :

收货人不能为空 , 且不能输入特殊字符

手机号不能为空 , 且输入的手机号必须合法

省市区不能为空

详细地址不能为空

157 实现新增收货地址

在实现了新增收货地址的数据收集、表单验证以后 , 我们需要实现新增收货地址的功能 ,

将用户的收货地址到服务器。我们直接根据接口文档 , 封装接口 API, 然后在表单验证以后 , 进

行收货地址的添加即可。

实现步骤 :

在对新增收货地址请求参数验证以后 , 将封装好的新增收货地址的 API 函数调用

在新增收货地址成功以后 , 跳转到收货地址详情页面。

158 收货地址列表渲染

渲染收货地址需要收货地址的数据 , 需要调用接口获取收货地址数据 , 使用返回的数据进

行结构的渲染。

先熟悉接口文档 : 获取收货地址

在熟悉了接口文档以后 , 根据接口文档封装接口 API 函数 , 然后在页面调用 API 函数获取

收货地址的数据 , 在获取到数据以后 , 使用后端返回的数据对页面进行渲染。

实现步骤 :

1. 在 onShow 钩子函数中调用 reqAddressList 方法

2. 在获取到数据以后 , 使用后端返回的数据对页面进行渲染

159 实现更新收货地址

新增和编辑收货地址页面是同一个页面 , 我们需要在这个页面处理新增和编辑功能

在收货地址列表页面 , 点击更新按钮时 , 需要跳转到新增 / 更新页面 , 同时需要将更新这一

项的 id 传递给新增 / 更新页面。

在 onLoad 中获取 id, 并且使用 id 区分用户是进行新增还是编辑的操作。

如果存在 id, 在获取需要更新的收货地址的数据 , 并进行页面的回显用户的收货地址 , 并

且需要更新导航栏标题

因为我们之前直接是将数据放到 data 中的 , 所以我们直接将数据使用 setData 赋值即

可

首先熟悉接口文档 : 获取收货地址详情

wx.setNavigationBarTitle: 动态设置当前页面的标题

160 实现删除收货地址

SwipeCell 自动收起删除滑块

配置商品管理分包

随着项目功能的增加 , 项目体积也随着增大 , 从而影响小程序的加载速度 , 影响用户的体

验。

因此我们需要将 商品列表 和 商品详情 功能配置成一个分包 ,

当用户在访问设置页面时 , 还预先加载 商品列表 和 商品详情 所在的分包

161 删除滑块

目前我们已经实现了滑块删除收货地址的功能 ,

但是我们会发现点击页面空白区域或者点击其他收货地址时，删除的滑块不会自动收起。

如果想实现点击空白区域自动收起滑块功能，需要在点击空白区域以及其他收货地址时，

获取要收起的滑块实例。

调用对应滑块的实例方法 close 即可。

162 封装商品模块接口 API

为了方便后续进行商品管理模块的开发，我们在这一届将商品管理所有的接口封装成接

口 API 函数

163 商品列表-准备列表请求参数

当用户点击了商品分类以后 , 需要获取对应分类的商品列表信息 , 因此我们需要先获取到

该分类的 id, 只要获取到 id 以后 , 才能向服务器获取对应分类的商品列表信息。同时我们需

要查看接口文档 , 查看是否需要使用其他参数 , 我们提前将参数准备好。

通过接口文档得知，我们需要以上的参数，我们先将参数提前声明，然后在发起请求获

取商品列表的数据

Object.assign 用来合并对象，后面对象对的属性会往前进行合并

164 获取商品列表数据并渲染

在准备商品列表的请求参数以后 , 在页面调用 API 函数获取商品列表的数据 , 在获取到

数据以后 , 使用后端返回的数据对页面进行渲染。

实现步骤 :

1. 在 /pages/goods/list/list.js 中导入封装好的获取商品列表的 API 函数

2. 页面数据在页面加载的时候进行调用 , 在 onLoad 钩子函数中调用 reqGoodsList 方法

3. 在获取到数据以后 , 使用后端返回的数据对页面进行渲染

165 实现上拉加载更多功能

当用户从下向上滑动屏幕时 , 需要加载更多的商品数据。

首先需要在 .js 文件中声明 onReachBottom 方法监听用户是否进行了上拉

当用户上拉时 , 需要对 page 页码进行加 1, 代表要请求下一页的数据

当参数发生改变后 , 需要重新发送请求 , 拿最新的 page 向服务器发送请求获取数据。

在下一页的商品数据返回以后 , 将最新的数据和之前的数据进行合并

实现步骤 :

1. list.js 文件中声明 onReachBottom 事件处理函数 , 监听用户的上拉行为

2. 在 onReachBottom 函数中加 page 进行加 1 的操作 , 同时发送请求获取下一页数据

3. 在 getGoodsList 函数中 , 实现参数的合并

166 判断数据是否加载完毕

判断数据是否加载完，如果加载已经加载完毕，需要给用户进行提示

实现步骤：

1. 从 data 解构数据商品列表和总条数

2. 开始让 goodsList 长度和 total 进行对比

3. 如果数据相等，商品列表已经加载完毕，如果数据已经加载完毕，需要给用户进行

提示，同时不让代码继续往下运行，不在获取商品列表数据

167 节流阀进行列表节流

在用户网速很慢的情况下 , 如果用户在距离底部来回的进行多次滑动 , 可能会发送一些无

意义的请求、造成请求浪费的情况 , 因此需要给上拉加载添加节流功能。

我们使用节流阀来给商品列表添加节流功能。

在 data 中定义节流阀状态 isLoading, 默认值是 false 。

在请求发送之前 , 将 isLoading 设置为 true, 表示请求正在发送。

在请求结束以后 , 将 isLoading 设置为 false, 表示请求已经完成。

168 实现下拉刷新功能

下拉刷新是小程序中常见的一种刷新方式 , 当用户下拉页面时 , 页面会自动刷新 , 以便用

户获取最新的内容。

小程序中实现上拉加载更多的方式 :

1. 在页面 .json 中开启允许下拉 , 同时可以配置 窗口、 Loading 样式等

2. 在页面 .js 中定义 onPullDownRefresh 事件监听用户下拉刷新

169 获取并渲染商品详情

点击首页轮播图以及点击商品列表商品的时候 , 需要跳转到商品详情页面

在跳转时将商品的 id 传递到了商品详情页面 , 只需要使用 id 向后端服务器请求数据 ,

获取对应商品的详情数据

在获取到数据以后 , 使用后端返回的数据对页面进行渲染。 实现步骤 :

1. 在 /pages/goods/detail/detail.js 中导入封装好的获取商品列表的 API 函数

2. 页面数据在页面加载的时候进行调用 , 在 onLoad 钩子函数中调用 reqGoodsInfo 方

法

3. 在获取到数据以后 , 使用后端返回的数据对页面进行渲染

详情图片预览功能

当点击商品的图片时 , 需要将图片进行全屏预览

如果想实现该功能 , 需要使用小程序提供的 API:wx.previewImage(), 用来在新页面中全屏

预览图片。

实现步骤 :

1. 给展示大图的 image 组件绑定点击事件 , 同时通过自定义属性的方式 , 传递当前需要

显示的图片 http 链接

2. 同时商品详情的数组数据传递给 urls 数组即可

170 优化：配置@路径别名优化访问路径

在对小程序进行分包时 , 如果访问小程序根目录下的文件 , 那么访问的路径就会很长。

在 Vue 中 , 可以使用 @ 符号指向源码目录 , 简化路径 , 小程序也给提供了配置的方式。

在小程序中可以在 app.json 中使用 resolveAlias 配置项用来自定义模块路径的映射规

则

注意事项：

resolveAlias 进行的是路径匹配，其中的 key 和 value 须以 /* 结尾

171 封装购物车接口 API

注意事项：

1. 适用于【商品详情加入购物车】以及【购物车更新商品数量】

2. 如果是【更新购物车商品数量】。传递的 count 需要是差值

172 模板分析和渲染

点击加入购物车和立即购买的时候 , 展示购物弹框 , 在弹框中需要用户选择购买数量和祝

福语

点击加入购物车和立即购买 , 触发的是同一个弹框。

因此点击弹框中的确定按钮时 , 我们需要区分当前是加入购物车操作还是立即购买操作。

这时候定义一个状态 buyNow 做区分 ,buyNow 等于 1 代表是立即购买 , 否则是加入购物

车

产品需求：

1. 如果点击的是加入购物车 , 需要将当前商品加入到购物车

2. 如果点击的是立即购买 , 需要跳转到结算支付页面 , 立即购买该商品

3. 如果是立即购买 , 不支持购买多个商品

结构分析 :

点击立即购买和加入购物车的时候 , 通过 show 属性 , 控制弹框的隐藏和展示

173 关联 Store 对象

当用户点击加入购物车 或者 立即购买时 , 需要判断用户是否进行了登录。

我们需要使用 Token 进行判断 , 因此需要让页面和 Store 对象建立关联。

这时候可以使用 BehaviorWithStore 让页面 和 Store 对象建立关联。

174 加入购物车和立即购买区分处理

点击加入购物车以及立即购买以后 , 需要先判断是否进行了登录 , 如果用户没有登录过 ,

需要先跳转到登录页面进行登录。

如果点击的是 加入购物车 , 我们只需要调用 加入购物车 接口即可 ( 需要获取商品的 ID 、

购买数量、祝福语 )

如果点击的是 立即购买 , 我们需要携带参数跳转到商品结算页面 ( 获取商品的 ID 以及

祝福语跳转到结算页面 )

购买数量的限制有 4 个限制 , 这 4 个限制直接使用 Vant 组件提供的属性进行限制即

可 :

1. 必须是正整数 , 最小是 1, 最大是 200

2. 若输入小于 1, 则重置为 1

3. 若输入大于 200, 则重置为 200

4. 若输入的是其他值 , 则重置为 1

175 展示购物车购买数量

判断用户是否进行了登录。

如果没有登录过 , 则不展示购物车商品的数量。

如果用户登录过 , 则需要展示购物车商品的数量 , 则获取购物车列表数据 , 通过累加计算

得出商品购买数量

Info 属性就是在右上角展示角标， info 属性的属性值要求是字符串类型

实现步骤 :

进入商品详情 , 调用方法 , 在方法中判断 token 是否存在

如何存在 , 则获取购物车列表数据 , 通过累加计算得出商品购买数量 , 展示购买的数量

不存在则不执行任何逻辑

176 购物车关联 Store 对象

当用户进入购物车页面时时 , 需要判断用户是否进行了登录来控制页面的展示效果

这时候我们就需要使用 Token 进行判断 , 因此需要让页面和 Store 对象建立关联。

因为购物车页面采用的 Component 方法进行构建 这时候可以使用 ComponentWithStore 让页面 和 Store 对象建立关联。

177 获取并渲染购物车列表

1. 如果没有进行登录 , 购物车页面需要展示文案 : 尚未登录 , 点击登录

2. 如果用户进行登录 , 获取购物车列表数据

购物车没有商品 , 展示文案 : 还未添加商品

购物车列表有数据 , 需要使用数据对页面进行渲染

实现步骤 :

1. 导入封装好的获取列表数据的 API 函数

2. 在 onShow 钩子中 , 根据产品的需求 , 处理页面的提示

3. 在获取到数据以后 , 使用后端返回的数据对页面进行渲染

178 更新商品的购买状态

点击商品的复选框时 , 更新商品的购买状态。

1. 获取商品最新的购买状态 , 将最新的状态同步到服务器 ( 需要调用封装的接口 API 函

数 ,0 不购买 ,1 购买 )

2. 在服务器更新状态更新成功以后 , 将本地的数据一并改变。

实现步骤 :

1. 导入封装好的获取列表数据的 API 函数

2. 当点击切换切换商品状态的时候 , 调用 reqUpdateGoodStatus, 并传参

3. 在更新成功 , 将本地的数据一并改变。

179 控制权权限按钮的选中状态

购物车列表中每个商品的状态 :isCheckd 都是 1, 说明每个商品都需要进行购买。

这时候就需要控制底部工具栏全选按钮的选中效果。

基于购物车列表中已有的数据 , 产生一个新的数据 , 来控制全选按钮的选中效果 , 可以使

用 计算属性 来实现。

安装框架拓展 computed

npm i miniprogram-computed

计算属性会被挂载到 data 对象中

computed 函数不能使用 this 来访问 data 中的数据

如果想访问 data 中的数据，需要使用形参

实现步骤：

1. 在 cart 组件中导入 miniprogram-computed 提供的 behavior

2. 在 componentWithStore 中注册 behavior

3. 再新增一个 computed 计算属性配对象

180 实现全选和全不选功能

点击全选 , 控制所有商品的选中与全不选效果

1. 点击全选按钮 , 获取全选按钮的选中状态 (true,false), 同时控制所有商品的选中与全不

选效果

2. 在获取到全选按钮状态以后 , 同时需要将状态同步给服务器 (1 是全选 ,0 是全不选 )

3. 在服务器更新成功以后 , 需要将本地的购物车商品选中状态也进行改变

实现步骤 :

1. 导入封装好的全选的 API 函数

2. 当点击全选和全不选按钮的时候 , 调用 reqCheckAll, 并传参

3. 在更新成功 , 将本地的数据一并改变。

181 更新商品购买数量思路分析

在输入框中输入购买的数量，并不是直接将输入的数量同步给服务器，而是需要计算差

值，服务器端进行处理

注意事项：更新购买数量和加入购物车。使用的是同一个借口，为什么加入购物车没有

计算差值，这是因为在加入购物车以后，服务器对商品购买数量直接进行了累加。

182 更新商品购买数量

183 更新商品购买数量防抖

每次改变购物车购买数量的时候 , 都会触发 changeBuyNum 事件处理程序 , 这会频繁的

向后端发送请求 , 给服务器造成压力

我们希望用户在输入最终的购买数量 , 或者停止频繁点击加、减的以后在发送请求 , 在将

购买数量同步到服务器。

这时候就需要使用 防抖 来进行代码优化。

Licia 是实用 JavaScript 工具库 , 该库目前拥有超过 400 个模块 , 同时支持浏览器、 node

及小程序运行环境。可以极大地提高开发效率。

安装命令

npm i miniprogram-licia --save

184 购物车商品合计

在订单提交栏位置 , 展示要购买商品的总金额。

需要判断购物车中哪些商品被勾选 , 然后将勾选商品的价格进行累加。

当用户更新了商品的状态 , 或者更新了商品的购买数量 , 我们都需要重新计算订单总金额。

我们需要基于购物车列表的数据 , 产生订单总金额 , 在这里我们使用依然使用 computed

来实现商品合计的功能

需要注意底部工具栏组件展示价格，默认是以 分 的形式进行展示，如果需要以 元 的

方式展示需要 * 100

实现步骤 :

在 computed 配置项 , 新增 totalPrice 函数用来计算商品价格总和

185 删除购物车中的商品

配置分包并跳转到结算页面

随着项目功能的增加 , 项目体积也随着增大 , 从而影响小程序的加载速度 , 影响用户的体

验。

因此我们需要将 结算支付 功能配置成一个分包 ,

当用户在访问设置页面时 , 还预先加载 结算支付 所在的分包

186 封装结算支付的接口 API

为了方便后续进行结算支付模块的开发，我们将结算支付所有的接口封装成接口 API

函数

187 获取收货地址

进入结算支付页面后 , 需要获取收货地址信息 , 在获取到收货地址以后 , 需要进行判断 ,

如果没有获取到收货地址 , 需要展示添加收货地址的结构 ,

如果获取到了收货地址 , 需要渲染收货地址。

实现步骤 :

1. 在进入结算页面的时候 , 调用接口 API 函数 , 获取数据

2. 然后根据数据并渲染结构

188 更新收货地址功能

当用户需要更改收货地址时 , 我们需要跳转到收货地址页面 , 重新选择收货地址

当用户点击了某个地址以后 , 我们需要将该地址显示到商品结算页面中。 更新收货地址功能 , 采用 getApp() 全局共享数据的方式来实现。

实现步骤 :

1. 在 app.js 中定义全局共享的数据 gLobalData.address

2. 点击箭头 , 携带参数跳转到收货地址页面 , 标识是从订单结算页面进入

3. 在选择收货地址成功以后 , 将数据存储到 gLobalData.address 中 , 然后返回到订单结

算页面。

在订单结算页面判断 gLobalData.address 是否存在收货地址数据 , 如果存在则渲染

189 获取订单详情数据

商品结算页面数据获取收货地址以及商品订单信息

实现步骤 :

导入封装的接口 API 函数

在进入结算页面的时候 , 调用接口 API 函数 , 获取数据 , 然后根据数据并渲染结构即可

190 获取立即购买数据

当用户从商品详情点击立即购买进入商品结算页面的时候 , 我们需要在商品结算页面展

示立即购买商品的基本信息。

在跳转到商品结算页面的时候 , 我们已经携带了商品的 id 和 祝福语。

在结算页面 , 只需要获取到传递的参数 , 然后根据传递的参数调用接口即可。

实现步骤 :

1. 在页面打开的时候 ,onShow 中接受传递的参数 , 并赋值给 data 中的状态

2. 在 getOrderInfo 函数中 , 判断立即购买商品的 id 是否存在 , 如果存在调用立即购买

的接口

获取数据后 , 然后根据数据并渲染结构即可

191 收集送达时间

当选择送达日期的时候 , 需要选择收货的时间 , 我们希望获取到的收货的时间格式是 : 年

月日

但是我们使用的是小程序提供的 vant 组件 , 组件返回的时候并不是真正的时分秒 , 而是

时间戳，需要将时间戳转换成年月日在页面中进行展示才可以，可以调用小程序给提供的日

期格式化方法对时间进行转换

这时候可以调用小程序项目初始化时 , 小程序封装的时间格式化工具

实现步骤 :

1. 在商品结算页面导入封装好的格式化时间的方法 formatTime

2. 调用 formatTime, 传入需要格式化的时间戳

表单数据验证

使用 async-validator 对代码进行验证

1. 收货地址不能为空

2. 订购人姓名不能为空 , 且不能输入特殊字符

3. 订购人手机号不能为空 , 且输入的手机号必须合法

4. 送达日期不能为空

192 提交订单请求参数验证

表单数据验证

使用 async-validator 对代码进行验证

收货地址不能为空

订购人姓名不能为空，且不能输入特殊字符 订购人手机号不能为空，且输入的手机号必须合法

送达日期不能为空

193 梳理小程序支付流程

194 创建平台订单

用户在完成选购流程，确认商品信息、订购人、收货人等信息无误后，

用户需要点击提交订单按钮，开始进行下单支付，这时候需要先创建平台订单。

实现步骤 :

1. 在提交订单的事件处理函数中调用封装的接口 API 函数

2. 在接口调用成功以后，将服务器响应的订单编码挂载到页面实例上。

195 获取预付单信息

将订单编号发送给公司的后端，公司的后端会从数据库找到对应订单的信息。

然后调用微信服务器的 下单接口 进行创建订单，订单创建成功以后，微信服务器会给

公司后端返回预付单信息。

公司后端对返回的预付单信息进行加密，返回给小程序客户端。

这一步，咱们需要做的就是：订单编号发送给公司的后端，其他逻辑时后端来完成的。

注意事项：

小程序支付后面的代码，大伙在实现的时候，会出现异常。

这是因为没有小程序的开发权限，以后在实际开发中，只需要参考当前流程进行开发即

可

196 发起微信支付

小程序客户端在接收支付参数后，调用

wx.requestPayment() 发起微信支付，

唤醒支付弹窗，用户开输入支付密码或者进行指纹等操作，微信服务器会进行验证，如

果验证成功，就会发起支付。

然后会将支付结果返回给公司后端，也会返回给 wx.requestPayment()

并且会微信通知用户支付结果

197 支付状态查询

通过调用后端接口获取支付状态，如果支付成功，需要给用户提示，同时跳转到订单列

表页面。

公司后端开始向微信服务器发送请求，查询支付结果

公司服务器会将微信服务器返回的支付结果，返回到客户端

客户端根据查询结果跳转到订单列表页面

198 梳理订单列表模块

将商品管理所有的接口封装成接口 API 函数

199 代码优化与代码质量检测

需要给小程序页面设置分享功能。

但是并不是所有页面都需要设置分享功能，

具体哪些页面需要设置分享功能，可以和产品经理进行协商。

200 演示上线流程

项目最终页面展示