Taro跨端开发探索12——通用查询组件编写

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情。

前言

在昨天的更文活动中，我们完成了首页下拉加载数据的代码编写。今天，我们来探索小程序通用的搜索组件开发。

需求分析

我们在商城搜索的时候，一般会有三个页面

搜索引导页。这个也慢慢一般放在首页和分类搜索页面。用来引导用户进入搜索页面
搜索页面。这个页面是真正的搜索页，用户在输入搜索条件之后，点击这个页面的搜索。就会跳到搜索结果页面
搜索结果页也就是商品列表页，用户点击对应的商品进入详情就可以加购物车或者直接购买了

组件开发

我们将需求中的搜索页面作为一个通用的组件。在首页或者类别页面进行搜索的时候，封装查询体传入搜索页面。用户输入搜索字段筛选后，将传入的值和输入的值封装为请求体调用后台接口即可进行搜索

搜索引导页面开发

我们暂时还没有开发分类搜索相关的功能。所以我们先实现从首页的搜搜引导页面跳转到搜索页面。
我们这里要实现的就是用户的手在悬浮到搜索框时，自动跳转到通用的搜索组件
home/index.tsx代码如下

import { ScrollView, Text } from "@tarojs/components";
import { useState } from "react";
import "./index.scss";
import RecommendedGoods from "./recommended-goods";
import ResidentActivities from "./resident-activities";
import { AtSearchBar } from "taro-ui";
import Taro from "@tarojs/taro";

export default function Home() {
  const [goodQueryIndex, setGoodsQueryIndex] = useState(1);
  const [bottomLoading, setBottomLoading] = useState({
    loading: false,
    hasMore: true,
  });
  return (
    <ScrollView
      className="home"
      scrollY={true}
      onScrollToLower={() => {
        setGoodsQueryIndex(goodQueryIndex + 1);
      }}
    >
      <AtSearchBar
        value={""}
        onChange={() => {}}
        onFocus={() => {
          Taro.navigateTo({ url: "/sub-query-pages/goods-query/index" });
        }}
      />
      <ResidentActivities />
      <RecommendedGoods
        queryIndex={goodQueryIndex}
        bottomLoadingCallBack={(value) => setBottomLoading(value)}
      />
      {bottomLoading.loading ? (
        <Text>加载中</Text>
      ) : bottomLoading.hasMore ? (
        ""
      ) : (
        <Text>没有更多了</Text>
      )}
    </ScrollView>
  );
}

这里不要忘记需要引入相关的样式，我们在home/index.scss添加样式代码如下

@import "~taro-ui/dist/style/components/search-bar.scss";
@import "~taro-ui/dist/style/components/icon.scss";

通用的搜索页面开发

在开发之前，我们先想一下这个问题：用户是否会用到搜索页面？。这个问题可能有点搞笑，用不到的页面我开发它干什么。但是，在用户不进入这个页面的时候，它是处在用和不用的中间态。我称之为薛定谔的页面

言归正传，其实我这里想说的是对应除去tabBar之外的页面和组件。我们最好实用分包模式开发，分包模式很好的解决了两个问题

单个包开发体积太大，小程序无法上传。
用户想要访问小程序的时候，等待下载包的时间过长
下面我们就使用分包开发来进行通用的查询组件开发

step1 定义分包配置

我们将所有的搜索分到一个包中，先创建商品搜索和商品的页面。即：在src目录下新建sub-query-pages文件夹。在这个文件夹下面新建goods-query和goods-list并初始化index.tsx、index.scss、index.config.ts文件
我们在项目app.config.ts中添加分包配置项：subPackages。添加之后，配置如下

export default defineAppConfig({
  pages: [
    "pages/home/index",
    "pages/category/index",
    "pages/shop-cart/index",
    "pages/user/index",
  ],
  //分包配置
  subPackages: [
    {
      root: "sub-query-pages",
      name: "query-pages",
      pages: ["goods-query/index"],
    },
  ],
  tabBar: {
    color: "#333",
    selectedColor: "#ff0000",
    backgroundColor: "#fff",
    borderStyle: "black",
    list: [
      {
        pagePath: "pages/home/index",
        text: "首页",
        iconPath: "static/images/tab-bar/home.png",
        selectedIconPath: "static/images/tab-bar/home-active.png",
      },
      {
        pagePath: "pages/category/index",
        text: "分类",
        iconPath: "static/images/tab-bar/category.png",
        selectedIconPath: "static/images/tab-bar/category-active.png",
      },
      {
        pagePath: "pages/shop-cart/index",
        text: "购物车",
        iconPath: "static/images/tab-bar/shop-cart.png",
        selectedIconPath: "static/images/tab-bar/shop-cart-active.png",
      },
      {
        pagePath: "pages/user/index",
        text: "我的",
        iconPath: "static/images/tab-bar/user.png",
        selectedIconPath: "static/images/tab-bar/user-active.png",
      },
    ],
  },
  window: {
    backgroundTextStyle: "light",
    navigationBarBackgroundColor: "#fff",
    navigationBarTitleText: "WeChat",
    navigationBarTextStyle: "black",
  },
});

大家可以看我分包配置的注释处，它有几个配置，我简单解释一下

root:就是定义这个分包的根路径
name:别名，小程序根据这个名称加载
pages：数组形式,定义你需要分包加的页面。注意在访问的时候需要根添加路径前缀

step2 商品搜索页面开发

goods-query/index.tsx

import { View } from "@tarojs/components";
import { AtSearchBar } from "taro-ui";
import { useState } from "react";
import Taro from "@tarojs/taro";
import "./index.scss";
export default function GoodsQuery() {
  const [queryKey, setQueryKey] = useState("");
  return (
    <View>
      <AtSearchBar
        onActionClick={() => {
          Taro.navigateTo({ url: `/sub-query-pages/goods-list/index?searchKey=${queryKey}` });
        }}
        focus={true}
        value={queryKey}
        placeholder="请输入搜索条件"
        onChange={(value) => {
          setQueryKey(value);
        }}
      />
    </View>
  );
}

这里需要注意的是注意要设置focus={true}。逻辑也很简单：用户输入搜索条件点击搜索按钮之后携带查询条件传输到商品列表页面
goods-query/index.scss

@import "~taro-ui/dist/style/components/search-bar.scss";
@import "~taro-ui/dist/style/components/icon.scss";

引入scss
goods-query/index.config.ts

export default definePageConfig({
  navigationBarTitleText: '搜索商品'
})

定义标题

ste3 商品列表页面开发

goods-list/index.tsx

import { View } from "@tarojs/components";
import { AtSearchBar } from "taro-ui";
import { useEffect, useState } from "react";
import "./index.scss";
import { getCurrentInstance } from "@tarojs/taro";
export default function GoodsList() {
  const { router } = getCurrentInstance();
  const [queryKey, setQueryKey] = useState("");
  useEffect(() => {
    const searchKey = router && router.params.searchKey;
    if (searchKey) {
      setQueryKey(searchKey);
      console.log("searchKey", searchKey);
    }
  }, []);
  return (
    <View>
      <AtSearchBar
        onActionClick={() => console.log("queryKey")}
        focus={true}
        value={queryKey}
        placeholder="请输入搜索条件"
        onChange={(value) => {
          setQueryKey(value);
        }}
      />
    </View>
  );
}

我们在这里是有useEffect监听传入的参数改变，在有值并且值改变的时候进行打印
goods-list/index.scss

@import "~taro-ui/dist/style/components/search-bar.scss";
@import "~taro-ui/dist/style/components/icon.scss";

引入scss goods-list/index.config.ts

export default definePageConfig({
  navigationBarTitleText: "商品列表",
});

定义标题\

结语

大家可有看到我今天开发的商品搜索页面比较简单，主要是我想先等分类页面开发之后在一起开发搜索和列表页面。今天我们先实现搜索引导和点击跳转搜索页面即可。明天我们开始探索分类搜索的页面。
欢迎大家多多关注点赞\