概述

今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp，自己就上手试了一下，发现用起来还是不错的，把自己使用的过程与大家分享下。

一 预览iView组件

1.可以在手机上扫码查看这个组件，但是我们想使用哪一个组件是什么样的，就需要在手机上看这个组件是什么样的，其实这样挺麻烦的，不过我还是把二维码给放过来吧。

2.就是在web微信开发者工具中查看，首先去github上下载，下载地址：，然后安装依赖。

# 从 GitHub 下载后，安装依赖npm install# 编译组件npm run dev复制代码

最后，将 examples 目录在微信开发者工具中打开即可。

我刚开始打开的时候是这样的

报了了错误，说没有game.json这个文件，又看了一遍 examples 目录，也没发现这个文件，这是为什么呢，百度了一下，然后发现是自己没有写AppID，把自己的AppID填上就可以，然后再次打开，就是这样：

二 使用iView组件

使用之前首先要了解微信自定义组件：

也可以去看我以前的文章微信组件封装：

现在开始使用，首先到 github 下载 iView Weapp 的代码，将 dist 目录拷贝到自己的项目中。然后按照如下的方式使用组件，以 Button和Modal 为例，其它组件在对应的文档页查看：

1. 添加需要的组件。在页面的 json 中配置（路径根据自己项目位置配置）：

{  "component": true,  "usingComponents": {    "i-button": "../../dist/button/index",    "i-modal": "../../dist/modal/index"  }}复制代码

2. 在wxml中使用组件

          
     
      这是一个按钮
     
    
            
     
      普通对话框
     
    
          
     
      一些文本
           
     
      一些文本
           
     
      一些文本
           
     
      一些文本
           
     
      一些文本
           
     
      一些文本
           
     
      一些文本
           
     
      一些文本
           
     
      一些文本
     
    复制代码

3.组件的一些交互效果

Page({  data: {        visible1: false,  },  handleOpen1() {    this.setData({              visible1: true        });   }, handleClose1() {    this.setData({      visible1: false        });   }});复制代码

完成以上步骤之后咱们看下效果：

如果觉得文章还不错并对你有帮助的话，请分享给你的小伙伴，并点赞，点亮红心的人最美，有什么不懂得可以在底下留言哦。