Detailed explanation of Abnor exception flow component of MinUI component

What I want to share with you in this article is the abnor exception flow component of the MinUI component library series of WeChat mini programs. MinUI is a set of simple, easy-to-use, and efficient component libraries developed based on the custom component features of WeChat mini programs. It is suitable for It has a wide range of scenarios, covering the native mini program framework, various mainstream frameworks of mini program components, etc., and provides efficient command line tools.

MinUI component library contains many functional components, among which the abnor exception flow component is a very commonly used functional component. The rendering of the abnor component in MinUI is as follows:

There are various types, doesn’t it look very convenient and fast (^_^). You can open WeChat and scan the QR code of the mini program below to get a first look:

The following introduces how to use the abnor component.

1. Use the following command to install Min-Cli. If it is already installed, please proceed to the next step. Please click here for the Min-Cli documentation: Min-Cli User Manual

npm install -g @mindev/min-cli

2. Initialize a small program project.

min init my-project

Select the New Mini Program option to initialize a mini program project. After creating the project, open the project in the editor. The src directory is the source code directory, and the dist directory is the directory specified in the WeChat developer tools after compilation. There is already a home page in the newly created project. Detailed documentation: Min initialization applet project

3. Install the abnor component.

Enter the directory of the newly created applet project:

cd my-project

Install components:

min install @minui/wxc-abnor

4. Start dev.

min dev

After it is turned on, it will be recompiled after modifying the source code.

5. Introduce components into the page.

Open the home/index.wxp file in the src/pages directory in the editor and add # in script ##config field, configure the mini program custom component field, the code is as follows:

export default {
    config: {
        "usingComponents": {
            'wxc-abnor': "@minui/wxc-abnor"
        }
    }
}

wxc-abnor is the label name of the exception flow component, which can be used in wxml.

6. Use the wxc-abnor tag in wxml.

Add the

wxc-abnor tag in the template of the home/index.wxp file, the code is as follows:

<wxc-abnor type="SHOP"></wxc-abnor>

7. Open the WeChat developer tools, specify the dist directory, and preview the project.

home/index.wxp The code of the file is as follows:

<script>
  export default {
    config: {
      usingComponents: {
        'wxc-abnor': '@minui/wxc-abnor'
      }
    },
    data: {}
  }
</script>

Illustration:

So far, the method of using the abnor exception flow component of the minui component library in the mini program project generated by the Min tool has been introduced. Other scenarios and how to use it in native mini programs or other mini program framework projects have been introduced. Please go to the following link:

Introduction to using MinUI components in existing mini program projects

After understanding how to use the component, let’s start with the API of the abnor component.

Abnor【props】

NameDescription[Description]: Exception status type, its priority is lower than other attributes. ##imagetypetitletypetiptypebuttontypebindabnortapbutton##

更多demo

1、网络异常

<template>
  <wxc-abnor type="REQUEST_ERROR" bind:abnortap="onAbnorTap"></wxc-abnor>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-abnor': '@minui/wxc-abnor'
    }
  },
  data: {},
  onAbnorTap() {
      wx.showToast({
        title: 'success',
        duration: 2000
      });
    }
}
</script>

<style>
</style>

图示：

2、页面不存在

<template>
  <wxc-abnor type="NOT_FOUND" bind:abnortap="onAbnorTap"></wxc-abnor>
</template>

<script>
  export default {
    config: {
      usingComponents: {
        'wxc-abnor': '@minui/wxc-abnor'
      }
    },
    data: {},
    onAbnorTap() {
        wx.showToast({
          title: 'back',
          duration: 2000
        });
      }
  }
</script>

<style>
</style>

图示：

3、自定义数据

<template>
  <wxc-abnor
    type="REQUEST_ERROR"
    image="{{image}}"
    title="{{title}}"
    tip="{{tip}}"
    button="{{button}}"
    bind:abnortap="onAbnorTap"
  ></wxc-abnor>
</template>

<script>
  export default {
    config: {
      usingComponents: {
        'wxc-abnor': '@minui/wxc-abnor'
      }
    },
    data: {
      image: 'https://s10.mogucdn.com/p2/161213/upload_76h1c5hjc8heecjehlfgekjdl2ki0_514x260.png',
      title: '自定义标题',
      tip: '自定义副标题',
      button: '点我'
    },
    onAbnorTap() {
        wx.showToast({
          title: 'custom',
          duration: 2000
        });
      }
  }
</script>

<style>
</style>

图示：

4、空数据状态

<template>
  <wxc-abnor type="DATA"></wxc-abnor>
</template>

<script>
  export default {
    config: {
      usingComponents: {
        'wxc-abnor': '@minui/wxc-abnor'
      }
    },
    data: {}
  }
</script>

<style>
</style>

图示：

5、无关注数据

<template>
  <wxc-abnor type="FOLLOW"></wxc-abnor>
</template>

<script>
  export default {
    config: {
      usingComponents: {
        'wxc-abnor': '@minui/wxc-abnor'
      }
    },
    data: {},
    methods: {}
  }
</script>

<style>
</style>

图示：

6、无反馈数据

<template>
  <wxc-abnor type="FOLLOW"></wxc-abnor>
</template>

<script>
  export default {
    config: {
      usingComponents: {
        'wxc-abnor': '@minui/wxc-abnor'
      }
    },
    data: {}
  }
</script>

<style>
</style>

图示：

7、无搜索数据

<template>
  <wxc-abnor type="SEARCH"></wxc-abnor>
</template>

<script>
  export default {
    config: {
      usingComponents: {
        'wxc-abnor': '@minui/wxc-abnor'
      }
    },
    data: {}
  }
</script>

<style>
</style>

图示：

8、无消息通知

<template>
  <wxc-abnor type="FOLLOW"></wxc-abnor>
</template>

<script>
  export default {
    config: {
      usingComponents: {
        'wxc-abnor': '@minui/wxc-abnor'
      }
    },
    data: {}
  }
</script>

<style>
</style>

图示：

9、空订单列表

<template>
  <wxc-abnor type="ORDER"></wxc-abnor>
</template>

<script>
  export default {
    config: {
      usingComponents: {
        'wxc-abnor': '@minui/wxc-abnor'
      }
    },
    data: {}
  }
</script>

<style>
</style>

图示：

10、空购物车

<template>
  <wxc-abnor type="CART"></wxc-abnor>
</template>

<script>
  export default {
    config: {
      usingComponents: {
        'wxc-abnor': '@minui/wxc-abnor'
      }
    },
    data: {}
  }
</script>

<style>
</style>

图示：

11、空足迹

<template>
  <wxc-abnor type="FOOTPRINT"></wxc-abnor>
</template>

<script>
  export default {
    config: {
      usingComponents: {
        'wxc-abnor': '@minui/wxc-abnor'
      }
    },
    data: {}
  }
</script>

<style>
</style>

图示：

12、无优惠券数据

<template>
  <wxc-abnor type="COUPON"></wxc-abnor>
</template>

<script>
  export default {
    config: {
      usingComponents: {
        'wxc-abnor': '@minui/wxc-abnor'
      }
    },
    data: {}
  }
</script>

<style>
</style>

图示：

载入中...

type	[Type]: StringDefault value: "" [Optional value]: REQUEST_ERROR, NOT_FOUND, DATA, FOLLOW, FEED, SHOP, WEIBO, SEARCH, TAG, MESSAGE, LIVE, ORDER, CART, FOOTPRINT, COUPON
[Description] : Background image. If specified together with	, the image corresponding to type will be overwritten. [Type]: String [Default value]: ""
[Description]: Title. If specified together with	, the title corresponding to type will be overwritten. [Type]: String [Default value]: ""
[Description]: Subtitle. If specified together with	, the tip corresponding to type will be overwritten. [Type]: String [Default value]: ""
[Description]: Button copy. If specified together with	, the button corresponding to type will be overwritten. [Type]: String [Default]: ""
[Description]: Button event. If the	attribute is configured, the event needs to be specified. Among them, REQUEST_ERROR, NOT_FOUND both type have default button copy

The above is the detailed content of Detailed explanation of Abnor exception flow component of MinUI component. For more information, please follow other related articles on the PHP Chinese website!