day06-拦截器&搜索模块&商品列表

wepy拦截器 -interceptor

可以使用wepy提供的全局拦截器对原生API 的请求进行拦截

使用方法

具体方法是配置API的config、fail、success、complete回调函数，参考示例：

import wepy from 'wepy';

export default class extends wepy.app {
   
    constructor () {
   
        // this is not allowed before super()
        super();
        // 拦截request请求
        this.intercept('request', {
   
            // 发出请求时的回调函数
            config (p) {
   
                // 对所有request请求中的OBJECT参数对象统一附加时间戳属性
                p.timestamp = +new Date();
                console.log('config request: ', p);
                // 必须返回OBJECT参数对象，否则无法发送请求到服务端
                return p;
            },

            // 请求成功后的回调函数
            success (p) {
   
                // 可以在这里对收到的响应数据对象进行加工处理
                console.log('request success: ', p);
                // 必须返回响应数据对象，否则后续无法对响应数据进行处理
                return p;
            },

            //请求失败后的回调函数
            fail (p) {
   
                console.log('request fail: ', p);
                // 必须返回响应数据对象，否则后续无法对响应数据进行处理
                return p;
            },

            // 请求完成时的回调函数(请求成功或失败都会被执行)
            complete (p) {
   
                console.log('request complete: ', p);
            }
        });
    }
}

利用拦截器实现请求的loading效果

我们可以使用拦截器来对所有的请求来加一个loading效果，在发出请求的时候，让loading效果显示，当请求完毕之后让loading效果隐藏

在app.wpy里面编写拦截器效果

constructor() {
   
      super()
      ...
      // 拦截request请求
      this.intercept('request', {
   
        // 发出请求时的回调函数
        config(p) {
   
          // 当请求发出的时候，显示loading
          wepy.showLoading({
   
            title: '数据加载中。。。', //提示的内容,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => {
   }
          });
          // 必须返回OBJECT参数对象，否则无法发送请求到服务端
          return p;
        },
        // 请求成功后的回调函数
        success(p) {
   
          // 必须返回响应数据对象，否则后续无法对响应数据进行处理
          return p;
        },
        //请求失败后的回调函数
        fail(p) {
   
          // 必须返回响应数据对象，否则后续无法对响应数据进行处理
          return p;
        },
        // 请求完成时的回调函数(请求成功或失败都会被执行)
        complete(p) {
   
        // 不管请求成功或者失败，都需要隐藏loading效果
          wepy.hideLoading();
        }
      });
}

搜索模块

用户输入内容搜索相关内容

• 利用 vant 组件 来进行搜索框效果的实现

  • 在app.wpy里面添加全局组件

    usingComponents: {
           
            ...
            "van-search": "./assets/vant/search/index"
    }
    

  • 在 search.wpy 里面编写组件结构，可以直接从文档中拷贝

    <view>
        <van-search value="{
            { value }}" placeholder="请输入搜索关键词" show-action bind:search="onSearch" bind:cancel="onCancel" />
    </view>
    

• 在mixins文件夹下创建search.js 在里面定义两个函数，一个是用户触发了搜索，一个是用户取消搜索

  import wepy from 'wepy'
  export default class extends wepy.mixin {
       
      data = {
       
          value: ''
      }
      methods = {
       
          // 当用户搜索的时候触发
          onSearch(e