微信小程序UI组件 iView Weapp快速上手

概述

今天在网上忽然看到iView新出了一个微信小程序的组件库iView Weapp，本身就上手试了一下，发现用起来仍是不错的，把本身使用的过程与你们分享下。

一 预览iView组件

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

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

# 从 GitHub 下载后，安装依赖
npm install

# 编译组件
npm run dev
复制代码

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

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

报了了错误，说没有game.json这个文件，又看了一遍 examples 目录，也没发现这个文件，这是为何呢，百度了一下，而后发现是本身没有写AppID，把本身的AppID填上就能够，而后再次打开，就是这样：

二 使用iView组件

使用以前首先要了解微信自定义组件：developers.weixin.qq.com/miniprogram…

也能够去看我之前的文章微信组件封装：juejin.im/post/5afcee…

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

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

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

2. 在wxml中使用组件

<view class="container">  
    <i-button type="primary" bind:click="handleClick">这是一个按钮</i-button>
</view>
<view style="margin-top: 100px;">    
    <i-button bind:click="handleOpen1">普通对话框</i-button>
</view>
<i-modal title="标题" visible="{{ visible1 }}" bind:ok="handleClose1" bind:cancel="handleClose1">    
  <view>一些文本</view>    
  <view>一些文本</view>    
  <view>一些文本</view>    
  <view>一些文本</view>    
  <view>一些文本</view>    
  <view>一些文本</view>    
  <view>一些文本</view>    
  <view>一些文本</view>    
  <view>一些文本</view>
</i-modal>复制代码

3.组件的一些交互效果

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

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

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