小程序的 iview Weapp 组件库的使用

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

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

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

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

2. 在 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 工具