电商小程序案例:搜索

2020.03.09 10:03:54
27
阅读约 5 分钟
Scroll down

搜索 #

搜索栏组件的属性 #

打开 pages/shop 下面的 index 页面 ,在这个页面上用了一个 SearchBar 组件,这是之前我们自己定义的一个组件 …

  • 先添加一个 value, 它的值就是要搜索的关键词,让它等于this.state.search,使用页面上的 search 这个 state

  • 再添加一个 onChange,搜索栏有变化会执行它,this.onChangeSearchBar , bind 一个 this,下面再添加一个 onActionClick,点击搜索栏上的搜索按钮会执行this.onActionClickSearchBar

  • 最后再添加一个 onConfirm,按了设备上的完成按钮会触发执行this.onConfirmSearchBar。

然后再这个页面上添加一个新的 state … 名字是 search ,默认它是一个空白的字符 …

img

在这个组件里用到了 Taro UI里的 AtSearchBar 组件 … 组件需要的属性现在可以使用这个组件的属性 …

value 的值是 this.props 里的 value 属性的值 …

onChange 属性的值是 this.props 里的 onChange …

onActionClick 这个属性的值用一下 this.props 里的 onActionClick

再给它添加一个 onConfirm … 它的值用一下 this.props 里的 onConfirm …

img

实现搜索功能 #

回到商店页面 … 在这个页面里可以添加一个搜索方法 … 名字可以是 search … 支持一个 value 参数 … 默认的值是一个空白字符 …

方法里面可以用一下之前我们创建的 fetchData 方法去请求需要的资源 … 找到使用了这个方法的地方 … 复制一下 … 把它粘贴到这个 search 方法里面 …
img

下面需要再去改造一下 fetchData … 按住 alt 键 … 按一下导入这个模块的地方 … 打开的是 utilities 下面的 fetch-data 里的 index.js …

在这个函数里面,再给它添加一个 search 参数 … 默认让它等于空白 …

然后在接口的地址查询符里面 … 先判断一下 search 的值 … 如果有的话 … 就在 queryParams 里面添加一个 q 参数 … 它的值是 search 参数的值 …
img

优化搜索频率(debounce) #

下面我们可以 debounce 的方法优化一下这个搜索频率问题 …

打开编辑器集成的终端 … 先给项目安装一个包 … 名字是 lodash … 保存在项目的依赖里面 …

$ npm i lodash --save

然后在这个页面的顶部 … 导入刚才安装的 lodash ,导入进来的名字是下划线 … 它来自 lodash 这个包 …

在这个 search 方法的下面,可以再去创建一个新的搜索方法 …

名字叫 debounceSearch … 这个方法用一下 lodash 里的 debounce 方法来生成 … 根据 this.search 这个方法 … 间隔的时间是 500 毫秒 … 就是半秒钟 …

找到搜索栏的 onChange 事件处理 … 这里执行搜索的时候用一下 debounceSearch 这个方法 …
img

搜索加载指示器(AtActivityIndicator) #

执行搜索的时候可以显示一个加载动画 … Taro UI 里提供了一个动作指示组件 … 正好可以作为执行搜索的时候显示的加载指示器 …

import {  AtActivityIndicator } from "taro-ui";

然后再添加一个 state … 名字是 searching ,用它表示是不是正在搜索,默认让它等于 false …

  state = {
    products: [],
    placeholder: true,
    total: 0,
    pageSize: 2,
    current: 1,
    serviceError: false,
    search: '',
    searching: false
  };

找到 search 方法 … 执行它的时候设置一下页面的 state … 把 searching 的值设置成 true …
img
在搜索的时候请求服务完成以后,再把这个 searching 的值设置成 false … 改进一下 fetch-data 这个模块 … 打开这个模块的定义 … 让它再接收一个新的回调参数 … 名字是 complete … 它是一个函数 … 请求完成以后,不管是成功还是失败都执行一下这个回调 …

import Taro from '@tarojs/taro';
import BuildUrl from 'build-url';

async function fetchData({
    resource = '',
    page = '',
    pageSize = '',
    search = '',
    success = () => { },
    fail = () => { },
    complete = () => { }
}) {
    const queryParams = {}

    if (page) queryParams._page = page
    if (pageSize) queryParams._limit = pageSize
    if (search) queryParams.q = search


    // eslint-disable-next-line no-undef
    const url = BuildUrl(API_WS, {
        path: resource,
        queryParams
    })

    try {
        const res = await Taro.request({
            url
        });

        const { statusCode } = res

        switch (statusCode) {
            case 200:
                if (process.env.NODE_ENV === 'development') {
                    setTimeout(() => {
                        success(res)

                    }, 2000);
                } else {
                    success(res)

                }
                break;

            default:
                throw new Error('出问题了');
                break;
        }

    } catch (error) {
        fail(error)

    }

    complete()

}

export default fetchData

再到模拟器上试一下 … 在搜索栏里输入点内容 … 这回这个搜索加载指示器会在页面上停留一会儿 …

改进 #

改进错误页面( Error Message) #

下面再找到 fetchData 失败的回调 … 在这个方法里面添加一个 error 参数 … 失败的时候设置一下 errorPageMessage 的值 … 让它等于 error 里的 message …
img
再打开定义 fetchData 这个模块的地方 … 修改一下出问题的时候 throw 的这个错误里的信息的值 … 换成服务出现问题,请稍后再试。
img
回到模拟器可以再试一下 … 停止运行服务 … 刷新一下模拟器 … 请求出了问题,页面上就会显示 服务出现问题,请稍后再试
img

阅读:27 . 字数:1290 发布于 7 个月前
Copyright 2018-2020 Siques