微信小程序 MinUI 组件库系列之 abnor 异常流组件
ne6745
7年前
<p><a href="/misc/goto?guid=4959756660820501246" rel="nofollow,noindex">MinUI</a> 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库，适用场景广，覆盖小程序原生框架、各种小程序组件主流框架等，并且提供了高效的命令行工具。MinUI 组件库包含了很多功能组件，其中 abnor 异常流组件是一个很常用的功能性组件， MinUI 中 abnor 组件的效果图如下：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/fafe1157949af897045cef7065af7237.png"></p> <p>各式各样的类型都有哦，是不是看起来很方便很快捷的样子(^_^)。可以打开微信扫一扫下面的小程序二维码先一睹为快：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/0aec5251eee7f22b69363bb186a52c92.jpg"></p> <p>下面介绍 abnor 组件的使用方式。</p> <p>1、使用下列命令安装 <a href="/misc/goto?guid=4959756660906192135" rel="nofollow,noindex">Min-Cli</a> ，如已安装，请进入到下一步。Min-Cli 的文档请猛戳这里： <a href="/misc/goto?guid=4959756660998938793" rel="nofollow,noindex">Min-Cli使用手册</a></p> <pre> npm install -g @mindev/min-cli</pre> <p>2、初始化一个小程序项目。</p> <pre> min init my-project</pre> <p>选择 <strong>新建小程序</strong> 选项，即可初始化一个小程序项目。创建项目后，在编辑器中打开项目，src 目录为源码目录，dist 目录为编译后用于在微信开发者工具中指定的目录。新建的项目中已有一个 home 页面。详细文档： <a href="/misc/goto?guid=4959756661081246814" rel="nofollow,noindex">Min 初始化小程序项目</a></p> <p>3、安装 abnor 组件。</p> <p>进入刚才新建的小程序项目的目录中：</p> <pre> cd my-project</pre> <p>安装组件：</p> <pre> min install @minui/wxc-abnor</pre> <p>4、开启dev。</p> <pre> min dev</pre> <p>开启之后，修改源码后都会重新编译。</p> <p>5、在页面中引入组件。</p> <p>在编辑器中打开 src/pages 目录下的 home/index.wxp 文件，在 script 中添加 config 字段，配置小程序自定义组件字段，代码如下：</p> <pre> export default { config: { "usingComponents": { 'wxc-abnor': "@minui/wxc-abnor" } } }</pre> <p>wxc-abnor 即为异常流组件的标签名，可以在 wxml 中使用。</p> <p>6、在 wxml 中使用 wxc-abnor 标签。</p> <p>在 home/index.wxp 文件的 template 中添加 wxc-abnor 标签，代码如下：</p> <pre> <wxc-abnor type="SHOP"></wxc-abnor></pre> <p>7、打开微信开发者工具，指定 dist 目录，预览项目。</p> <p>home/index.wxp 文件的代码如下所示：</p> <pre> <!-- 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></pre> <p>图示：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/ebf3599446def1cb5e83c76c026de973.png"></p> <p>至此，minui 组件库的 abnor 异常流组件在 Min 工具生成的小程序项目中的方法已介绍完毕，其他场景，在原生小程序或其他小程序框架项目中的使用方式请移步至如下链接：</p> <p><a href="/misc/goto?guid=4959756661163124444" rel="nofollow,noindex">在已有小程序项目中使用 MinUI 组件介绍</a></p> <p>了解组件的使用方式后，下面开始介绍 abnor 组件的 API 。</p> <p>Abnor【props】</p> <table> <thead> <tr> <th>名称</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>type</td> <td>[说明]：异常状态类型，其优先级低于其他属性。<br> [类型]： String<br> 默认值： ""<br> [可选值]： REQUEST_ERROR, NOT_FOUND, DATA, FOLLOW, FEED,SHOP, WEIBO, SEARCH, TAG, MESSAGE, LIVE, ORDER, CART, FOOTPRINT, COUPON</td> </tr> <tr> <td>image</td> <td>[说明]：背景图。若与 type 同时指定，将覆盖 type 对应的 image 。<br> [类型]： String<br> [默认值]： ""</td> </tr> <tr> <td>title</td> <td>[说明]：标题。若与 type 同时指定，将覆盖 type 对应的 title 。<br> [类型]： String<br> [默认值]： ""</td> </tr> <tr> <td>tip</td> <td>[说明]：副标题。若与 type 同时指定，将覆盖 type 对应的 tip 。<br> [类型]： String<br> [默认值]： ""</td> </tr> <tr> <td>button</td> <td>[说明]：按钮文案。若与 type 同时指定，将覆盖 type 对应的 button 。<br> [类型]： String<br> [默认值]： ""</td> </tr> <tr> <td>bindabnortap</td> <td>[说明]：按钮事件。若配置了 button 属性，则需要指定事件。其中 REQUEST_ERROR, NOT_FOUND 两种 type 中均设置了默认的按钮文案</td> </tr> </tbody> </table> <p>更多demo</p> <p>1、网络异常</p> <pre> <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></pre> <p>图示：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/c9035a06851ae155bdafc83e76974559.png"></p> <p>2、页面不存在</p> <pre> <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></pre> <p>图示：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/a31747133b278509d9305043aa850aba.png"></p> <p>3、自定义数据</p> <pre> <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></pre> <p>图示：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/f4a455772481f4bed69f29f20c42fcf1.png"></p> <p>4、空数据状态</p> <pre> <template> <wxc-abnor type="DATA"></wxc-abnor> </template> <script> export default { config: { usingComponents: { 'wxc-abnor': '@minui/wxc-abnor' } }, data: {} } </script> <style> </style></pre> <p>图示：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/c5ad862341811110902267c2fd525919.png"></p> <p>5、无关注数据</p> <pre> <template> <wxc-abnor type="FOLLOW"></wxc-abnor> </template> <script> export default { config: { usingComponents: { 'wxc-abnor': '@minui/wxc-abnor' } }, data: {}, methods: {} } </script> <style> </style></pre> <p>图示：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/17301df10d54182fdfdb49cba7b581da.png"></p> <p>6、无反馈数据</p> <pre> <template> <wxc-abnor type="FOLLOW"></wxc-abnor> </template> <script> export default { config: { usingComponents: { 'wxc-abnor': '@minui/wxc-abnor' } }, data: {} } </script> <style> </style></pre> <p>图示：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/3fbde18c61b9cbe1273f698f65d0e93d.png"></p> <p>7、无搜索数据</p> <pre> <template> <wxc-abnor type="SEARCH"></wxc-abnor> </template> <script> export default { config: { usingComponents: { 'wxc-abnor': '@minui/wxc-abnor' } }, data: {} } </script> <style> </style></pre> <p>图示：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/33dff8eeaee9d480fcc9d16cbcc56dcf.png"></p> <p>8、无消息通知</p> <pre> <template> <wxc-abnor type="FOLLOW"></wxc-abnor> </template> <script> export default { config: { usingComponents: { 'wxc-abnor': '@minui/wxc-abnor' } }, data: {} } </script> <style> </style></pre> <p>图示：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/0d948b1494174707c468861a1db85049.png"></p> <p>9、空订单列表</p> <pre> <template> <wxc-abnor type="ORDER"></wxc-abnor> </template> <script> export default { config: { usingComponents: { 'wxc-abnor': '@minui/wxc-abnor' } }, data: {} } </script> <style> </style></pre> <p>图示：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/25cbd1c2f91b7a40382d81596266105c.png"></p> <p>10、空购物车</p> <pre> <template> <wxc-abnor type="CART"></wxc-abnor> </template> <script> export default { config: { usingComponents: { 'wxc-abnor': '@minui/wxc-abnor' } }, data: {} } </script> <style> </style></pre> <p>图示：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/9e7ffed8c39e8a3a3751d3e32f5b3a05.png"></p> <p>11、空足迹</p> <pre> <template> <wxc-abnor type="FOOTPRINT"></wxc-abnor> </template> <script> export default { config: { usingComponents: { 'wxc-abnor': '@minui/wxc-abnor' } }, data: {} } </script> <style> </style></pre> <p>图示：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/cc3c23a234a516a4901639a0719b3efd.png"></p> <p>12、无优惠券数据</p> <pre> <template> <wxc-abnor type="COUPON"></wxc-abnor> </template> <script> export default { config: { usingComponents: { 'wxc-abnor': '@minui/wxc-abnor' } }, data: {} } </script> <style> </style></pre> <p>图示：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/04cfce6be092e428b916dde71e2a9bb6.png"></p> <p>更多组件更新同步请关注 MinUI 小程序组件库示例查看，或请移步到实时同步更新的 <a href="/misc/goto?guid=4959756661253521661" rel="nofollow,noindex">微信小程序 abnor 异常流组件使用文档</a> 。</p> <p> </p> <p> </p> <p> </p> <p>来自：https://segmentfault.com/a/1190000012959444</p> <p> </p>