微信小程序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    
    });  
 }
});複製代碼

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

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