# huixuan-shop **Repository Path**: jacky2code/huixuan-shop ## Basic Information - **Project Name**: huixuan-shop - **Description**: uni-app - **Primary Language**: TypeScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2022-03-22 - **Last Updated**: 2022-04-11 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # uni-app Study ## 1 起步 ### 1.6 使用 Git 管理项目 #### 1.6.1 本地管理 - 在项目根目录中新建 .gitignore 忽略文件，并配置如下： ``` json # 忽略 node_modules 目录 /node_modules /uni_modules /unpackage/dist ``` 注意：游娱我们忽略了 unpackage 目录中仅有的 dist 目录，因此默认情况下，unpackage 目录不会被 Git 追踪 此时，为了让 Git 能够正常追踪 unpackage 目录，按照惯例，我们可以在 unpackage 目录下创建一个叫做 .gitkeep 文件进行占位 - 打开终端，切换到项目根目录中，运行如下的命令，初始化本地 Git 仓库： ``` console git init ``` - 将所有文件都加入到暂存区： ``` console git add . # 查询状态 git status ``` - 本地提交更新： ``` console git commit -m "init project" # 查询状态 git status ``` #### 1.6.2 将项目托管到码云 - 注册并激活码云账号（https://gitee.com/signup) - 生成并配置 SSH 公钥 （运行 ssh -t git@gitee.com 检测 SSH 公钥是否配置成功） - 创建空白的码云仓库 - 根据本地以后仓库提示，把本地项目上传到码云对应的空白仓库中 ``` console git push -u origin "master" ``` ## 2 tabBar ### 2.0 创建 tabBar 分支 运行如下命令，基于 master 分支在本地创建 tabBar 子分支，用来开发和 tabBar 相关的功能： ``` console git checkout -b tabbar ``` ### 2.1 创建 tabBar 页面 在 pages 目录中，创建首页home、分类cate、购物车cart、我的mine 这4个 tabBar 页面。在IDE中新建页面 ### 2.2 配置 tabBar 效果 - 在 阿里巴巴矢量图 查找图标 https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=317 - 修改项目中的 pages.json 文件，新增 tabbar 配置节点如下： ``` json "tabBar": { "color": "#7A7E83", "selectedColor": "#D81E06", "borderStyle": "black", "backgroundColor": "#F8F8F8", "list": [ { "pagePath": "pages/tabBar/home/home", "iconPath": "static/tabBar/home.png", "selectedIconPath": "static/tabBar/homefill.png", "text": "首页" }, { "pagePath": "pages/tabBar/cate/cate", "iconPath": "static/tabBar/cate.png", "selectedIconPath": "static/tabBar/catefll.png", "text": "分类" }, { "pagePath": "pages/tabBar/cart/cart", "iconPath": "static/tabBar/cart.png", "selectedIconPath": "static/tabBar/cartfill.png", "text": "购物车" }, { "pagePath": "pages/tabBar/mine/mine", "iconPath": "static/tabBar/mine.png", "selectedIconPath": "static/tabBar/minefill.png", "text": "我的" } ] } ``` ### 2.3 删除默认 首页 在 pages.json 中的 pages 项目中的 index 信息对象删除即可。 ### 2.4 修改导航条的样式效果 - 修改 pages.json 中 globalStyle 节点 ``` json "globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "慧选", "navigationBarBackgroundColor": "#C00000", "backgroundColor": "#F8F8F8", "app-plus": { "background": "#efeff4" } }, ``` ### 2.5 分支的提交与合并 - 将本地的 tabBar 分支进行本地的 提交 ``` console git add . git commit -m "完成了 tabBar 开发" ``` - 将本地的 tabBar 分支推送到远程仓库进行保存 ``` console git push -u origin tabBar ``` - 将本地的 tabBar 分支合并到本地的 master 分支： ``` console git checkout master git merge tabBar # 推送到远程仓库 git push ``` - 删除本地的 tabBar 分支： ``` console git branch -d tabBar ``` ## 3 首页 ### 3.0 创建 home 分支 运行如下命令， 基于 master 分支，在本地创建 home 分支，用来开发和 home 相关的功能 ``` console git checkout -b home ``` ### 3.1 配置网络请求 由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能，因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。 - 参考官方文档 https://www.npmjs.com/package/@escook/request-miniprogram - 也可以使用yarn，如添加yarn ``` console yarn init yarn add @escook/request-miniprogram ``` 最终，在项目的 main.js 入口文件中配置 ``` ts // 按需导入 $http 对象 import { $http } from '@escook/request-miniprogram' // 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用 uni.$http = $http // 配置请求根路径 $http.baseUrl = 'https://www.example.com' // 请求开始之前做一些事情 $http.beforeRequest = function (options) { uni.showLoading({ title: '数据加载中...', }) } // 请求完成之后做一些事情 $http.afterRequest = function () { uni.hideLoading() } ``` ### 3.2 轮播图区域 #### 3.2.1 请求轮播图的数据 实现步骤 - 在 data 中定义轮播图的数组 - 在 onLoad 生命周期函数中调用获取轮播图数据的方法 - 在 methods 中定义获取轮播图数据的方法 ``` ts ``` #### 3.2.2 渲染轮播图的 UI 结构 - 渲染 UI 结构： ``` vue ``` - 美化 UI 结构： ``` scss ``` #### 3.2.3 配置小程序分包 分包可以减少小程序首次启动时的加载时间 为此，我们在项目中，把 tabBar 相关的 4 个页面放到主包中，其它页面（例如：商品详情页、商品列表页）放到分包中。在 uni-app 项目中，配置分包的步骤如下： - 在项目根目录中，创建分包的根目录，命名为 subpkg - 在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相关的结构： ``` json { "pages": [ { "path": "pages/home/home", "style": {} }, { "path": "pages/cate/cate", "style": {} }, { "path": "pages/cart/cart", "style": {} }, { "path": "pages/my/my", "style": {} } ], "subPackages": [ { "root": "subpkg", "pages": [] } ] } ``` - 在 subpkg 目录上鼠标右键，点击 新建页面 选项，并填写页面的相关信息： 选择小程序分包 #### 3.2.4 点击轮播图跳转到商品详情页 将 节点内的 view 组件，改造为 navigator 导航组件，并动态绑定 url 属性的值。 - 改造之前的 UI 结构 ``` vue ``` - 改造之后的 UI 结构 ``` vue ``` #### 3.2.5 封装 uni.$showMsg() 方法 当数据请求失败后，经常需要调用 uni.showToast() 方法来提示用户，此时，可以在全局封装一个 uni.$showMsg() 方法，简化方法调用 - 在 main.js 中，为 uni 对象挂载自定义的 $showMsg() 方法： ``` ts // 封装展示消息提示方法 uni.$showMsg = (title = '数据加载失败!', duration = 1500)=> { uni.showToast({ title, duration, icon:'none' }) } ``` - 直接调用 uni.$showMsg() ``` ts if(res.meta.status !== 200) return uni.$showMsg(); ``` ### 3.3 分类导航区域 #### 3.3.1 获取分类导航的数据 实现思路： - 定义 data 数据 - 在 onLoad 中调用获取数据的方法 - 定义获取数据的方法，示例代码如下 ``` ts // 获取分类导航数据 const getNavList = async ()=> { const {data: res} = await uni.$http.get(uni.$http.baseURL + '/catitems'); console.log(res); if(res.meta.status !== 200) return uni.$showMsg(); originData.nav_list = res.message; } ``` #### 3.3.2 渲染分类导航的 UI 结构 - 定义如下 UI 结构 ``` vue ``` - 美化页面结构样式 ``` scss .nav-list { display: flex; justify-content: space-around; margin: 15px 0; .nav-item, .nav-img { width: 128rpx; height: 140rpx; } } ``` #### 3.3.3 点击第一项，切换到分类页面 - 为 nav-item 绑定点击事件处理函数 ``` vue ``` - 处理函数 ``` ts // nav-item 项被点击时候的事件处理函数 const navClickHanlder = (item)=> { if(item.name === '分类') { uni.switchTab({ // url:item.navigator_url url:'/pages/tabBar/cate/cate' }) } } ``` ### 3.4 楼层区域 #### 3.4.1 获取楼层数据 - 定义 data 数据 - 在 onLoad 中获取数据 - 定义获取数据的方法示例代码 ``` ts // 获取楼层数据 const getFloorList = async ()=> { const {data: res} = await uni.$http.get(uni.$http.baseURL + '/floordata'); console.log(res); if(res.meta.status !== 200) return uni.$showMsg(); originData.floor_list = res.message; } ``` #### 3.4.2 渲染楼层的标题 - 定义 UI 结构 ``` vue ``` - 楼层标题样式 ``` scss .floor-title { height: 60rpx; width: 100%; display: flex; } ``` #### 3.4.3 渲染楼层里面的图片 - 定义图片 UI 结构, ``` vue ``` * 注意 v-if 不能和 v-for 标签在一个组件中同时使用，要挪到子组件中使用。 - 图片区域样式 ``` scss .right-img-box { display: flex; flex-wrap: wrap; justify-content: space-around; } .floor-img-box { display: flex; padding-left: 10rpx; } ``` #### 3.4.4 点击楼层图片跳转到商品列表页 - 在 subpkg 分包中，新建 goods_list 页面 - 楼层数据请求成功之后，通过双层 forEach 循环，处理 URL 地址： ``` ts res.message.forEach(floor => { floor.product_list.forEach(prod => { prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1] }); }); ``` - 把图片外层的 view 组件，改造为 navigator 组件，并动态绑定 url 属性 的值 ``` vue ``` ### 3.5 分支的合并与提交 - 将本地的 home 分支进行本地的 commit 提交： ``` console git add . git commit -m "完成了 home 首页的开发" ``` - 将本地的 home 分支推送到远程仓库进行保存： ``` console git push -u origin home ``` - 将本地的 home 分支合并到本地的 master 分支： ``` console git checkout master git merge home ``` - 删除本地的 home 分支： ``` console git branch -d home ``` ## 4. 分类 ### 4.0 创建 cate 分支 运行如下的命令，基于 master 分支在本地创建 cate 子分支，用来开发分类页面相关的功能： ``` console git checkout -b cate ``` ### 4.1 渲染分类页面的基本结构 - 定义页面结构如下 ``` vue ``` - 计算窗口的剩余高度 ``` ts ``` - 美化页面 ``` scss ``` ### 4.2 获取分类数据 代码如下： ``` ts import { ref, reactive } from 'vue' import { onLoad, onShow } from "@dcloudio/uni-app" // 综合定义方案 const originData = reactive({ // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度 wh: 0, cateList: [] }); onLoad((option) => { // 获取当前系统的信息 const sysInfo = uni.getSystemInfoSync(); // 为 wh 窗口可用高度动态赋值 originData.wh = sysInfo.windowHeight; getCateList(); }) // 获取分类列表数据 const getCateList = async ()=> { const { data: res } = await uni.$http.get(uni.$http.baseURL + '/categories'); if(res.meta.status !== 200) return uni.$showMsg(); originData.cateList = res.message; } ``` ### 4.3 动态渲染左侧的一级分类列表 - 循环渲染列表结构 ``` vue {{item.cat_name}} ``` - 在 data 中定义默认选中项的索引 ``` ts // 综合定义方案 const originData = reactive({ // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度 wh: 0, cateList: [], // 当前选中项的索引，默认让第一项选中 active: 0 }); ``` - 循环渲染结构时，为选中项动态添加 .active 类名 ``` vue {{item.cat_name}} ``` - 为一级分类的 item 项绑定点击事件处理函数 activeChanged ``` vue {{item.cat_name}} ``` - 定义 activeChanged 事件处理函数，动态修改选中项的索引 ``` ts // 选中项改变的事件处理函数 const activeChanged = (i)=> { originData.active = i; } ``` ### 4.4 动态渲染右侧的二级分类列表 - 在 data 中定义二级分类列表的数据节点 ``` ts // 二级分类列表 cateLevel2: [] ``` - 修改 getCateList 方法，在请求到数据之后，为二级分类列表赋值 ``` ts // 为二级分类赋值 originData.cateLevel2 = res.message[0].children; ``` - 修改 activeChanged 方法，在一级分类选中项改变后， 为二级分类列表数据重新赋值 ``` ts // 为二级分类列表重新赋值 originData.cateLevel2 = originData.cateList[i].children; ``` - 循环渲染右侧二级分类列表的 UI 结构 ``` vue /{{item2.cat_name}} ``` - 美化二级分类的标题样式 ``` scss .right-scroll-view { .cate-lv2-title { font-size: 12px; font-weight: bold; text-align: center; padding: 15px 0; } } ``` ### 4.5 动态渲染右侧的三级分类列表 - 在二级分类的 组件中，循环渲染三级分类的列表结构： ``` vue {{item3.cat_name}} ``` - 美化三级分类样式 ``` scss .cate-lv3-list { display: flex; flex-wrap: wrap; .cate-lv3-item { width: 33.33%; margin-bottom: 10px; display: flex; flex-direction: column; align-items: center; } image { width: 60px; height: 60px; } text { font-size: 12px; } } ``` ### 4.6 切换一级分类后重置滚动条的位置 - 在 data 中定义 滚动条距离顶部的距离 ``` ts // 滚动条距离顶部的距离 scrollTop: 0 ``` - 动态为右侧的 组件绑定 scroll-top 属性的值 ``` ts ``` - 切换一级分类时，activeChanged动态设置 scrollTop 的值 ``` ts // 在 0 和 1 之间切换 originData.scrollTop = originData.scrollTop ? 0 : 1; ``` ### 4.7 点击三级分类跳转到商品列表页面 - 为三级分类的 Item 项绑定点击事件处理函数 ``` vue ``` - 定义事件处理函数 ``` ts // 点击三级分类项跳转到商品列表页面 const gotoGoodList = (item3)=> { uni.navigateTo({ url:'/subpkg/goods_list/goods_list?cid=' + item3.cat_id }); } ``` ### 4.8 分支的合并与提交 - 将 cate 分支进行本地提交： ``` console git add . git commit -m "完成分类页面开发" ``` - 将本地的 cate 分支推送到码云 ``` console git push -u origin cate ``` - 将本地 cate 分支中的代码合并到 master 分支 ``` console git checkout master git merge cate git push ``` - 删除本地的 cate 分支 ``` console git branch -d cate ``` ## 5. 搜索 ### 5.0 创建 search 分支 ``` console git checkout -b search ``` ### 5.1 自定义 my-search 搜索组件 - 在项目根目录的 components 目录上，鼠标右键，选择 新建组件 - 在分类页面的 UI 结构中，直接以标签的形式使用 my-search 自定义组件 ``` vue ``` - 定义 my-search 组件的 UI 结构如下 ``` vue ``` 注意：在当前组件中，我们使用 view 组件模拟 input 输入框的效果；并不会在页面上渲染真正的 input 输入框 - 美化 search 组件样式 ``` scss .my-search-container { background-color: #c00000; height: 50px; padding: 0 10px; display: flex; align-items: center; } .my-search-box { height: 36px; background-color: #ffffff; border-radius: 15px; width: 100%; display: flex; align-items: center; justify-content: center; .placeholder { font-size: 15px; margin-left: 5px; } ``` - 由于自定义的 my-search 组件高度为 50px，因此，需要重新计算分类页面窗口的可用高度： ``` ts // 为 wh 窗口可用高度动态赋值 originData.wh = sysInfo.windowHeight - 50; ``` #### 5.1.2 通过自定义属性增强组件的通用性 为了增强组件的通用性，我们允许使用者自定义搜索组件的 背景颜色 和 圆角尺寸。 - 通过 props 定义 bgcolor 和 radius 两个属性，并指定值类型和属性默认值 ``` ts interface Props { bgcolor?: string radius?: number } const props = withDefaults(defineProps(), { bgcolor: '#C00000', radius: 18 }) ``` - 通过属性绑定的形式，为 .my-search-container 盒子和 .my-search-box 盒子动态绑定 style 属性： ``` vue 搜索 ``` - 移除对应 scss 样式中的 背景颜色 和 圆角尺寸： ``` scss .my-search-container { // 移除背景颜色，改由 props 属性控制 // background-color: #C00000; height: 50px; padding: 0 10px; display: flex; align-items: center; } .my-search-box { height: 36px; background-color: #ffffff; // 移除圆角尺寸，改由 props 属性控制 // border-radius: 15px; width: 100%; display: flex; align-items: center; justify-content: center; .placeholder { font-size: 15px; margin-left: 5px; } } ``` #### 5.1.3 为自定义组件封装 click 事件 - 在 my-search 自定义组件内部，给类名为 .my-search-box 的 view 绑定 click 事件处理函数： ``` vue 搜索 ``` - 在 my-search 自定义组件的 methods 节点中，声明事件处理函数如下： ``` ts methods: { // 点击了模拟的 input 输入框 searchBoxHandler() { // 触发外界通过 @click 绑定的 click 事件处理函数 this.$emit('click') } } ``` - 在分类页面中使用 my-search 自定义组件时，即可通过 @click 为其绑定点击事件处理函数： ``` vue ``` 同时在分类页面中，定义 gotoSearch 事件处理函数如下： ``` ts methods: { // 跳转到分包中的搜索页面 gotoSearch() { uni.navigateTo({ url: '/subpkg/search/search' }) } } ``` #### 5.1.4 实现首页搜索组件的吸顶效果 - 在 home 首页定义如下的 UI 结构： ``` vue ``` - 在 home 首页定义如下的事件处理函数： ``` ts gotoSearch() { uni.navigateTo({ url: '/subpkg/search/search' }) } ``` - 通过如下的样式实现吸顶的效果： ``` scss .search-box { // 设置定位效果为“吸顶” position: sticky; // 吸顶的“位置” top: 0; // 提高层级，防止被轮播图覆盖 z-index: 999; } ``` ### 5.2 搜索建议 #### 5.2.1 渲染搜索页面的基本结构 - 定义如下的 UI 结构： ``` vue ``` - 修改 components -> uni-search-bar -> uni-search-bar.vue 组件，将默认的白色搜索背景改为 #C00000 的红色背景： ``` scss .uni-searchbar { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; position: relative; padding: 16rpx; /* 将默认的 #FFFFFF 改为 #C00000 */ background-color: #c00000; } ``` - 实现搜索框的吸顶效果： ``` scss .search-box { position: sticky; top: 0; z-index: 999; } ``` - 定义如下的 input 事件处理函数： ``` ts const input = (value) => { console.log(value) } ``` #### 5.2.2 实现搜索框自动获取焦点 - 修改 components -> uni-search-bar -> uni-search-bar.vue 组件，把 data 数据中的 show 和 showSync 的值，从默认的 false 改为 true 即可： ``` ts data() { return { show: true, showSync: true, searchVal: "" } } ``` - 使用手机扫码预览，即可在真机上查看效果。 #### 5.2.3 实现搜索框的防抖处理 - 在 data 中定义防抖的延时器 timerId 如下： ``` ts import { ref, reactive } from 'vue' // 综合定义方案 const originData = reactive({ // 延时器的 timerId timer:null, // 搜索关键词 kw: '' }); ``` - 修改 input 事件处理函数如下： ``` ts const input = (value) => { // 清除 timer 对应的延时器 clearTimeout(originData.timer) // 重新启动一个延时器，并把 timerId 赋值给 timer originData.timer = setTimeout(() => { // 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值 originData.kw = value console.log(originData.kw) }, 500) } ``` #### 5.2.4 根据关键词查询搜索建议列表 - 在 data 中定义如下的数据节点，用来存放搜索建议的列表数据 ``` ts // 搜索结果列表 searchResults: [] ``` - 在防抖的 setTimeout 中，调用 getSearchList 方法获取搜索建议列表 ``` ts originData.timer = setTimeout(() => { // 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值 originData.kw = value // 根据关键词，查询搜索建议列表 getSearchList() }, 500) ``` - 在 methods 中定义 getSearchList 方法 ``` ts // 根据搜索关键词，搜索商品建议列表 const getSearchList = async ()=> { // 判断关键词是否为空 if(originData.kw === ''){ originData.searchResults = [] return } // 发起请求，获取搜索建议列表 const { data: res } = await uni.$http.get('https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch', {query: originData.kw}) if (res.meta.status !== 200) return uni.$showMsg() console.log(res); originData.searchResults = res.message } ``` #### 5.2.5 渲染搜索建议列表 - 定义如下的 UI 结构 ``` vue {{item.goods_name}} ``` - 美化搜索建议列表： ``` scss .sugg-list { padding: 0 5px; .sugg-item { font-size: 12px; padding: 13px 0; border-bottom: 1px solid #efefef; display: flex; align-items: center; justify-content: space-between; .goods-name { // 文字不允许换行（单行文本） white-space: nowrap; // 溢出部分隐藏 overflow: hidden; // 文本溢出后，使用 ... 代替 text-overflow: ellipsis; margin-right: 3px; } } } ``` - 点击搜索建议的 Item 项，跳转到商品详情页面： ``` ts // 跳转到商品详情 const gotoDetail = (goods_id) => { uni.navigateTo({ // 指定详情页面的 URL 地址，并传递 goods_id 参数 url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods_id }) } ``` ### 5.3 搜索历史 #### 5.3.1 渲染搜索历史记录的基本结构 - 在 data 中定义搜索历史的假数据： ``` ts // 搜索关键词的历史记录 historyList: ['a', 'app', 'apple'] ``` - 渲染搜索历史区域的 UI 结构： ``` vue 搜索历史 ``` - 美化搜索历史区域的样式： ``` scss .history-box { padding: 0 5px; .history-title { display: flex; justify-content: space-between; align-items: center; height: 40px; font-size: 13px; border-bottom: 1px solid #efefef; } .history-list { display: flex; flex-wrap: wrap; .uni-tag { margin-top: 5px; margin-right: 5px; } } } ``` #### 5.3.2 实现搜索建议和搜索历史的按需展示 - 当搜索结果列表的长度不为 0的时候（searchResults.length !== 0），需要展示搜索建议区域，隐藏搜索历史区域 - 当搜索结果列表的长度等于 0的时候（searchResults.length === 0），需要隐藏搜索建议区域，展示搜索历史区域 - 使用 v-if 和 v-else 控制这两个区域的显示和隐藏，示例代码如下： ``` vue ``` #### 5.3.3 将搜索关键词存入 historyList - 直接将搜索关键词 push 到 historyList 数组中即可 ``` ts // 根据搜索关键词，搜索商品建议列表 const getSearchList = async () => { ... originData.searchResults = res.message saveSearchHistory() } // 保存搜索关键词的方法 const saveSearchHistory = ()=> { originData.historyList.push(originData.kw) } ``` - 上述实现思路存在的问题： 关键词前后顺序的问题（可以调用数组的 reverse() 方法对数组进行反转） 关键词重复的问题（可以使用 Set 对象进行去重操作） #### 5.3.4 解决关键字前后顺序的问题 - data 中的 historyList 不做任何修改，依然使用 push 进行末尾追加 - 定义一个计算属性 historys，将 historyList 数组 reverse 反转之后，就是此计算属性的值： ``` ts // 定义一个计算属性 historys，将 historyList 数组 reverse 反转之后，就是此计算属性的值 const historys = computed(() => { // 注意：由于数组是引用类型，所以不要直接基于原数组调用 reverse 方法，以免修改原数组中元素的顺序 // 而是应该新建一个内存无关的数组，再进行 reverse 反转 return [...originData.historyList].reverse() }) ``` - 页面中渲染搜索关键词的时候，不再使用 data 中的 historyList，而是使用计算属性 historys： ``` vue ``` #### 5.3.5 解决关键词重复的问题 - 修改 saveSearchHistory 方法如下： ``` ts // 保存搜索关键词为历史记录 const saveSearchHistory = ()=> { // originData.historyList.push(originData.kw) // 将 array 数组转化为 set 对象 const set = new Set(originData.historyList) // 调用 set 对象的 delete 方法，移除对应的元素 set.delete(originData.kw) // 调用 set 对象的 add 方法，添加元素 set.add(originData.kw) // 将 set 对象转化为 array 数组 originData.historyList = Array.from(set) } ``` #### 5.3.6 将搜索历史记录持久化存储到本地 - 修改 saveSearchHistory 方法如下： ``` ts // 保存搜索关键词为历史记录 const saveSearchHistory = ()=> { // originData.historyList.push(originData.kw) // 将 array 数组转化为 set 对象 const set = new Set(originData.historyList) // 调用 set 对象的 delete 方法，移除对应的元素 set.delete(originData.kw) // 调用 set 对象的 add 方法，添加元素 set.add(originData.kw) // 将 set 对象转化为 array 数组 originData.historyList = Array.from(set) // 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地 uni.setStorageSync('searchKw', JSON.stringify(originData.historyList)) } ``` - 在 onLoad 生命周期函数中，加载本地存储的搜索历史记录： ``` ts onLoad((option) => { originData.historyList = JSON.parse(uni.getStorageSync('searchKw') || '[]') }) ``` #### 5.3.7 清空搜索历史记录 - 为清空的图标按钮绑定 click 事件： ``` vue ``` - 在 methods 中定义 cleanHistory 处理函数： ``` ts // 清空搜索历史记录 cleanHistory() { // 清空 data 中保存的搜索历史 this.historyList = [] // 清空本地存储中记录的搜索历史 uni.setStorageSync('kw', '[]') } ``` #### 5.3.8 点击搜索历史跳转到商品列表页面 - 为搜索历史的 Item 项绑定 click 事件处理函数： ``` vue ``` - 在 methods 中定义 gotoGoodsList 处理函数： ``` ts // 点击跳转到商品列表页面 const gotoGoodsList = (kw) => { uni.navigateTo({ url:'/subpkg/goods_list/goods_list?query=' + kw }) } ``` ### 5.4 分支的合并与提交 - 将 search 分支进行本地提交： ``` console git add . git commit -m "完成了搜索功能的开发" ``` - 将本地的 search 分支推送到码云： ``` console git push -u origin search ``` - 将本地 search 分支中的代码合并到 master 分支： ``` console git checkout master git merge search git push ``` - 删除本地的 search 分支： ``` console git branch -d search ``` ## 6. 商品列表 ### 6.0 创建 goodslist 分支 运行如下的命令，基于 master 分支在本地创建 goodslist 子分支，用来开发商品列表相关的功能： ``` console git checkout -b goodslist ``` ### 6.1 定义请求参数对象 - 为了方便发起请求获取商品列表的数据，我们要根据接口的要求，事先定义一个请求参数对象： ``` ts data() { return { // 请求参数对象 queryObj: { // 查询关键词 query: '', // 商品分类Id cid: '', // 页码值 pagenum: 1, // 每页显示多少条数据 pagesize: 10 } } } ``` - 将页面跳转时携带的参数，转存到 queryObj 对象中： ``` ts onLoad(options) { // 将页面参数转存到 this.queryObj 对象中 this.queryObj.query = options.query || '' this.queryObj.cid = options.cid || '' } ``` - 为了方便开发商品分类页面，建议大家通过微信开发者工具，新建商品列表页面的编译模式： ### 6.2 获取商品列表数据 - 在 data 中新增如下的数据节点： ``` ts data() { return { // 商品列表的数据 goodsList: [], // 总数量，用来实现分页 total: 0 } } ``` - 在 onLoad 生命周期函数中，调用 getGoodsList 方法获取商品列表数据： ``` ts onLoad(options) { // 调用获取商品列表数据的方法 this.getGoodsList() } ``` - 在 methods 节点中，声明 getGoodsList 方法如下： ``` ts methods: { // 获取商品列表数据的方法 async getGoodsList() { // 发起请求 const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj) if (res.meta.status !== 200) return uni.$showMsg() // 为数据赋值 this.goodsList = res.message.goods this.total = res.message.total } } ``` ### 6.3 渲染商品列表结构 - 在页面中，通过 v-for 指令，循环渲染出商品的 UI 结构： ``` vue ``` - 为了防止某些商品的图片不存在，需要在 data 中定义一个默认的图片： ``` ts // 综合定义方案 const originData = reactive({ // 默认的空图片 defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png' }) ``` 并在页面渲染时按需使用： ``` vue ``` - 美化商品列表的 UI 结构： ``` scss .goods-item { display: flex; padding: 10px 5px; border-bottom: 1px solid #f0f0f0; .goods-item-left { margin-right: 5px; .goods-pic { width: 100px; height: 100px; display: block; } } .goods-item-right { display: flex; flex-direction: column; justify-content: space-between; .goods-name { font-size: 13px; } .goods-price { font-size: 16px; color: #c00000; } } } ``` ### 6.4 把商品 item 项封装为自定义组件 - 在 `components` 目录上鼠标右键，选择 `新建组件`创建 my-goods - 将 `goods_list` 页面中，关于商品 item 项相关的 UI 结构、样式、data 数据，封装到 `my-goods` 组件中： ``` vue ``` - 在 `goods_list` 组件中，循环渲染 `my-goods` 组件即可： ``` vue ``` ### 6.5 使用过滤器处理价格 - 在 `my-goods` 组件中，渲染商品价格的时候，处理价格 ``` vue ￥{{Number(goods.goods_price).toFixed(2)}} ``` ### 6.6 上拉加载更多 #### 6.6.1 初步实现上拉加载更多 - 打开项目根目录中的 `pages.json` 配置文件，为 `subPackages` 分包中的 `goods_list` 页面配置上拉触底的距离： ``` json "subPackages": [ { "root": "subpkg", "pages": [ { "path": "goods_detail/goods_detail", "style": {} }, { "path": "goods_list/goods_list", "style": { "onReachBottomDistance": 150 } }, { "path": "search/search", "style": {} } ] } ] ``` - 在 `goods_list` 页面中，和 `methods` 节点平级，声明 `onReachBottom` 事件处理函数，用来监听页面的上拉触底行为： ``` ts // 触底的事件 onReachBottom(()=> { // 让页码值自增 +1 originData.queryObj.pagenum += 1 // 重新获取列表数据 getGoodsList() }) ``` - 改造 `methods` 中的 `getGoodsList` 函数，当列表数据请求成功之后，进行新旧数据的拼接处理： ``` ts // 获取楼层数据 const getGoodsList = async ()=> { const {data: res} = await uni.$http.get( 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search' ); console.log(res); if(res.meta.status !== 200) return uni.$showMsg(); // 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接 originData.goodsList = [...originData.goodsList, ...res.message.goods] originData.total = res.message.total; } ``` #### 6.6.2 通过节流阀防止发起额外的请求 - 在 data 中定义 `isloading` 节流阀如下： ``` ts // 是否正在请求数据 isloading: false ``` - 在 获取数据方法getGoodsList中，在请求前后分别开启和关闭节流阀 ``` ts // 打开节流阀 originData.isLoading = true const {data: res} = await uni.$http.get( 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search' ); // 关闭节流阀 originData.isLoading = false ``` - 在onReachBottom 事件中，判断节流阀是否请求 ``` ts // 触底的事件 onReachBottom(()=> { // 如果正在请求数据，就直接return if(originData.isLoading) return // 让页码值自增 +1 originData.queryObj.pagenum += 1 // 重新获取列表数据 getGoodsList() }) ``` #### 6.6.3 判断数据是否加载完毕 - 如果下面的公式成立，则证明没有下一页数据了： ```ts 当前的页码值 * 每页显示多少条数据 >= 总数条数 pagenum * pagesize >= total ``` - 修改 `onReachBottom` 事件处理函数如下： ``` ts // 触底的事件 onReachBottom(()=> { // 判断是否还有下一下数据 if(originData.queryObj.pagenum * originData.queryObj.pagesize >= originData.total) return uni.$showMsg('数据加载完毕！') // 如果正在请求数据，就直接return if(originData.isLoading) return // 让页码值自增 +1 originData.queryObj.pagenum += 1 // 重新获取列表数据 getGoodsList() }) ``` ### 6.7 下拉刷新 * 在 `pages.json` 配置文件中，为当前的 `goods_list` 页面单独开启下拉刷新效果： ``` json { "path": "goods_list/goods_list", "style": { "onReachBottomDistance": 150, "enablePullDownRefresh": true, "backgroundColor": "#F8F8F8" } } ``` * 监听页面的 `onPullDownRefresh` 事件处理函数： ``` ts onPullDownRefresh(() => { // 1. 重置关键数据 originData.queryObj.pagenum = 1 originData.total = 0 originData.isloading = false originData.goodsList = [] // 2. 重新发起请求 getGoodsList(() => uni.stopPullDownRefresh()) }) ``` * 修改 `getGoodsList` 函数，接收 `cb` 回调函数并按需进行调用： ``` ts // 获取楼层数据 const getGoodsList = async (cb?)=> { // 打开节流阀 originData.isLoading = true const {data: res} = await uni.$http.get( 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search' ); // 关闭节流阀 originData.isLoading = false // 只要数据请求完毕，就立即按需调用 cb 回调函数 cb && cb() console.log(res); if(res.meta.status !== 200) return uni.$showMsg(); // 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接 originData.goodsList = [...originData.goodsList, ...res.message.goods] originData.total = res.message.total; } ``` ### 6.8 点击商品 item 项跳转到详情页面 - 将循环时的 `block` 组件修改为 `view` 组件，并绑定 `click` 点击事件处理函数： ``` vue ``` - 在 `methods` 节点中，定义 `gotoDetail` 事件处理函数： ``` ts const gotoDetail = (item) => { uni.navigateTo({ url:'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id }) } ``` ### 6.9 分支的合并与提交 - 将 `goodslist` 分支进行本地提交： ``` console git add . git commit -m "完成了商品列表页面的开发" ``` - 将本地的 `goodslist` 分支推送到码云： ``` console git push -u origin goodslist ``` - 将本地 `goodslist` 分支中的代码合并到 `master` 分支： ``` console git checkout master git merge goodslist git push ``` - 删除本地的 `goodslist` 分支： ``` console git branch -d goodslist ``` ## 7. 商品详情 ### 7.0 创建 goodsdetail 分支 - 运行如下的命令，基于 master 分支在本地创建 goodsdetail 子分支，用来开发商品详情页相关的功能： ``` console git checkout -b goodsdetail ``` ### 7.1 添加商品详情页的编译模式 - 在微信开发者工具中，点击工具栏上的编译模式下拉菜单，选择 添加编译模式 选项 - 勾选 `启动页面` 的路径为goods_detail，并填写了 `启动参数` 之后，点击 `确定` 按钮，添加详情页面的编译模式 ### 7.2 获取商品详情数据 - 在 `data` 中定义商品详情的数据节点： ``` ts ``` ### 7.3 渲染商品详情页的 UI 结构 #### 7.3.1 渲染轮播图区域 - 使用 `v-for` 指令，循环渲染如下的轮播图 UI 结构： ``` vue ``` - 美化商品信息区域的样式： ``` scss swiper { height: 750rpx; image { width: 100%; height: 100%; } } ``` #### 7.3.2 实现轮播图预览效果 - 为轮播图中的 `image` 图片绑定 `click` 事件处理函数： ``` vue ``` - 在 `methods` 中定义 `preview` 事件处理函数： ``` ts // 实现轮播图的预览效果 const preview = (i)=> { // 调用 uni.previewImage() 方法预览图片 uni.previewImage({ // 预览时，默认显示图片的索引 current: i, // 所有图片 url 地址的数组 urls:originData.goods_info.pics.map(x => x.pics_big) }) } ``` #### 7.3.3 渲染商品信息区域 - 定义商品信息区域的 UI 结构如下： ``` vue ￥{{originData.goods_info.goods_price}} {{originData.goods_info.goods_name}} 收藏 快递：免运费 ``` - 美化商品信息区域的样式： ``` scss // 商品信息区域的样式 .goods-info-box { padding: 10px; padding-right: 0; .price { color: #c00000; font-size: 18px; margin: 10px 0; } .goods-info-body { display: flex; justify-content: space-between; .goods-name { font-size: 13px; padding-right: 10px; } // 收藏区域 .favi { width: 120px; font-size: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-left: 1px solid #efefef; color: gray; } } // 运费 .yf { margin: 10px 0; font-size: 12px; color: gray; } } ``` #### 7.3.4 渲染商品详情信息 - 在页面结构中，使用 `rich-text` 组件，将带有 HTML 标签的内容，渲染为小程序的页面结构 ``` vue ``` - 修改 `getGoodsDetail` 方法，从而解决图片底部 `空白间隙` 的问题 ``` ts // 定义请求商品详情数据的方法 const getGoodsDetail = async (goods_id)=> { const {data: res} = await uni.$http.get("https://api-hmugo-web.itheima.net/api/public/v1/goods/detail", {goods_id}); if (res.meta.status !== 200) return uni.$showMsg() // 使用字符串的 replace() 方法，为 img 标签添加行内的 style 样式，从而解决图片底部空白间隙的问题 res.message.goods_introduce = res.message.goods_introduce.replace(/ ``` #### 7.4 渲染详情页底部的商品导航区域 #### 7.4.1 渲染商品导航区域的 UI 结构 **基于 uni-ui 提供的** [GoodsNav](https://ext.dcloud.net.cn/plugin?id=865) **组件来实现商品导航区域的效果** - 在 data 中，通过 `options` 和 `buttonGroup` 两个数组，来声明商品导航组件的按钮配置对象： ``` ts // 左侧按钮组的配置对象 options: [{ icon: 'shop', text: '店铺' }, { icon: 'cart', text: '购物车', info: 2 }], // 右侧按钮组的配置对象 buttonGroup: [{ text: '加入购物车', backgroundColor: '#ff0000', color: '#fff' }, { text: '立即购买', backgroundColor: '#ffa200', color: '#fff' } ] ``` - 在页面中使用 `uni-goods-nav` 商品导航组件： ```vue ``` - 美化商品导航组件，使之固定在页面最底部： ``` scss .goods-detail-container { // 给页面外层的容器，添加 50px 的内padding， // 防止页面内容被底部的商品导航组件遮盖 padding-bottom: 50px; } .goods_nav { // 为商品导航组件添加固定定位 position: fixed; bottom: 0; left: 0; width: 100%; } ``` #### 7.4.2 点击跳转到购物车页面 - 点击商品导航组件左侧的按钮，会触发 `uni-goods-nav` 的 `@click` 事件处理函数，事件对象 `e` 中会包含当前点击的按钮相关的信息： ``` ts // 左侧按钮的点击事件处理 const onClick = (e)=> { console.log(e) } ``` - 根据 `e.content.text` 的值，来决定进一步的操作： ``` ts // 左侧按钮的点击事件处理 const onClick = (e)=> { if (e.content.text === '购物车') { // 切换到购物车页面 uni.switchTab({ url: '/pages/cart/cart' }) } } ``` ### 7.5 分支的合并与提交 - 将 `goodsdetail` 分支进行本地提交： ``` console git add . git commit -m "完成了商品详情页的开发" ## 将本地的 goodsdetail 分支推送到码云： git push -u origin goodsdetail ## 将本地 goodsdetail 分支合并到 master git checkout master git merge goodsdetail git push ## 删除本地的 goodsdetail 分支 git branch -d goodsdetail ``` ## 8. 加入购物车 ### 8.0 创建 cart 分支 - 基于 master 分支在本地创建 cart 子分支 ``` console git checkout -b cart ``` ### 8.1 配置 vuex - 在项目根目录中创建 tore 文件夹，专门用来存放 vuex 相关的模块 - 在 store 目录上新建 store.js 文件 - 在 store.js 中 按如下4个步骤初始化 Store 的实例对象 ``` ts // 1. 导入 Vue 和 Vuex import Vue from 'vue' import Vuex from 'vuex' // 2. 将 Vuex 安装为 Vue 的插件 Vue.use(vuex) // 3. 创建 Store 的实例对象 const store = new Vuex.Store({ // TODO: 挂载 store 模块 modules:{}, }) // 4. 向外共享 Store 的实例对象 export default store ``` - 在 `main.js` 中导入 `store` 实例对象并挂载到 Vue 的实例上： ``` ts // #ifdef VUE3 import store from './store/store.js' export function createApp() { const app = createSSRApp(App) app.use(store) return { app } } // #endif ``` ### 8.2 创建购物车的 store 模块 - 在 `store` 目录中创建modules目录并 `新建 -> js文件`，创建购物车的 cart 模块，命名为 `cart.js`： - 在 `cart.js` 中，初始化如下的 vuex 模块： ``` ts export default { // 为当前模块开启命名空间 namespaced: true, // 模块的 state 数据 state: ()=> ({ // 购物车的数组，用来存储购物车中每个商品的信息对象 // 每个商品的信息对象，都包含如下 6 个属性 // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state } cart: [], }), // 模块的 mutations 方法 mutations: {}, // 模块的 gettters 属性 getters: {}, } ``` - 在 `store/store.js` 模块中，导入并挂载购物车的 vuex 模块，示例代码如下： ``` ts // 1. 导入 Vue 和 Vuex import Vue from 'vue' import Vuex from 'vuex' // 导入购物车的 vuex 模块 import moduleCart from './modules/cart.js' // 2. 将 Vuex 安装为 Vue 的插件 Vue.use(vuex) // 3. 创建 Store 的实例对象 const store = new Vuex.Store({ // TODO: 挂载 store 模块 modules:{ // 挂载购物车的 vuex 模块，模块内成员的访问路径被调整为 m_cart,例如： // 购物车模块中 cart 数组的访问路径是 m_cart/cart m_cart: moduleCart, }, }) // 4. 向外共享 Store 的实例对象 export default store ``` ### 8.3 在商品详情页中使用 Store 中的数据 **注意：应为要使用 vuex ，所以 goods_detail.vue 放弃使用语法糖，需更新代码，见8.4章节最后** - 在 `goods_detail.vue` 页面中，修改 `` 标签中的代码如下： ``` ts // 从 vuex 中按需导出 mapState 辅助方法 import { mapState } from 'vuex' export default { computed: { // 调用 mapState 方法，把 m_cart 模块中的 cart 数组映射到当前页面中，作为计算属性来使用 // ...mapState('模块的名称', ['要映射的数据名称1', '要映射的数据名称2']) ...mapState('m_cart', ['cart']), }, // 省略其它代码... } ``` **注意：今后无论映射 mutations 方法，还是 getters 属性，还是 state 中的数据，都需要指定模块的名称，才能进行映射。** - 在页面渲染时，可以直接使用映射过来的数据，例如： ``` vue 快递：免运费 -- {{cart.length}} ``` ### 8.4 实现加入购物车功能 - 在 `cart.js` 模块中，封装一个将商品信息加入购物车的 mutations 方法，命名为 `addToCart`。示例代码如下： ``` ts export default { // 为当前模块开启命名空间 namespaced: true, // 模块的 state 数据 state: () => ({ // 购物车的数组，用来存储购物车中每个商品的信息对象 // 每个商品的信息对象，都包含如下 6 个属性： // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state } cart: [], }), // 模块的 mutations 方法 mutations: { addToCart(state, goods) { // 根据提交的商品的Id，查询购物车中是否存在这件商品 // 如果不存在，则 findResult 为 undefined；否则，为查找到的商品信息对象 const findResult = state.cart.find((x) => x.goods_id === goods.goods_id) if (!findResult) { // 如果购物车中没有这件商品，则直接 push state.cart.push(goods) } else { // 如果购物车中有这件商品，则只更新数量即可 findResult.goods_count++ } }, }, // 模块的 getters 属性 getters: {}, } ``` - 在商品详情页面中，通过 `mapMutations` 这个辅助方法，把 vuex 中 `m_cart` 模块下的 `addToCart` 方法映射到当前页面： ``` ts // 按需导入 mapMutations 这个辅助方法 import { mapMutations } from 'vuex' export default { methods: { // 把 m_cart 模块中的 addToCart 方法映射到当前页面使用 ...mapMutations('m_cart', ['addToCart']), }, } ``` - 为商品导航组件 `uni-goods-nav` 绑定 `@buttonClick="buttonClick"` 事件处理函数： ``` ts // 右侧按钮的点击事件处理函数 buttonClick(e) { // 1. 判断是否点击了 加入购物车 按钮 if (e.content.text === '加入购物车') { // 2. 组织一个商品的信息对象 const goods = { goods_id: this.goods_info.goods_id, // 商品的Id goods_name: this.goods_info.goods_name, // 商品的名称 goods_price: this.goods_info.goods_price, // 商品的价格 goods_count: 1, // 商品的数量 goods_small_logo: this.goods_info.goods_small_logo, // 商品的图片 goods_state: true // 商品的勾选状态 } // 3. 通过 this 调用映射过来的 addToCart 方法，把商品信息对象存储到购物车中 this.addToCart(goods) } } ``` - goods_detail.vue 中的 模块，请参考 ``` ts ``` ### 8.5 动态统计购物车中商品的总数量 - 在 `cart.js` 模块中，在 `getters` 节点下定义一个 `total` 方法，用来统计购物车中商品的总数量： ``` ts // 模块的 getters 属性 getters: { // 统计购物车中商品的总数量 total(state) { let c = 0 // 循环统计商品的数量，累加到变量 c 中 state.cart.forEach(goods => c += goods.goods_count) return c } } ``` - 在商品详情页面的 `script` 标签中，按需导入 `mapGetters` 方法并进行使用： ``` ts // 按需导入 mapGetters 这个辅助方法 import { mapGetters } from 'vuex' export default { computed: { // 把 m_cart 模块中名称为 total 的 getter 映射到当前页面中使用 ...mapGetters('m_cart', ['total']), }, } ``` - 通过 `watch` 侦听器，监听计算属性 `total` 值的变化，从而**动态为购物车按钮的徽标赋值**： ``` ts export default { watch: { // 1. 监听 total 值的变化，通过第一个形参得到变化后的新值 total(newVal) { // 2. 通过数组的 find() 方法，找到购物车按钮的配置对象 const findResult = this.options.find((x) => x.text === '购物车') if (findResult) { // 3. 动态为购物车按钮的 info 属性赋值 findResult.info = newVal } }, }, } ``` ### 8.6 持久化存储购物车中的商品 - 在 `cart.js` 模块中，声明一个叫做 `saveToStorage` 的 mutations 方法，此方法负责将购物车中的数据持久化存储到本地： ``` ts // 将购物车中的数据持久化存储到本地 saveToStorage(state) { uni.setStorageSync('cart', JSON.stringify(state.cart)) } ``` - 修改 `mutations` 节点中的 `addToCart` 方法，在处理完商品信息后，调用步骤 1 中定义的 `saveToStorage` 方法： ``` ts addToCart(state, goods) { // 根据提交的商品的Id，查询购物车中是否存在这件商品 // 如果不存在，则 findResult 为 undefined；否则，为查找到的商品信息对象 const findResult = state.cart.find((x) => x.goods_id === goods.goods_id) if (!findResult) { // 如果购物车中没有这件商品，则直接 push state.cart.push(goods) } else { // 如果购物车中有这件商品，则只更新数量即可 findResult.goods_count++ } // 通过 commit 方法，调用 m_cart 命名空间下的 saveToStorage(state) 方法 this.commit('m_cart/saveToStorage') } ``` - 修改 `cart.js` 模块中的 `state` 函数，读取本地存储的购物车数据，对 cart 数组进行初始化： ``` ts state: { // 购物车的数组，用来存储购物车中每个商品的信息对象 // 每个商品的信息对象，都包含如下 6 个属性： // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state } cart: JSON.parse(uni.getStorageSync('cart' || '[]')), }, ``` ### 8.7 优化商品详情页的 total 侦听器 - 使用**普通函数的形式**定义的 watch 侦听器，**在页面首次加载后不会被调用**。因此导致了商品详情页在首次加载完毕之后，不会将商品的总数量显示到商品导航区域： - 为了防止这个上述问题，可以使用**对象的形式**来定义 watch 侦听器（详细文档请参考 Vue 官方的 [watch 侦听器](https://cn.vuejs.org/v2/api/#watch)教程），示例代码如下： ``` ts watch: { // 1. 监听 total 值的变化，通过第一个形参得到变化后的新值 // 定义 total 侦听器，指向一个配置对象 total: { // handler 属性用来定义侦听器的 function 处理函数 handler(newVal) { const findResult = this.options.find((x) => x.text === '购物车') if(findResult) { // 3. 动态为购物车按钮的 info 赋值 findResult.info = newVal } }, // immediate 属性用来声明此侦听器，是否在页面初次加载完毕后立即调用 immediate: true } }, ``` ### 8.8 动态为 tabBar 页面设置数字提醒 **需求描述：从商品详情页面导航到购物车页面之后，需要为 tabBar 中的购物车动态设置数字徽标。** - 把 Store 中的 total 映射到 `cart.vue` 中使用： ``` ts // 按需导入 mapGetters 这个辅助方法 import { mapGetters } from 'vuex' export default { data() { return {} }, computed: { // 将 m_cart 模块中的 total 映射为当前页面的计算属性 ...mapGetters('m_cart', ['total']), }, } ``` - 在页面刚显示出来的时候，立即调用 `setBadge` 方法，为 tabBar 设置数字徽标： ``` ts onShow() { // 在页面刚展示的时候，设置数字徽标 this.setBadge() } ``` - 在 `methods` 节点中，声明 `setBadge` 方法如下，通过 `uni.setTabBarBadge()` 为 tabBar 设置数字徽标： ``` ts methods: { setBadge() { // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标 uni.setTabBarBadge({ index: 2, // 索引 text: this.total + '' // 注意：text 的值必须是字符串，不能是数字 }) } } ``` ### 8.9 将设置 tabBar 提醒的代码抽离为 mixins > 注意：除了要在 cart.vue 页面中设置购物车的数字徽标，还需要在其它 3 个 tabBar 页面中，为购物车设置数字徽标。 > 此时可以使用 Vue 提供的 [mixins](https://cn.vuejs.org/v2/guide/mixins.html) 特性，提高代码的可维护性。 - 在项目根目录中新建 `mixins` 文件夹，并在 `mixins` 文件夹之下新建 `tabbar-badge.js` 文件，用来把设置 tabBar 徽标的代码封装为一个 mixin 文件： ``` ts import { mapGetters } from 'vuex' // 导出一个 mixin 对象 export default { computed: { ...mapGetters('m_cart', ['total']), }, onShow() { // 在页面刚展示的时候，设置数字徽标 this.setBadge() }, methods: { setBadge() { // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标 uni.setTabBarBadge({ index: 2, text: this.total + '', // 注意：text 的值必须是字符串，不能是数字 }) }, }, } ``` - 修改 `home.vue`，`cate.vue`，`cart.vue`，`my.vue` 这 4 个 tabBar 页面的源代码，分别导入 `@/mixins/tabbar-badge.js` 模块并进行使用： ``` ts // 导入自己封装的 mixin 模块 import badgeMix from '@/mixins/tabbar-badge.js' export default { // 将 badgeMix 混入到当前的页面中进行使用 mixins: [badgeMix], // 省略其它代码... } ``` ## 9. 购物车页面 ### 9.0 创建购物车页面的编译模式 - 打开微信开发者工具，点击工具栏上的“编译模式”下拉菜单，选择添加编译模式 - 勾选“启动页面”为购物车首页 ### 9.1 商品列表区域 #### 9.1.1 渲染购物车商品列表的标题区域 - 定义 UI 结构 ``` vue 购物车 ``` - 美化样式 ``` scss .cart-title { height: 40px; display: flex; align-items: center; font-size: 14px; padding-left: 5px; border-bottom: 1px solid #efefef; .cart-title-text { margin-left: 10px; } } ``` #### 9.1.2 渲染商品列表区域的基本结构 - 通过 `mapState` 辅助函数，将 Store 中的 `cart` 数组映射到当前页面中使用： ``` ts import badgeMix from '@/mixins/tabbar-badge.js' // 按需导入 mapState 这个辅助函数 import { mapState } from 'vuex' export default { mixins: [badgeMix], computed: { // 将 m_cart 模块中的 cart 数组映射到当前页面中使用 ...mapState('m_cart', ['cart']), }, data() { return {} }, } ``` - 在 UI 结构中，通过 `v-for` 指令循环渲染自定义的 `my-goods` 组件： ``` vue ``` #### 9.1.3 为 my-goods 组件封装 radio 勾选状态 - 打开 `my-goods.vue` 组件的源代码，为商品的左侧图片区域添加 `radio` 组件： ``` vue ``` - 给类名为 `goods-item-left` 的 `view` 组件添加样式，实现 `radio` 组件和 `image` 组件的左右布局： ```scss .goods-item-left { margin-right: 5px; display: flex; justify-content: space-between; align-items: center; .goods-pic { width: 100px; height: 100px; display: block; } } ``` - 封装名称为 `showRadio` 的 `props` 属性，来控制当前组件中是否显示 radio 组件： ``` ts ``` - 使用 `v-if` 指令控制 `radio` 组件的按需展示： ``` vue ``` - 在 `cart.vue` 页面中的商品列表区域，指定 `:show-radio="true"` 属性，从而显示 radio 组件： ``` vue ``` - 修改 `my-goods.vue` 组件，动态为 `radio` 绑定选中状态： ``` vue ``` #### 9.1.4 为 my-goods 组件封装 radio-change 事件 - 当用户点击 radio 组件，**希望修改当前商品的勾选状态**，此时用户可以为 `my-goods` 组件绑定 `@radio-change` 事件，从而获取当前商品的 `goods_id` 和 `goods_state`： ``` vue ``` 定义 `radioChangeHandler` 事件处理函数如下： ``` ts methods: { // 商品的勾选状态发生了变化 radioChangeHandler(e) { console.log(e) // 输出得到的数据 -> {goods_id: 395, goods_state: false} } } ``` - 在 `my-goods.vue` 组件中，为 `radio` 组件绑定 `@click` 事件处理函数如下： ``` vue ``` - 在 `my-goods.vue` 组件的 methods 节点中，定义 `radioClickHandler` 事件处理函数： ``` ts methods: { // radio 组件的点击事件处理函数 radioClickHandler() { // 通过 this.$emit() 触发外界通过 @ 绑定的 radio-change 事件， // 同时把商品的 Id 和 勾选状态 作为参数传递给 radio-change 事件处理函数 this.$emit('radio-change', { // 商品的 Id goods_id: this.goods.goods_id, // 商品最新的勾选状态 goods_state: !this.goods.goods_state }) } } ``` #### 9.1.5 修改购物车中商品的勾选状态 - 在 `store/cart.js` 模块中，声明如下的 `mutations` 方法，用来修改对应商品的勾选状态： ``` ts // 更新购物车中商品的勾选状态 updateGoodsState(state, goods) { // 根据 goods_id 查询购物车中对应商品的信息对象 const findResult = state.cart.find(x => x.goods_id === goods.goods_id) // 有对应的商品信息对象 if (findResult) { // 更新对应商品的勾选状态 findResult.goods_state = goods.goods_state // 持久化存储到本地 this.commit('m_cart/saveToStorage') } } ``` - 在 `cart.vue` 页面中，导入 `mapMutations` 这个辅助函数，从而将需要的 mutations 方法映射到当前页面中使用： ``` ts import badgeMix from '@/mixins/tabbar-badge.js' import { mapState, mapMutations } from 'vuex' export default { mixins: [badgeMix], computed: { ...mapState('m_cart', ['cart']), }, data() { return {} }, methods: { ...mapMutations('m_cart', ['updateGoodsState']), // 商品的勾选状态发生了变化 radioChangeHandler(e) { this.updateGoodsState(e) }, }, } ``` #### 9.1.6 为 my-goods 组件封装 NumberBox > 注意：[NumberBox](https://ext.dcloud.net.cn/plugin?id=31) 组件是 uni-ui 提供的 - 修改 `my-goods.vue` 组件的源代码，在类名为 `goods-info-box` 的 view 组件内部渲染 `NumberBox` 组件的基本结构： ``` vue ￥{{goods.goods_price | tofixed}} ``` - 美化页面的结构： ```scss .goods-item-right { display: flex; flex: 1; flex-direction: column; justify-content: space-between; .goods-name { font-size: 13px; } .goods-info-box { display: flex; align-items: center; justify-content: space-between; } .goods-price { font-size: 16px; color: #c00000; } } ``` - 在 `my-goods.vue` 组件中，动态为 `NumberBox` 组件绑定商品的数量值： ``` vue ￥{{goods.goods_price | tofixed}} ``` - 在 `my-goods.vue` 组件中，封装名称为 `showNum` 的 `props` 属性，来控制当前组件中是否显示 `NumberBox` 组件： ``` ts export default { // 定义 props 属性，用来接收外界传递到当前组件的数据 props: { // 商品的信息对象 goods: { type: Object, defaul: {}, }, // 是否展示图片左侧的 radio showRadio: { type: Boolean, // 如果外界没有指定 show-radio 属性的值，则默认不展示 radio 组件 default: false, }, // 是否展示价格右侧的 NumberBox 组件 showNum: { type: Boolean, default: false, }, }, } ``` - 在 `my-goods.vue` 组件中，使用 `v-if` 指令控制 `NumberBox` 组件的按需展示： ``` vue ￥{{goods.goods_price | tofixed}} ``` - 在 `cart.vue` 页面中的商品列表区域，指定 `:show-num="true"` 属性，从而显示 `NumberBox` 组件： ``` vue ``` #### 9.1.7 为 my-goods 组件封装 num-change 事件 - 当用户修改了 `NumberBox` 的值以后，希望将最新的商品数量更新到购物车中，此时用户可以为 `my-goods` 组件绑定 `@num-change` 事件，从而获取当前商品的 `goods_id` 和 `goods_count：` ```vue ``` 定义 `numberChangeHandler` 事件处理函数如下： ```ts // 商品的数量发生了变化 numberChangeHandler(e) { console.log(e) } ``` - 在 `my-goods.vue` 组件中，为 `uni-number-box` 组件绑定 `@change` 事件处理函数如下： ```vue ￥{{goods.goods_price | tofixed}} ``` - 在 `my-goods.vue` 组件的 `methods` 节点中，定义 `numChangeHandler` 事件处理函数： ```ts methods: { // NumberBox 组件的 change 事件处理函数 numChangeHandler(val) { // 通过 this.$emit() 触发外界通过 @ 绑定的 num-change 事件 this.$emit('num-change', { // 商品的 Id goods_id: this.goods.goods_id, // 商品的最新数量 goods_count: +val }) } } ``` #### 9.1.8 解决 NumberBox 数据不合法的问题 > 问题说明：当用户在 NumberBox 中输入字母等非法字符之后，会导致 NumberBox 数据紊乱的问题 - 打开项目根目录中 `components/uni-number-box/uni-number-box.vue` 组件，修改 `methods` 节点中的 `_onBlur` 函数如下： ```ts _onBlur(event) { // 官方的代码没有进行数值转换，用户输入的 value 值可能是非法字符： // let value = event.detail.value; // 将用户输入的内容转化为整数 let value = parseInt(event.detail.value); if (!value) { // 如果转化之后的结果为 NaN，则给定默认值为 1 this.inputValue = 1; return; } // 省略其它代码... } ``` - 修改完毕之后，用户输入**小数**会**被转化为整数**，用户输入**非法字符**会**被替换为默认值 1** #### 9.1.9 完善 NumberBox 的 inputValue 侦听器（新版本已经没有bug） #### 9.1.10 修改购物车中商品的数量 - 在 `store/cart.js` 模块中，声明如下的 mutations 方法，用来修改对应商品的数量： ```ts // 更新购物车中商品的数量 updateGoodsCount(state, goods) { // 根据 goods_id 查询购物车中对应商品的信息对象 const findResult = state.cart.find(x => x.goods_id === goods.goods_id) if(findResult) { // 更新对应商品的数量 findResult.goods_count = goods.goods_count // 持久化存储到本地 this.commit('m_cart/saveToStorage') } } ``` - 在 `cart.vue` 页面中，通过 `mapMutations` 这个辅助函数，将需要的 `mutations` 方法映射到当前页面中使用： ```ts import badgeMix from '@/mixins/tabbar-badge.js' import { mapState, mapMutations } from 'vuex' export default { mixins: [badgeMix], computed: { ...mapState('m_cart', ['cart']), }, data() { return {} }, methods: { ...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount']), // 商品的勾选状态发生了变化 radioChangeHandler(e) { this.updateGoodsState(e) }, // 商品的数量发生了变化 numberChangeHandler(e) { this.updateGoodsCount(e) }, }, } ``` #### 9.1.11 渲染滑动删除的 UI 效果 > 滑动删除需要用到 uni-ui 的 uni-swipe-action 组件和 uni-swipe-action-item。详细的官方文档请参考[SwipeAction 滑动操作](https://ext.dcloud.net.cn/plugin?id=181)。 - 改造 `cart.vue` 页面的 UI 结构，将商品列表区域的结构修改如下（可以使用 **uSwipeAction** 代码块快速生成基本的 UI 结构）： ```vue ``` - 在 data 节点中声明 `options` 数组，用来定义操作按钮的配置信息： ```ts data() { return { options: [{ text: '删除', // 显示的文本内容 style: { backgroundColor: '#C00000' // 按钮的背景颜色 } }] } } ``` - 在 `methods` 中声明 `uni-swipe-action-item` 组件的 `@click` 事件处理函数： ```ts // 点击了滑动操作按钮 swipeActionClickHandler(goods) { console.log(goods) } ``` - 美化 `my-goods.vue` 组件的样式： ```scss .goods-item { // 让 goods-item 项占满整个屏幕的宽度 width: 750rpx; // 设置盒模型为 border-box box-sizing: border-box; display: flex; padding: 10px 5px; border-bottom: 1px solid #f0f0f0; } ``` #### 9.1.12 实现滑动删除的功能 - 在 `store/cart.js` 模块的 `mutations` 节点中声明如下的方法，从而根据商品的 Id 从购物车中移除对应的商品： ``` ts // 根据 Id 从购物车中删除对应的商品信息 removeGoodsById(state, goods_id) { // 调用数组的 filter 方法进行过滤 state.cart = state.cart.filter(x => x.goods_id !== goods_id) // 持久化存储到本地 this.commit('m_cart/saveToStorage') } ``` - 在 `cart.vue` 页面中，使用 `mapMutations` 辅助函数，把需要的方法映射到当前页面中使用： ``` ts methods: { ...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById']), // 商品的勾选状态发生了变化 radioChangeHandler(e) { this.updateGoodsState(e) }, // 商品的数量发生了变化 numberChangeHandler(e) { this.updateGoodsCount(e) }, // 点击了滑动操作按钮 swipeActionClickHandler(goods) { this.removeGoodsById(goods.goods_id) } } ``` ### 9.2 收货地址区域 #### 9.2.1 创建收货地址组件 - 在 `components` 目录上鼠标右键，选择 `新建组件` my-address，并填写组件相关的信息： - 渲染收货地址组件的基本结构 ``` vue ``` - 美化收货地址组件的样式 ``` scss // 底部边框线的样式 .address-border { display: block; width: 100%; height: 5px; } // 选择收货地址的盒子 .address-choose-box { height: 90px; display: flex; align-items: center; justify-content: center; } // 渲染收货信息的盒子 .address-info-box { font-size: 12px; height: 90px; display: flex; flex-direction: column; justify-content: center; padding: 0 5px; // 第一行 .row1 { display: flex; justify-content: space-between; .row1-right { display: flex; align-items: center; .phone { margin-right: 5px; } } } // 第二行 .row2 { display: flex; align-items: center; margin-top: 10px; .row2-left { white-space: nowrap; } } } ``` #### 9.2.2 实现收货地址区域的按需展示 - 在 data 中定义收货地址的信息对象 ``` ts export default { name: "my-address", data() { return { address: {}, }; } } ``` - 使用 v-if 和 v-else 实现按需展示 ``` vue ``` #### 9.2.3 实现选择收货地址的功能 - 为 `请选择收货地址+` 的 `button` 按钮绑定点击事件处理函数： ``` vue ``` - 定义 `chooseAddress` 事件处理函数，调用小程序提供的 `chooseAddress()` API 实现选择收货地址的功能： ``` ts methods: { // 选择收货地址 async chooseAddress() { // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能 // 返回值是一个数组：第 1 项为错误对象；第 2 项为成功之后的收货地址对象 const [err, succ] = await uni.chooseAddress().catch(err => err) if (err === null && succ.errMsg === 'chooseAddress:ok') { this.address = succ } } } ``` - 定义**收货详细地址**的计算属性： ``` ts computed: { // 收货详情地址的计算属性 addstr() { if(!this.address.provinceName) return ''; // 拼接 省、市、区、详细地址的字符串并返回给用户 return this.address.provinceName + this.address.cityName + this.address.countyName + this.address.detailInfo; } } ``` - 渲染收货地址区域的数据： ``` vue 收货人：{{address.userName}} 电话：{{address.telNumber}} 收货地址： {{addstr}} ``` #### 9.2.4 将 address 信息存储到 vuex 中 - 在 `store` 目录 modules 目录中，创建用户相关的 `vuex` 模块，命名为 `user.js`： ``` js export default { namespaced: true, // state 数据 state: () => ({ address: {}, }), // 方法 mutations: { // 更新地址 updateAddress(state, address) { state.address = address }, }, // 数据包装器 getters: {}, } ``` - 在 `store/store.js` 模块中，导入并挂载 `user.js` 模块： ``` js // 1. 导入 Vue 和 Vuex import { createStore } from 'vuex' // 导入购物车的 vuex 模块 import moduleCart from './modules/cart.js' import moduleUser from './modules/user.js' // 3. 创建 Store 的实例对象 const store = createStore({ // TODO: 挂载 store 模块 modules: { // 挂载购物车的 vuex 模块，模块内成员的访问路径被调整为 m_cart,例如： // 购物车模块中 cart 数组的访问路径是 m_cart/cart m_cart: moduleCart, m_user: moduleUser, }, }) // 4. 向外共享 Store 的实例对象 export default store ``` - 改造 `my-address.vue` 组件中的代码，使用 **vuex 提供的 address 计算属性** 替代 **data 中定义的本地 address 对象**： ``` ts // 1. 按需导入 mapState 和 mapMutations 这两个辅助函数 import { mapState, mapMutations } from 'vuex' export default { name: "my-address", data() { return { // 2.1 注释掉下面的 address 对象，使用 2.2 中的代码替代之 // address: {}, }; }, methods: { // 3.1 把 m_user 模块中的 updateAddress 函数映射到当前组件 ...mapMutations('m_user', ['updateAddress']), // 选择收货地址 async chooseAddress() { // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能 // 返回值是一个数组：第 1 项为错误对象；第 2 项为成功之后的收货地址对象 const [err, succ] = await uni.chooseAddress().catch(err => err) if (err === null && succ.errMsg === 'chooseAddress:ok') { this.updateAddress(succ) } } }, computed: { // 2.2 把 m_user 模块中的 address 对象映射当前组件中使用，代替 data 中 address 对象 ...mapState('m_user', ['address']), // 收货详情地址的计算属性 addstr() { if(!this.address.provinceName) return ''; // 拼接 省、市、区、详细地址的字符串并返回给用户 return this.address.provinceName + this.address.cityName + this.address.countyName + this.address.detailInfo; } } } ``` #### 9.2.5 将 store 中的 address 持久化存储到本地 - 修改 `store/user.js` 模块中的代码如下： ``` js export default { namespaced: true, // state 数据 state: () => ({ // 3. 读取本地的收货地址数据，初始化 address 对象 address: JSON.parse(uni.getStorageSync('address') || '{}'), }), // 方法 mutations: { // 更新地址 updateAddress(state, address) { state.address = address; // 2. 通过 this.commit() 方法，调用 m_user 模块下的 saveAddressToStorage 方法将 address 对象持久化存储到本地 this.commit('m_user/saveAddressToStorage') }, // 1. 定义将 address 持久化存储到本地 mutations 方法 saveAddressToStorage(state) { uni.setStorageSync('address', JSON.stringify(state.address)) } }, // 数据包装器 getters: {}, } ``` #### 9.2.6 将 addstr 抽离为 getters **目的：为了提高代码的复用性，可以把收货的详细地址抽离为 getters，方便在多个页面和组件之间实现复用。** - 剪切 `my-address.vue` 组件中的 `addstr` 计算属性的代码，粘贴到 `user.js` 模块中，作为一个 getters 节点： ``` js // 数据包装器 getters: { // 收货详情地址的计算属性 addstr(state) { if(!state.address.provinceName) return ''; // 拼接 省、市、区、详细地址的字符串并返回给用户 return state.address.provinceName + state.address.cityName + state.address.countyName + state.address.detailInfo; } } ``` - 改造 `my-address.vue` 组件中的代码，通过 `mapGetters` 辅助函数，将 `m_user` 模块中的 `addstr` 映射到当前组件中使用： ``` ts // 按需导入 mapGetters 辅助函数 import { mapState, mapMutations, mapGetters } from 'vuex' export default { // 省略其它代码 computed: { ...mapState('m_user', ['address']), // 将 m_user 模块中的 addstr 映射到当前组件中使用 ...mapGetters('m_user', ['addstr']), }, } ``` #### 9.2.7 重新选择收货地址 - 为 class 类名为 `address-info-box` 的盒子绑定 `click` 事件处理函数如下： ``` vue ``` #### 9.2.8 解决收货地址授权失败的问题 **如果在选择收货地址的时候，用户点击了取消授权，则需要进行特殊的处理，否则用户将无法再次选择收货地址！** - 改造 `chooseAddress` 方法如下： ``` ts // 选择收货地址 async chooseAddress() { // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能 // 返回值是一个数组：第 1 项为错误对象；第 2 项为成功之后的收货地址对象 const [err, succ] = await uni.chooseAddress({ success() { // 3.2 把下面这行代码注释掉，使用 3.3 中的代码替代之 // this.address = succ // 3.3 调用 Store 中提供的 updateAddress 方法，将 address 保存到 Store 里面 this.updateAddress(succ) }, complete() { // 3. 用户没有授权 if (err && err.errMsg === 'chooseAddress:fail auth deny') { this.reAuth() // 调用 this.reAuth() 方法，向用户重新发起授权申请 } } }) }, ``` - 在 `methods` 节点中声明 `reAuth` 方法如下： ``` ts // 调用此方法，重新发起收货地址的授权 async reAuth() { // 3.1 提示用户对地址进行授权 const [err2, confirmResult] = await uni.showModal({ content: '检测到没有打开地址权限，是否去设置打开？', confirmText: '确认', cancelText: '取消' }) // 3.2 如果弹框异常，则直接退出 if (err2) return // 3.3 如果用户点击了“取消”按钮，则提示用户“取消了地址授权！” if(confirmResult.cancel) return uni.$showMsg('取消了地址授权！') // 3.4 如果用户点击了“确认”按钮，则调用 uni.openSetting() 方法进入授权页面，让用户重新授权 if(confirmResult.confirm) return uni.openSetting({ // 3.4.1 授权结束，需要对授权的结果做进一步判断 success: (settingResult) => { // 3.4.2 地址授权的值等于 true，提示用户“授权成功” if(settingResult.authSetting['scope.address']) return uni.$showMsg('授权成功！请选择地址') // 3.4.3 地址授权的值等于 false， 提示用户"取消了地址授权" if(!settingResult.authSetting['scope.address']) return uni.$showMsg('取消了地址授权！') } }) } ``` #### 9.2.9 解决 iPhone 真机上无法重新授权的问题 **问题说明：在 iPhone 设备上，当用户取消授权之后，再次点击选择收货地址按钮的时候，无法弹出授权的提示框！** - 导致问题的原因 - 用户取消授权后，再次点击 “选择收货地址” 按钮的时候： - 在**模拟器**和**安卓真机**上，错误消息 `err.errMsg` 的值为 `chooseAddress:fail auth deny` - 在 **iPhone 真机**上，错误消息 `err.errMsg` 的值为 `chooseAddress:fail authorize no response` - 解决问题的方案 - 修改 `chooseAddress` 方法中的代码，进一步完善用户没有授权时的 `if` 判断条件即可： ``` ts // 选择收货地址 async chooseAddress() { // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能 // 返回值是一个数组：第 1 项为错误对象；第 2 项为成功之后的收货地址对象 const [err, succ] = await uni.chooseAddress().catch(err => err) if (err === null && succ.errMsg === 'chooseAddress:ok') { // 3.2 把下面这行代码注释掉，使用 3.3 中的代码替代之 // this.address = succ // 3.3 调用 Store 中提供的 updateAddress 方法，将 address 保存到 Store 里面 this.updateAddress(succ) } // 3. 用户没有授权 if (err && (err.errMsg === 'chooseAddress:fail auth deny' || err.errMsg === 'chooseAddress:fail authorize no response')) { this.reAuth() // 调用 this.reAuth() 方法，向用户重新发起授权申请 } }, ``` ### 9.3 结算区域 #### 9.3.1 把结算区域封装为组件 - 在 `components` 目录中，新建 `my-settle` 结算组件： - 初始化 `my-settle` 组件的基本结构和样式： ``` vue ``` - 在 `cart.vue` 页面中使用自定义的 `my-settle` 组件，并美化页面样式，防止页面底部被覆盖： ``` vue ``` #### 9.3.2 渲染结算区域的结构和样式 - 定义如下的 UI 结构： ``` vue ``` - 美化样式 ``` scss .my-settle-container { position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; // 将背景色从 cyan 改为 white background-color: white; display: flex; justify-content: space-between; align-items: center; padding-left: 5px; font-size: 14px; .radio { display: flex; align-items: center; } .amount { color: #c00000; } .btn-settle { height: 50px; min-width: 100px; background-color: #c00000; color: white; line-height: 50px; text-align: center; padding: 0 10px; } } ``` #### 9.3.3 动态渲染已勾选商品的总数量 - 在 `store/cart.js` 模块中，定义一个名称为 `checkedCount` 的 getters，用来统计已勾选商品的总数量 ``` ts // 勾选商品的总数量 checkedCount(state) { // 先使用 filter 方法，从购物车中过滤器已勾选的商品 // 再使用 reduce 方法，将已勾选的商品总数量进行累加 // reduce() 的返回值就是已勾选的商品的总数量 return state.cart.filter(x => x.goods_state).reduce((total, item) => total += item.goods_count, 0) } ``` - 在 `my-settle` 组件中，通过 `mapGetters` 辅助函数，将需要的 getters 映射到当前组件中使用： ``` ts computed: { ...mapGetters('m_cart', ['checkedCount']) }, ``` - 将 `checkedCount` 的值渲染到页面中： ``` vue 结算({{checkedCount}}) ``` #### 9.3.4 动态渲染全选按钮的选中状态 - 使用 `mapGetters` 辅助函数，将**商品的总数量**映射到当前组件中使用，并定义一个叫做 `isFullCheck` 的计算属性： ``` ts import { mapGetters } from 'vuex' export default { computed: { // 1. 将 total 映射到当前组件中 ...mapGetters('m_cart', ['checkedCount', 'total']), // 2. 是否全选 isFullCheck() { return this.total === this.checkedCount }, }, data() { return {} }, } ``` - 为 radio 组件动态绑定 `checked` 属性的值： ``` vue ``` #### 9.3.5 实现商品的全选/反选功能 - 在 `store/cart.js` 模块中，定义一个叫做 `updateAllGoodsState` 的 mutations 方法，用来修改所有商品的勾选状态： ``` ts // 更新所有商品的勾选状态 updateAllGoodsState(state, newState) { // 循环更新购物车中每件商品的勾选状态 state.cart.forEach(x => x.goods_state = newState) // 持久化存储到本地 this.commit('m_cart/saveToStorage') } ``` - 在 `my-settle` 组件中，通过 `mapMutations` 辅助函数，将需要的 mutations 方法映射到当前组件中使用： ``` ts // 1. 按需导入 mapMutations 辅助函数 import { mapGetters, mapMutations } from 'vuex' export default { // 省略其它代码 methods: { // 2. 使用 mapMutations 辅助函数，把 m_cart 模块提供的 updateAllGoodsState 方法映射到当前组件中使用 ...mapMutations('m_cart', ['updateAllGoodsState']), }, } ``` - 为 UI 中的 `label` 组件绑定 `click` 事件处理函数： ``` vue ``` - 在 `my-settle` 组件的 methods 节点中，声明 `changeAllState` 事件处理函数： ``` ts methods: { ...mapMutations('m_cart', ['updateAllGoodsState']), // label 的点击事件处理函数 changeAllState() { // 修改购物车中所有商品的选中状态 // !this.isFullCheck 表示：当前全选按钮的状态取反之后，就是最新的勾选状态 this.updateAllGoodsState(!this.isFullCheck) } } ``` #### 9.3.6 动态渲染已勾选商品的总价格 - 在 `store/cart.js` 模块中，定义一个叫做 `checkedGoodsAmount` 的 getters，用来统计已勾选商品的总价格： ``` ts // 已勾选的商品的总价 checkedGoodsAmount(state) { // 先使用 filter 方法，从购物车中过滤器已勾选的商品 // 再使用 reduce 方法，将已勾选的商品数量 * 单价之后，进行累加 // reduce() 的返回值就是已勾选的商品的总价 // 最后调用 toFixed(2) 方法，保留两位小数 return state.cart.filter(x => x.goods_state) .reduce((total, item) => total += item.goods_count * item.goods_price, 0) .toFixed(2) } ``` - 在 `my-settle` 组件中，使用 `mapGetters` 辅助函数，把需要的 `checkedGoodsAmount` 映射到当前组件中使用： ``` ts ...mapGetters('m_cart', ['checkedCount', 'total', 'checkedGoodsAmount']), ``` - 在组件的 UI 结构中，渲染已勾选的商品的总价： ``` vue 合计:￥{{checkedGoodsAmount}} ``` #### 9.3.7 动态计算购物车角标的数值 - **问题说明**：当修改购物车中商品的数量之后，tabBar 上的数字徽标不会自动更新。 - **解决方案**：改造 `mixins/tabbar-badge.js` 中的代码，使用 `watch` 侦听器，监听 `total` 总数量的变化，从而动态为 tabBar 的角标赋值： ``` ts watch: { // 监听 total 值的变化 total() { // 调用 methods 中的 setBadge 方法，重新为 tabBar 的数字角标赋值 this.setBadge(); } }, ``` #### 9.3.8 渲染购物车为空时的页面结构 - 改造 `cart.vue` 页面的 UI 结构，使用 `v-if` 和 `v-else` 控制**购物车区域**和**空白购物车区域**的按需展示： ``` vue ``` - 美化空白购物车区域的样式： ``` scss .empty-cart { display: flex; flex-direction: column; align-items: center; padding-top: 150px; .empty-img { width: 90px; height: 90px; } .tip-text { font-size: 12px; color: gray; margin-top: 15px; } } ``` ### 9.4 分支的合并与提交 ``` console git add . git commit -m "完成了购物车的开发，待测试" git push -u origin cart git checkout master git merge cart git push git branch -d cart ``` ## 10. 登录与支付 ### 10.0 创建 settle 分支 运行如下的命令，基于 `master` 分支在本地创建 `settle` 子分支，用来开发登录与支付相关的功能： ```bash git checkout -b settle ``` ### 10.1 点击结算按钮进行条件判断 > 说明：用户点击了结算按钮之后，需要先后判断**是否勾选了要结算的商品**、**是否选择了收货地址**、**是否登录**。 - 在 `my-settle` 组件中，为结算按钮绑定点击事件处理函数： ```vue 结算({{checkedCount}}) ``` - 在 `my-settle` 组件的 methods 节点中声明 settlement 事件处理函数如下： ```ts // 点击了结算按钮 settlement() { // 1. 先判断是否勾选了要结算的商品 if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！') // 2. 再判断用户是否选择了收货地址 if (!this.addstr) return uni.$showMsg('请选择收货地址！') // 3. 最后判断用户是否登录了 if (!this.token) return uni.$showMsg('请先登录！') } ``` - 在 `my-settle` 组件中，使用 `mapGetters` 辅助函数，从 `m_user` 模块中将 `addstr` 映射到当前组件中使用： ```ts export default { computed: { ...mapGetters('m_cart', ['total', 'checkedCount', 'checkedGoodsAmount']), // addstr 是详细的收货地址 ...mapGetters('m_user', ['addstr']), isFullCheck() { return this.total === this.checkedCount }, }, } ``` - 在 `store/user.js` 模块的 `state` 节点中，声明 `token` 字符串： ```ts export default { // 开启命名空间 namespaced: true, // state 数据 state: () => ({ // 收货地址 address: JSON.parse(uni.getStorageSync('address') || '{}'), // 登录成功之后的 token 字符串 token: '', }), // 省略其它代码 } ``` - 在 `my-settle` 组件中，使用 `mapState` 辅助函数，从 `m_user` 模块中将 `token` 映射到当前组件中使用： ```ts // 按需从 vuex 中导入 mapState 辅助函数 import { mapGetters, mapMutations, mapState } from 'vuex' export default { computed: { ...mapGetters('m_cart', ['total', 'checkedCount', 'checkedGoodsAmount']), ...mapGetters('m_user', ['addstr']), // token 是用户登录成功之后的 token 字符串 ...mapState('m_user', ['token']), isFullCheck() { return this.total === this.checkedCount }, }, } ``` ### 10.2 登录 #### 10.2.1 定义 my 页面的编译模式 - 点击 `微信开发者工具` 工具栏上的编译模式下拉菜单，选择 `添加编译模式`： ![img](data:image/png;base64,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) - 勾选启动页面的路径之后，点击确定按钮： ![img](https://www.escook.cn/docs-uni-shop/assets/img/10-4.4d78ed78.png) #### 10.2.2 实现登录和用户信息组件的按需展示 - 在 `components` 目录中新建**登录组件**： ![img](https://www.escook.cn/docs-uni-shop/assets/img/10-1.46e30c32.png) - 在 `components` 目录中新建**用户信息组件**： ![img](https://www.escook.cn/docs-uni-shop/assets/img/10-2.ace63114.png) - 在 `my.vue` 页面中，通过 `mapState` 辅助函数，导入需要的 `token` 字符串： ```ts import badgeMix from '@/mixins/tabbar-badge.js' // 1. 从 vuex 中按需导入 mapState 辅助函数 import { mapState } from 'vuex' export default { mixins: [badgeMix], computed: { // 2. 从 m_user 模块中导入需要的 token 字符串 ...mapState('m_user', ['token']), }, data() { return {} }, } ``` - 在 `my.vue` 页面中，实现**登录组件**和**用户信息组件**的按需展示： ```vue ``` #### 10.2.3 实现登录组件的基本布局 - 为 `my-login` 组件定义如下的 UI 结构： ```vue ``` - 美化登录组件的样式： ```scss .login-container { // 登录盒子的样式 height: 750rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f8f8f8; position: relative; overflow: hidden; // 绘制登录盒子底部的半椭圆造型 &::after { content: ' '; display: block; position: absolute; width: 100%; height: 40px; left: 0; bottom: 0; background-color: white; border-radius: 100%; transform: translateY(50%); } // 登录按钮的样式 .btn-login { width: 90%; border-radius: 100px; margin: 15px 0; background-color: #c00000; } // 按钮下方提示消息的样式 .tips-text { font-size: 12px; color: gray; } } ``` #### 10.2.4 点击登录按钮获取微信用户的基本信息 > 需求描述：需要获取微信用户的**头像**、**昵称**等基本信息。 - 为登录的 `button` 按钮绑定 `open-type="getUserInfo"` 属性，表示点击按钮时，希望获取用户的基本信息： ```vue ``` - 在 `methods` 节点中声明 `getUserInfo` 事件处理函数如下： ```ts methods: { // 获取微信用户的基本信息 getUserInfo(e) { // 判断是否获取用户信息成功 if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！') // 获取用户信息成功， e.detail.userInfo 就是用户的基本信息 console.log(e.detail.userInfo) } } ``` #### 10.2.5 将用户的基本信息存储到 vuex - 在 `store/user.js` 模块的 state 节点中，声明 `userinfo` 的信息对象如下： ```ts // state 数据 state: () => ({ // 收货地址 // address: {} address: JSON.parse(uni.getStorageSync('address') || '{}'), // 登录成功之后的 token 字符串 token: '', // 用户的基本信息 userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}') }), ``` - 在 `store/user.js` 模块的 mutations 节点中，声明如下的两个方法： ```ts // 方法 mutations: { // 省略其它代码... // 更新用户的基本信息 updateUserInfo(state, userinfo) { state.userinfo = userinfo // 通过 this.commit() 方法，调用 m_user 模块下的 saveUserInfoToStorage 方法，将 userinfo 对象持久化存储到本地 this.commit('m_user/saveUserInfoToStorage') }, // 将 userinfo 持久化存储到本地 saveUserInfoToStorage(state) { uni.setStorageSync('userinfo', JSON.stringify(state.userinfo)) } } ``` - 使用 `mapMutations` 辅助函数，将需要的方法映射到 `my-login` 组件中使用： ```ts // 1. 按需导入 mapMutations 辅助函数 import { mapMutations } from 'vuex' export default { data() { return {} }, methods: { // 2. 调用 mapMutations 辅助方法，把 m_user 模块中的 updateUserInfo 映射到当前组件中使用 ...mapMutations('m_user', ['updateUserInfo']), // 获取微信用户的基本信息 getUserInfo(e) { // 判断是否获取用户信息成功 if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！') // 获取用户信息成功， e.detail.userInfo 就是用户的基本信息 // console.log(e.detail.userInfo) // 3. 将用户的基本信息存储到 vuex 中 this.updateUserInfo(e.detail.userInfo) }, }, } ``` #### 10.2.6 登录获取 Token 字符串 > 需求说明：当获取到了微信用户的基本信息之后，还需要进一步**调用登录相关的接口**，从而**换取登录成功之后的 Token 字符串**。 - 在 `getUserInfo` 方法中，预调用 `this.getToken()` 方法，同时把获取到的用户信息传递进去： ```ts // 获取微信用户的基本信息 getUserInfo(e) { // 判断是否获取用户信息成功 if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！') // 将用户的基本信息存储到 vuex 中 this.updateUserInfo(e.detail.userInfo) // 获取登录成功后的 Token 字符串 this.getToken(e.detail) } ``` - 在 `methods` 中定义 `getToken` 方法，调用登录相关的 API，实现登录的功能： ```ts // 调用登录接口，换取永久的 token async getToken(info) { // 调用微信登录接口 const [err, res] = await uni.login().catch(err => err) // 判断是否 uni.login() 调用失败 if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！') // 准备参数对象 const query = { code: res.code, encryptedData: info.encryptedData, iv: info.iv, rawData: info.rawData, signature: info.signature } // 换取 token const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query) if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！') uni.$showMsg('登录成功') } ``` #### 10.2.7 将 Token 存储到 vuex - 在 `store/user.js` 模块的 `mutations` 节点中，声明如下的两个方法： ```ts mutations: { // 省略其它代码... // 更新 token 字符串 updateToken(state, token) { state.token = token // 通过 this.commit() 方法，调用 m_user 模块下的 saveTokenToStorage 方法，将 token 字符串持久化存储到本地 this.commit('m_user/saveTokenToStorage') }, // 将 token 字符串持久化存储到本地 saveTokenToStorage(state) { uni.setStorageSync('token', state.token) } } ``` - 修改 `store/user.js` 模块的 `state` 节点如下： ```ts // state 数据 state: () => ({ // 收货地址 address: JSON.parse(uni.getStorageSync('address') || '{}'), // 登录成功之后的 token 字符串 token: uni.getStorageSync('token') || '', // 用户的基本信息 userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}') }), ``` - 在 `my-login` 组件中，把 vuex 中的 `updateToken` 方法映射到当前组件中使用： ```ts methods: { // 1. 使用 mapMutations 辅助方法，把 m_user 模块中的 updateToken 方法映射到当前组件中使用 ...mapMutations('m_user', ['updateUserInfo', 'updateToken']) // 省略其它代码... // 调用登录接口，换取永久的 token async getToken(info) { // 调用微信登录接口 const [err, res] = await uni.login().catch(err => err) // 判断是否 uni.login() 调用失败 if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！') // 准备参数对象 const query = { code: res.code, encryptedData: info.encryptedData, iv: info.iv, rawData: info.rawData, signature: info.signature } // 换取 token const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query) if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！') // 2. 更新 vuex 中的 token this.updateToken(loginResult.message.token) } } ``` ### 10.3 用户信息 #### 10.3.1 实现用户头像昵称区域的基本布局 - 在 `my-userinfo` 组件中，定义如下的 UI 结构： ```vue ``` - 美化当前组件的样式： ```scss .my-userinfo-container { height: 100%; // 为整个组件的结构添加浅灰色的背景 background-color: #f4f4f4; .top-box { height: 400rpx; background-color: #c00000; display: flex; flex-direction: column; align-items: center; justify-content: center; .avatar { display: block; width: 90px; height: 90px; border-radius: 45px; border: 2px solid white; box-shadow: 0 1px 5px black; } .nickname { color: white; font-weight: bold; font-size: 16px; margin-top: 10px; } } } ``` - 在 `my.vue` 页面中，为最外层包裹性质的 `view` 容器，添加 `class="my-container"` 的类名，并美化样式如下： ```scss page, .my-container { height: 100%; } ``` #### 10.3.2 渲染用户的头像和昵称 - 在 `my-userinfo` 组件中，通过 `mapState` 辅助函数，将需要的成员映射到当前组件中使用： ```ts // 按需导入 mapState 辅助函数 import { mapState } from 'vuex' export default { computed: { // 将 m_user 模块中的 userinfo 映射到当前页面中使用 ...mapState('m_user', ['userinfo']), }, data() { return {} }, } ``` - 将用户的头像和昵称渲染到页面中： ```vue {{userinfo.nickName}} ``` #### 10.3.3 渲染第一个面板区域 - 在 `my-userinfo` 组件中，定义如下的 UI 结构： ```vue 8 收藏的店铺 14 收藏的商品 18 关注的商品 84 足迹 ``` - 美化第一个面板的样式： ```scss .panel-list { padding: 0 10px; position: relative; top: -10px; .panel { background-color: white; border-radius: 3px; margin-bottom: 8px; .panel-body { display: flex; justify-content: space-around; .panel-item { display: flex; flex-direction: column; align-items: center; justify-content: space-around; font-size: 13px; padding: 10px 0; } } } } ``` #### 10.3.4 渲染第二个面板区域 - 定义第二个面板区域的 UI 结构： ```vue 我的订单 待付款 待收货 退款/退货 全部订单 ``` - 对之前的 SCSS 样式进行改造，从而美化第二个面板的样式： ```scss .panel-list { padding: 0 10px; position: relative; top: -10px; .panel { background-color: white; border-radius: 3px; margin-bottom: 8px; .panel-title { line-height: 45px; padding-left: 10px; font-size: 15px; border-bottom: 1px solid #f4f4f4; } .panel-body { display: flex; justify-content: space-around; .panel-item { display: flex; flex-direction: column; align-items: center; justify-content: space-around; font-size: 13px; padding: 10px 0; .icon { width: 35px; height: 35px; } } } } } ``` #### 10.3.5 渲染第三个面板区域 - 定义第三个面板区域的 UI 结构： ```vue 收货地址 联系客服 退出登录 ``` - 美化第三个面板区域的样式： ```scss .panel-list-item { height: 45px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; padding: 0 10px; } ``` #### 10.3.6 实现退出登录的功能 - 为第三个面板区域中的 `退出登录` 项绑定 `click` 点击事件处理函数： ```vue 退出登录 ``` - 在 `my-userinfo` 组件的 `methods` 节点中定义 `logout` 事件处理函数： ```ts // 退出登录 async logout() { // 询问用户是否退出登录 const [err, succ] = await uni.showModal({ title: '提示', content: '确认退出登录吗？' }).catch(err => err) if (succ && succ.confirm) { // 用户确认了退出登录的操作 // 需要清空 vuex 中的 userinfo、token 和 address this.updateUserInfo({}) this.updateToken('') this.updateAddress({}) } } ``` - 使用 `mapMutations` 辅助方法，将需要用到的 mutations 方法映射到当前组件中： ```ts // 按需导入辅助函数 import { mapState, mapMutations } from 'vuex' export default { methods: { ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateAddress']), }, } ``` ### 10.4 三秒后自动跳转 #### 10.4.1 三秒后自动跳转到登录页面 > 需求描述：在购物车页面，当用户点击 “结算” 按钮时，**如果用户没有登录，则 3 秒后自动跳转到登录页面** - 在 `my-settle` 组件的 `methods` 节点中，声明一个叫做 `showTips` 的方法，专门用来展示倒计时的提示消息： ```ts // 展示倒计时的提示消息 showTips(n) { // 调用 uni.showToast() 方法，展示提示消息 uni.showToast({ // 不展示任何图标 icon: 'none', // 提示的消息 title: '请登录后再结算！' + n + ' 秒后自动跳转到登录页', // 为页面添加透明遮罩，防止点击穿透 mask: true, // 1.5 秒后自动消失 duration: 1500 }) } ``` - 在 `data` 节点中声明倒计时的秒数： ```ts data() { return { // 倒计时的秒数 seconds: 3 } } ``` - 改造 `结算` 按钮的 `click` 事件处理函数，如果用户没有登录，则**预调用**一个叫做 `delayNavigate` 的方法，进行倒计时的导航跳转： ```ts // 点击了结算按钮 settlement() { // 1. 先判断是否勾选了要结算的商品 if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！') // 2. 再判断用户是否选择了收货地址 if (!this.addstr) return uni.$showMsg('请选择收货地址！') // 3. 最后判断用户是否登录了，如果没有登录，则调用 delayNavigate() 进行倒计时的导航跳转 // if (!this.token) return uni.$showMsg('请先登录！') if (!this.token) return this.delayNavigate() }, ``` - 定义 `delayNavigate` 方法，初步实现**倒计时的提示功能**： ```ts // 延迟导航到 my 页面 delayNavigate() { // 1. 展示提示消息，此时 seconds 的值等于 3 this.showTips(this.seconds) // 2. 创建定时器，每隔 1 秒执行一次 setInterval(() => { // 2.1 先让秒数自减 1 this.seconds-- // 2.2 再根据最新的秒数，进行消息提示 this.showTips(this.seconds) }, 1000) }, ``` > 上述代码的问题：**定时器不会自动停止**，此时秒数会出现等于 0 或小于 0 的情况！ - 在 `data` 节点中声明定时器的 Id 如下： ```ts data() { return { // 倒计时的秒数 seconds: 3, // 定时器的 Id timer: null } } ``` - 改造 `delayNavigate` 方法如下： ```ts // 延迟导航到 my 页面 delayNavigate() { this.showTips(this.seconds) // 1. 将定时器的 Id 存储到 timer 中 this.timer = setInterval(() => { this.seconds-- // 2. 判断秒数是否 <= 0 if (this.seconds <= 0) { // 2.1 清除定时器 clearInterval(this.timer) // 2.2 跳转到 my 页面 uni.switchTab({ url: '/pages/my/my' }) // 2.3 终止后续代码的运行（当秒数为 0 时，不再展示 toast 提示消息） return } this.showTips(this.seconds) }, 1000) }, ``` > 上述代码的问题：**seconds 秒数不会被重置**，导致第 2 次，3 次，n 次 的倒计时跳转功能无法正常工作 - 进一步改造 `delayNavigate` 方法，在执行此方法时，立即将 `seconds` 秒数重置为 `3` 即可： ```ts // 延迟导航到 my 页面 delayNavigate() { // 把 data 中的秒数重置成 3 秒 this.seconds = 3 this.showTips(this.seconds) this.timer = setInterval(() => { this.seconds-- if (this.seconds <= 0) { clearInterval(this.timer) uni.switchTab({ url: '/pages/my/my' }) return } this.showTips(this.seconds) }, 1000) } ``` #### 10.4.2 登录成功之后再返回之前的页面 > 核心实现思路：在自动跳转到登录页面成功之后，把**返回页面的信息存储到 vuex 中**，从而方便登录成功之后，根据返回页面的信息重新跳转回去。 > 返回页面的信息对象，**主要包含 { openType, from } 两个属性**，其中 openType 表示**以哪种方式导航回之前的页面**；from 表示**之前页面的 url 地址**； - 在 `store/user.js` 模块的 `state` 节点中，声明一个叫做 `redirectInfo` 的对象如下： ```ts // state 数据 state: () => ({ // 收货地址 address: JSON.parse(uni.getStorageSync('address') || '{}'), // 登录成功之后的 token 字符串 token: uni.getStorageSync('token') || '', // 用户的基本信息 userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}'), // 重定向的 object 对象 { openType, from } redirectInfo: null }), ``` - 在 `store/user.js` 模块的 `mutations` 节点中，声明一个叫做 `updateRedirectInfo` 的方法： ```ts mutations: { // 更新重定向的信息对象 updateRedirectInfo(state, info) { state.redirectInfo = info } } ``` - 在 `my-settle` 组件中，通过 `mapMutations` 辅助方法，把 `m_user` 模块中的 `updateRedirectInfo` 方法映射到当前页面中使用： ```ts methods: { // 把 m_user 模块中的 updateRedirectInfo 方法映射到当前页面中使用 ...mapMutations('m_user', ['updateRedirectInfo']), } ``` - 改造 `my-settle` 组件 methods 节点中的 `delayNavigate` 方法，当成功跳转到 `my 页面` 之后，将重定向的信息对象存储到 vuex 中： ```ts // 延迟导航到 my 页面 delayNavigate() { // 把 data 中的秒数重置成 3 秒 this.seconds = 3 this.showTips(this.seconds) this.timer = setInterval(() => { this.seconds-- if (this.seconds <= 0) { // 清除定时器 clearInterval(this.timer) // 跳转到 my 页面 uni.switchTab({ url: '/pages/my/my', // 页面跳转成功之后的回调函数 success: () => { // 调用 vuex 的 updateRedirectInfo 方法，把跳转信息存储到 Store 中 this.updateRedirectInfo({ // 跳转的方式 openType: 'switchTab', // 从哪个页面跳转过去的 from: '/pages/cart/cart' }) } }) return } this.showTips(this.seconds) }, 1000) } ``` - 在 `my-login` 组件中，通过 `mapState` 和 `mapMutations` 辅助方法，将 vuex 中需要的数据和方法，映射到当前页面中使用： ```ts // 按需导入辅助函数 import { mapMutations, mapState } from 'vuex' export default { computed: { // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用 ...mapState('m_user', ['redirectInfo']), }, methods: { // 调用 mapMutations 辅助方法，把 m_user 模块中的方法映射到当前组件中使用 ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']), }, } ``` - 改造 `my-login` 组件中的 `getToken` 方法，当登录成功之后，预调用 `this.navigateBack()` 方法返回登录之前的页面： ```ts // 调用登录接口，换取永久的 token async getToken(info) { // 省略其它代码... // 判断 vuex 中的 redirectInfo 是否为 null // 如果不为 null，则登录成功之后，需要重新导航到对应的页面 this.navigateBack() } ``` - 在 `my-login` 组件中，声明 `navigateBack` 方法如下： ```ts // 返回登录之前的页面 navigateBack() { // redirectInfo 不为 null，并且导航方式为 switchTab if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') { // 调用小程序提供的 uni.switchTab() API 进行页面的导航 uni.switchTab({ // 要导航到的页面地址 url: this.redirectInfo.from, // 导航成功之后，把 vuex 中的 redirectInfo 对象重置为 null complete: () => { this.updateRedirectInfo(null) } }) } } ``` ### 10.5 微信支付 #### 10.5.1 在请求头中添加 Token 身份认证的字段 - 原因说明：**只有在登录之后才允许调用支付相关的接口**，所以必须为有权限的接口添加身份认证的请求头字段 - 打开项目根目录下的 `main.js`，改造 `$http.beforeRequest` 请求拦截器中的代码如下： ```ts // 请求开始之前做一些事情 $http.beforeRequest = function(options) { uni.showLoading({ title: '数据加载中...', }) // 判断请求的是否为有权限的 API 接口 if (options.url.indexOf('/my/') !== -1) { // 为请求头添加身份认证字段 options.header = { // 字段的值可以直接从 vuex 中进行获取 Authorization: store.state.m_user.token, } } } ``` #### 10.5.2 微信支付的流程 - **创建订单** - 请求创建订单的 API 接口：把（订单金额、收货地址、订单中包含的商品信息）发送到服务器 - 服务器响应的结果：*订单编号* - **订单预支付** - 请求订单预支付的 API 接口：把（订单编号）发送到服务器 - 服务器响应的结果：*订单预支付的参数对象*，里面包含了订单支付相关的必要参数 - **发起微信支付** - 调用 `uni.requestPayment()` 这个 API，发起微信支付；把步骤 2 得到的 “订单预支付对象” 作为参数传递给 `uni.requestPayment()` 方法 - 监听 `uni.requestPayment()` 这个 API 的 `success`，`fail`，`complete` 回调函数 #### 10.5.3 创建订单 - 改造 `my-settle` 组件中的 `settlement` 方法，当前三个判断条件通过之后，调用实现微信支付的方法： ```ts // 点击了结算按钮 settlement() { // 1. 先判断是否勾选了要结算的商品 if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！') // 2. 再判断用户是否选择了收货地址 if (!this.addstr) return uni.$showMsg('请选择收货地址！') // 3. 最后判断用户是否登录了 // if (!this.token) return uni.$showMsg('请先登录！') if (!this.token) return this.delayNavigate() // 4. 实现微信支付功能 this.payOrder() }, ``` - 在 `my-settle` 组件中定义 `payOrder` 方法如下，先实现创建订单的功能： ```ts // 微信支付 async payOrder() { // 1. 创建订单 // 1.1 组织订单的信息对象 const orderInfo = { // 开发期间，注释掉真实的订单价格， // order_price: this.checkedGoodsAmount, // 写死订单总价为 1 分钱 order_price: 0.01, consignee_addr: this.addstr, goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price })) } // 1.2 发起请求创建订单 const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo) if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！') // 1.3 得到服务器响应的“订单编号” const orderNumber = res.message.order_number // 2. 订单预支付 // 3. 发起微信支付 } ``` #### 10.5.4 订单预支付 - 改造 `my-settle` 组件的 `payOrder` 方法，实现订单预支付功能： ```ts // 微信支付 async payOrder() { // 1. 创建订单 // 1.1 组织订单的信息对象 const orderInfo = { // 开发期间，注释掉真实的订单价格， // order_price: this.checkedGoodsAmount, // 写死订单总价为 1 分钱 order_price: 0.01, consignee_addr: this.addstr, goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price })) } // 1.2 发起请求创建订单 const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo) if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！') // 1.3 得到服务器响应的“订单编号” const orderNumber = res.message.order_number // 2. 订单预支付 // 2.1 发起请求获取订单的支付信息 const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber }) // 2.2 预付订单生成失败 if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！') // 2.3 得到订单支付相关的必要参数 const payInfo = res2.message.pay // 3. 发起微信支付 } ``` #### 10.5.5 发起微信支付 - 改造 `my-settle` 组件的 `payOrder` 方法，实现微信支付的功能： ```ts // 微信支付 async payOrder() { // 1. 创建订单 // 1.1 组织订单的信息对象 const orderInfo = { // 开发期间，注释掉真实的订单价格， // order_price: this.checkedGoodsAmount, // 写死订单总价为 1 分钱 order_price: 0.01, consignee_addr: this.addstr, goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price })) } // 1.2 发起请求创建订单 const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo) if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！') // 1.3 得到服务器响应的“订单编号” const orderNumber = res.message.order_number // 2. 订单预支付 // 2.1 发起请求获取订单的支付信息 const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber }) // 2.2 预付订单生成失败 if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！') // 2.3 得到订单支付相关的必要参数 const payInfo = res2.message.pay // 3. 发起微信支付 // 3.1 调用 uni.requestPayment() 发起微信支付 const [err, succ] = await uni.requestPayment(payInfo) // 3.2 未完成支付 if (err) return uni.$showMsg('订单未支付！') // 3.3 完成了支付，进一步查询支付的结果 const { data: res3 } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', { order_number: orderNumber }) // 3.4 检测到订单未支付 if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！') // 3.5 检测到订单支付完成 uni.showToast({ title: '支付完成！', icon: 'success' }) } ``` ### 10.6 分支的合并与提交 - 将 `settle` 分支进行本地提交： ```bash git add . git commit -m "完成了登录和支付功能的开发" ``` - 将本地的 `settle` 分支推送到码云： ```bash git push -u origin settle ``` - 将本地 `settle` 分支中的代码合并到 `master` 分支： ```bash git checkout master git merge settle git push ``` - 删除本地的 `settle` 分支： ```bash git branch -d settle ``` ## 11. 发布 ### 11.1 为什么要发布 - 小程序只有发布之后，才能被用户搜索并使用 - 开发期间的小程序为了便于调试，含有 sourcemap 相关的文件，并且代码没有被压缩，因此体积较大，不适合直接当作线上版本进行发布 - 通过执行 “小程序发布”，能够优化小程序的体积，提高小程序的运行性能 ### 11.2 发布小程序的流程 - 点击 `HBuilderX` 菜单栏上的 `发行` -> `小程序-微信(仅适用于uni-app)`： ![img](https://www.escook.cn/docs-uni-shop/assets/img/11-1.9cdf19c7.png) - 在弹出框中填写要发布的**小程序的名称**和**AppId**之后，点击发行按钮： ![img](data:image/png;base64,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) - 在 `HBuilderX` 的控制台中**查看小程序发布编译的进度**： ![img](https://www.escook.cn/docs-uni-shop/assets/img/11-3.567c1979.png) - 发布编译完成之后，会自动打开一个新的**微信开发者工具界面**，此时，点击工具栏上的上传按钮： ![img](https://www.escook.cn/docs-uni-shop/assets/img/11-4.9c24f0ee.png) - 填写**版本号**和**项目备注**之后，点击**上传**按钮： ![img](data:image/png;base64,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) - 上传完成之后，会出现如下的提示消息，直接点击**确定**按钮即可： ![img](https://www.escook.cn/docs-uni-shop/assets/img/11-6.d5c408c3.png) - 通过微信开发者工具上传的代码，默认处于**版本管理**的**开发版本**列表中，如图所示： ![img](https://www.escook.cn/docs-uni-shop/assets/img/11-7.ec9045bc.png) - 将 `开发版本提交审核` -> 再将 `审核通过的版本发布上线`，即可实现小程序的发布和上线： ![img](https://www.escook.cn/docs-uni-shop/assets/img/11-8.a251f8b8.png) ### 11.3 发布为 Android App 的流程 - 点击 HBuilderX 状态栏左侧的**未登录**按钮，弹出登录的对话框： ![img](data:image/png;base64,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) - 在弹出的登录对话框中，填写**账号**和**密码**之后，**点击登录**即可： ![img](https://www.escook.cn/docs-uni-shop/assets/img/11-10.438598e0.png) - 打开项目根目录中的 `manifest.json` 配置文件，在**基础配置**面板中，获取**uni-app 应用标识**，并填写**应用名称**： ![img](https://www.escook.cn/docs-uni-shop/assets/img/11-11.dc32f303.png) - 切换到 **App 图标配置**面板，点击**浏览**按钮，选择合适的图片之后，再点击**自动生成所有图标并替换**即可： ![img](https://www.escook.cn/docs-uni-shop/assets/img/11-12.e3157064.png) - 点击菜单栏上的 **发行** -> **原生 App-云打包**： ![img](https://www.escook.cn/docs-uni-shop/assets/img/11-13.d176ba65.png) - **勾选打包配置**如下： ![img](https://www.escook.cn/docs-uni-shop/assets/img/11-14.ddd7bcc3.png) - 在**控制台**中**查看打包的进度信息**： ![img](https://www.escook.cn/docs-uni-shop/assets/img/11-15.c8d3b328.png) - 点击链接**下载 apk 的安装包**，并**安装到 Android 手机中**查看打包的效果。 > 注意：由于开发期间**没有进行多端适配**，所以有些功能在 App 中无法正常运行，例如：**选择收货地址**、**微信登录**、**微信支付**