MinUI 是基于微信小程序自定義組件特性開發(fā)而成的一套簡潔摘符、易用、高效的組件庫拷淘，適用場景廣各墨，覆蓋小程序原生框架、各種小程序組件主流框架等启涯，并且提供了高效的命令行工具贬堵。MinUI 組件庫包含了很多功能組件，其中 abnor 異常流組件是一個很常用的功能性組件结洼， MinUI 中 abnor 組件的效果圖如下：
各式各樣的類型都有哦黎做，是不是看起來很方便很快捷的樣子(_)∷扇蹋可以打開微信掃一掃下面的小程序二維碼先一睹為快：
下面介紹 abnor 組件的使用方式蒸殿。
1、使用下列命令安裝 Min-Cli鸣峭，如已安裝宏所，請進入到下一步。Min-Cli 的文檔請猛戳這里：Min-Cli使用手冊
npm install -g @mindev/min-cli
2摊溶、初始化一個小程序項目爬骤。
min init my-project
選擇 新建小程序 選項，即可初始化一個小程序項目莫换。創(chuàng)建項目后盖腕，在編輯器中打開項目赫冬，src 目錄為源碼目錄，dist 目錄為編譯后用于在微信開發(fā)者工具中指定的目錄溃列。新建的項目中已有一個 home 頁面劲厌。詳細文檔：Min 初始化小程序項目
3、安裝 abnor 組件听隐。
進入剛才新建的小程序項目的目錄中：
cd my-project
安裝組件：
min install @minui/wxc-abnor
4补鼻、開啟dev。
min dev
開啟之后雅任，修改源碼后都會重新編譯风范。
5、在頁面中引入組件沪么。
在編輯器中打開 src/pages 目錄下的 home/index.wxp 文件硼婿，在 script 中添加 config 字段，配置小程序自定義組件字段禽车，代碼如下：
export default {
config: {
"usingComponents": {
'wxc-abnor': "@minui/wxc-abnor"
}
}
}
wxc-abnor 即為異常流組件的標簽名寇漫，可以在 wxml 中使用。
6殉摔、在 wxml 中使用 wxc-abnor標簽州胳。
在 home/index.wxp 文件的 template 中添加 wxc-abnor 標簽，代碼如下：
<wxc-abnor type="SHOP"></wxc-abnor>
7逸月、打開微信開發(fā)者工具栓撞，指定 dist 目錄，預覽項目碗硬。
home/index.wxp 文件的代碼如下所示：
<!-- home/index.wxp -->
<template>
<wxc-abnor type="SHOP"></wxc-abnor>
</template>
<script>
export default {
config: {
usingComponents: {
'wxc-abnor': '@minui/wxc-abnor'
}
},
data: {}
}
</script>
<style>
</style>
圖示：
至此瓤湘，minui 組件庫的 abnor 異常流組件在 Min 工具生成的小程序項目中的方法已介紹完畢，其他場景恩尾，在原生小程序或其他小程序框架項目中的使用方式請移步至如下鏈接：
了解組件的使用方式后岭粤，下面開始介紹 abnor 組件的 API 。
Abnor【props】
| 名稱 | 描述 |
|---|---|
type |
[說明]：異常狀態(tài)類型特笋，其優(yōu)先級低于其他屬性。 [類型]： String默認值： "" [可選值]： REQUEST_ERROR, NOT_FOUND, DATA, FOLLOW, FEED,SHOP, WEIBO, SEARCH, TAG, MESSAGE, LIVE, ORDER, CART, FOOTPRINT, COUPON
|
image |
[說明]：背景圖巾兆。若與 type 同時指定猎物，將覆蓋 type 對應的 image 。[類型]： String[默認值]： "" |
title |
[說明]：標題角塑。若與 type 同時指定蔫磨，將覆蓋 type 對應的 title 。[類型]： String[默認值]： "" |
tip |
[說明]：副標題圃伶。若與 type 同時指定堤如，將覆蓋 type 對應的 tip 蒲列。[類型]： String[默認值]： "" |
button |
[說明]：按鈕文案。若與 type 同時指定搀罢，將覆蓋 type 對應的 button 蝗岖。[類型]： String[默認值]： "" |
bindabnortap |
[說明]：按鈕事件。若配置了 button 屬性榔至，則需要指定事件抵赢。其中 REQUEST_ERROR, NOT_FOUND 兩種 type 中均設置了默認的按鈕文案 |
更多demo
1、網(wǎng)絡異常
<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铅鲤、自定義數(shù)據(jù)
<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、空數(shù)據(jù)狀態(tài)
<template>
<wxc-abnor type="DATA"></wxc-abnor>
</template>
<script>
export default {
config: {
usingComponents: {
'wxc-abnor': '@minui/wxc-abnor'
}
},
data: {}
}
</script>
<style>
</style>
圖示：
5枫弟、無關注數(shù)據(jù)
<template>
<wxc-abnor type="FOLLOW"></wxc-abnor>
</template>
<script>
export default {
config: {
usingComponents: {
'wxc-abnor': '@minui/wxc-abnor'
}
},
data: {},
methods: {}
}
</script>
<style>
</style>
圖示：
6邢享、無反饋數(shù)據(jù)
<template>
<wxc-abnor type="FOLLOW"></wxc-abnor>
</template>
<script>
export default {
config: {
usingComponents: {
'wxc-abnor': '@minui/wxc-abnor'
}
},
data: {}
}
</script>
<style>
</style>
圖示：
7、無搜索數(shù)據(jù)
<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绪爸、無優(yōu)惠券數(shù)據(jù)
<template>
<wxc-abnor type="COUPON"></wxc-abnor>
</template>
<script>
export default {
config: {
usingComponents: {
'wxc-abnor': '@minui/wxc-abnor'
}
},
data: {}
}
</script>
<style>
</style>
圖示：
更多組件更新同步請關注 MinUI 小程序組件庫示例查看，或請移步到實時同步更新的 微信小程序 abnor 異常流組件使用文檔宙攻。
溝通反饋
請?zhí)砑尤褐?wUf18018252882 好友或者掃碼加好友奠货，并與群助手對話發(fā)送驗證碼 10088 按照指引進群。
相關鏈接
開源組件
-
布局元素
-
基礎元件
-
功能組件
-
提示反饋
-
表單組件
- Coming soon ...
蘑菇街前端團隊座掘，2018.01.23 于杭州
