小程序的iviewWeapp组件库的使用

iview 这个 UI 框架想必大家都很熟了，这个搞 Vue 框架的基本素养。下面来看看小程序版的。

首先到 GitHub 去下载 iView Weapp 的代码，将 dist 目录拷贝到自己的项目中。

将 `dist` 目录拷贝到自己的项目中

1. 然后改变页面的 json 文件：例如 index.json

{ "usingComponents": { "i-button": "../../dist/button/index" } }

2. 在 index.wxml 中使用组件：

这是一个按钮

这是一个按钮

InputNumber 数字输入框

商城小程序必备的数字输入框。

在 .json 中引入组件

"usingComponents": { "i-input-number": "../../dist/input-number/index" }

在 .wxml 中引入

下面是运行的效果，总的来看还是不错的。

购物商城数字输入框

ActionSheet 动作面板

还有个常用的动作面板。
从底部弹出的模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。

在 .json 中引入组件

"usingComponents": { "i-action-sheet": "../../dist/action-sheet/index" }

在 .wxml 中引入组件

一般用法

购物商城的购物页面

这个动作面板和微信小程序原生的动作面板有啥视觉的区别，一起来看看：

wx.showActionSheet({ itemList: ['A', 'B', 'C'], success(res) { console.log(res.tapIndex) }, fail(res) { console.log(res.errMsg) } });

点击 A ，点击 res.tapIndex 是 0。

总的来讲 iview 还比较好看的。
更多用法去参考：https://weapp.iviewui.com/

另外有赞出品的 vant 框架小程序版，使用方法去看 小程序如何使用 npm 工具