目录
十、登录与支付
10.0 创建 settle 分支
10.1 点击结算按钮进行条件判断
10.2 登录
10.2.1 定义 my 页面的编译模式
10.2.2 实现登录和用户信息组件的按需展示
10.2.3 实现登录组件的基本布局
10.2.4 点击登录按钮获取微信用户的基本信息
10.2.5 将用户的基本信息存储到 vuex
10.2.6 登录获取 Token 字符串
10.2.7 将 Token 存储到 vuex
10.3 用户信息
10.3.1 实现用户头像昵称区域的基本布局
10.3.2 渲染用户的头像和昵称
10.3.3 渲染第一个面板区域
10.3.4 渲染第二个面板区域
10.3.5 渲染第三个面板区域
10.3.6 实现退出登录的功能
10.4 三秒后自动跳转
10.4.1 三秒后自动跳转到登录页面
10.4.2 登录成功之后再返回之前的页面
10.5 微信支付
10.5.1 在请求头中添加 Token 身份认证的字段
10.5.2 微信支付的流程
10.5.3 创建订单
10.5.4 订单预支付
10.5.5 发起微信支付
10.6 分支的合并与提交
十一、发布
11.1 为什么要发布
11.2 发布小程序的流程
11.3 发布为 Android App 的流程
十、登录与支付
10.0 创建 settle 分支
运行如下的命令，基于 master 分支在本地创建 settle 子分支，用来开发登录与支付相关的功能：
git checkout -b settle
10.1 点击结算按钮进行条件判断
说明：用户点击了结算按钮之后，需要先后判断是否勾选了要结算的商品、是否选择了收货地址、是否登录。
1. 在 my-settle 组件中，为结算按钮绑定点击事件处理函数：
2. 在 my-settle 组件的 methods 节点中声明 settlement 事件处理函数如下：
3. 在 my-settle 组件中，使用 mapGetters 辅助函数，从 m_user 模块中将 addstr 映射到当前组件中使用：
4. 在 store/user.js 模块的 state 节点中，声明 token 字符串：
5. 在 my-settle 组件中，使用 mapState 辅助函数，从 m_user 模块中将 token 映射到当前组件中使用：
10.2 登录
10.2.1 定义 my 页面的编译模式
1. 点击 微信开发者工具 工具栏上的编译模式下拉菜单，选择 添加编译模式：
2. 勾选启动页面的路径之后，点击确定按钮：
10.2.2 实现登录和用户信息组件的按需展示
1. 在 components 目录中新建登录组件：
2. 在 components 目录中新建用户信息组件：
3. 在 my.vue 页面中，通过 mapState 辅助函数，导入需要的 token 字符串：
4. 在 my.vue 页面中，实现登录组件和用户信息组件的按需展示：
10.2.3 实现登录组件的基本布局
1. 为 my-login 组件定义如下的 UI 结构：
2. 美化登录组件的样式：
10.2.4 点击登录按钮获取微信用户的基本信息
需求描述：需要获取微信用户的头像、昵称等基本信息。
1. 为登录的 button 按钮绑定 open-type=\”getUserInfo\” 属性，表示点击按钮时，希望获取用户的基本信息：
2. 在 methods 节点中声明 getUserInfo 事件处理函数如下：
