概述

今天在網上突然看到iView新出了一個微信小程式的元件庫iView Weapp，自己就上手試了一下，發現用起來還是不錯的，把自己使用的過程與大家分享下。

一 預覽iView元件

1.可以在手機上掃碼檢視這個元件，但是我們想使用哪一個元件是什麼樣的，就需要在手機上看這個元件是什麼樣的，其實這樣挺麻煩的，不過我還是把二維碼給放過來吧。

# 從 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中使用元件

<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    
    });  
 }
});

完成以上步驟之後咱們看下效果：

如果覺得文章還不錯並對你有幫助的話，請分享給你的小夥伴，並點贊，點亮紅心的人最美，有什麼不懂得可以在底下留言哦。