iview 这个 UI 框架想必大家都很熟了，这个搞 Vue 框架的基本素养。下面来看看小程序版的。
首先到 GitHub 去下载 iView Weapp 的代码，将
dist 目录拷贝到自己的项目中。
将 `dist` 目录拷贝到自己的项目中
- 然后改变页面的 json 文件：例如 index.json
{
"usingComponents": {
"i-button": "../../dist/button/index"
}
}
- 在 index.wxml 中使用组件：
<i-button type="primary" bind:click="handleClick">这是一个按钮</i-button>
这是一个按钮
InputNumber 数字输入框
商城小程序必备的数字输入框。
在 .json 中引入组件
"usingComponents": {
"i-input-number": "../../dist/input-number/index"
}
在 .wxml 中引入
<i-panel title="基础用法">
<view style="padding: 16px">
<i-input-number value="{{ value1 }}" min="0" max="100" bindchange="handleChange1" />
</view>
</i-panel>
下面是运行的效果，总的来看还是不错的。
购物商城数字输入框
ActionSheet 动作面板
还有个常用的动作面板。
从底部弹出的模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。
在 .json 中引入组件
"usingComponents": {
"i-action-sheet": "../../dist/action-sheet/index"
}
在 .wxml 中引入组件
<view style="margin-top: 100px">
<i-button type="ghost" bind:click="handleOpen1">一般用法</i-button>
</view>
<i-action-sheet visible="{{ visible1 }}" actions="{{ actions1 }}" show-cancel bind:cancel="handleCancel1" bind:click="handleClickItem1" />
</view>
购物商城的购物页面
这个动作面板和微信小程序原生的动作面板有啥视觉的区别，一起来看看：
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 工具
