概述
今天在網上突然看到iView新出了一個微信小程序的組件庫iView Weapp,自己就上手試了一下,發現用起來還是不錯的,把自己使用的過程與大家分享下。
一 預覽iView組件
1.可以在手機上掃碼查看這個組件,但是我們想使用哪一個組件是什么樣的,就需要在手機上看這個組件是什么樣的,其實這樣挺麻煩的,不過我還是把二維碼給放過來吧。
2.就是在web微信開發者工具中查看,首先去github上下載,下載地址:https://github.com/TalkingData/iview-weapp,然后安裝依賴。
# 從 GitHub 下載后,安裝依賴
npm install
# 編譯組件
npm run dev
最后,將 examples
目錄在微信開發者工具中打開即可。
我剛開始打開的時候是這樣的
報了了錯誤,說沒有game.json這個文件,又看了一遍 examples
目錄,也沒發現這個文件,這是為什么呢,百度了一下,然后發現是自己沒有寫AppID,把自己的AppID填上就可以,然后再次打開,就是這樣:
二 使用iView組件
使用之前首先要了解微信自定義組件:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
也可以去看我以前的文章微信組件封裝:https://www.cnblogs.com/Limengbo/p/8583661.html
現在開始使用,首先到 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 }); } });
完成以上步驟之后咱們看下效果:
如果覺得文章還不錯並對你有幫助的話,請分享給你的小伙伴,並點贊,點亮紅心的人最美,有什么不懂得可以在底下留言哦。