Taro跨端开发探索16——商品详情页面开发

前言

我们这几天关于商品相关的功能开发的差不多了，现在已经完成了以下功能

• 首页
• 分类搜索
• 搜索引导和商品列表

今天我们来打通商品到购物车或者直接下单的最后一环——商品详情页

商品详情页的需求分析

简单分析一下,有以下几个功能

1. 头部切换：商品、评价、详情、推荐区域快速跳转。这里要实现下滑切换头部tab和tab计算对应的滑动窗口位置。总体的逻辑比较难，不在我们今天的探索范围内
2. 当前规格的图片显示
3. 规格的属性显示
4. 切换规格
5. 物流、服务。这个地方是京东自有的逻辑，今天暂时不探索这个功能的实现
6. 评价列表。实现的逻辑和237一样，只是需要加载数据。本文先略过这个功能的实现
7. 商品描述

今天，我们实现一下以上 2、3、4、7的需求。即进入详情页时先加载商品数据，渲染237。在进行4操作的时候，237也随之改变。我们结合上一篇的redux/toolkit来使用状态管理器实现当前规格的存储功能

实现逻辑

根据单一组件单一职责的功能划分，我们将这五个需求分为了4个组件。其中商品描述我们没有单独开发组件，因为它是直接渲染的html元素。

step1 src下新建sub-details-pages文件夹，创建goods-detil文件夹

因为这个详情页面是有可能不用打开用户就能直接下单的，所以我们新建一个用来分所有详情的包：sub-details-pages，在它下面新建goods-detil用来表示商品详情
这一步不要忘记在app.config.ts中添加分包定义,定义的代码如下

 {
      root: "sub-detail-pages",
      name: "detail-pages",
      pages: ["goods-detail/index"],
 }, 

step2 先创建基本的子组件并在index.tsx中引用

这一步我们就是简单的看一下定义的几个组件是否正常引入，在goods-detail下新建index.tsx和index.scss，其他组件分别创建对应的文件夹和index.tsx、index.config.ts和index.scss(这一步所有的组件的index.scss内容都为空)
/goods-detail/index.tsx

import { View, Text } from "@tarojs/components";
import "./index.scss";
import ProductPhoto from "./product-photo";
import ProductProps from "./product-props";
import ProductSelector from "./product-selector";
export default function GoodsDetail() {
  return (
    <View>
      <ProductPhoto />
      <ProductProps />
      <ProductSelector />
      <Text>描述</Text>
    </View>
  );
} 

四个组建的初始化方法都差不多，我拿一个举例。以规格图片为例，ProductPhoto组件定义如下 /goods-detail/product-photo/index.tsx

import { View } from "@tarojs/components";
import "./index.scss";
export default function ProductPhoto() {
  return <View></View>;
} 

step3 添加跳转入口

我们在首页和商品详情页添加进入商品详情页的入口，在点击对应的商品view时，通过

Taro.redirectTo({
    url: `/sub-detail-pages/goods-detail/index?goodsId=${item.id}`,
}) 

跳转到商品详情页。这里我们之所以采用redirectTo是因为微信小程序在使用navigateTo时会限制最多跳转10层。

step4 定义商品详情的规格状态

因为我们在查看详情的时候，取的大部分是规格信息，我们直接使用状态管理器