微信小程序组件库 iView Weapp使用教程

太过爱你忘了你带给我的痛 2022-12-05 10:20 598阅读 0赞

#### 微信UI组件库 iView Weapp ####

介绍：iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称，大幅度降低了学习成本，是一套一套高质量的微信小程序 UI 组件库。

> https://weapp.iviewui.com/

![image][]

使用步骤

1：首先在github上面下载组件库代码  
https://github.com/TalkingData/iview-weapp  
![156764e83fba918f4d58854dadd62426.png][]

2：下载之后解压，可以看到解压的组件文件内容，选择 dist文件  
将 dist 目录拷贝到自己的小程序项目中  
![d44333598b121f1528c6494b0ccd9b36.png][]

![677a800bc7d6e048f76b23b49c758b02.png][]

3：开始写代码，写页面效果，写一个按钮  
在json文件里面引入组件

{
     "usingComponents": {
      "i-button": "../../dist/button/index"
    }
    }

在wxml页面,，复制文档组件库代码示例

<i-button type="primary" bind:click="handleClick">这是一个按钮</i-button>

代码完成之后，可以在左侧查看按钮效果  
![a2ef300c77fbe2a6b827e4333741076b.png][]

iView Weapp和Vant的用法相似，再开发小程序的时候，都属于一个很好用的组件库，简单容易，只要引入即可使用，对于不想写代码的宝宝们来说，是一个不错的选择。

五分钟上手Vant，快速搭建小程序界面样式  
https://www.jianshu.com/p/fd0643195245

![\](https://img-blog.csdnimg.cn/20200909212938862.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ==,size\_16,color\_FFFFFF,t\_70\#pic\_center)][https_img-blog.csdnimg.cn_20200909212938862.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[image]: /images/20221123/4de22d076e09450d90e3d41fe81c7291.png
[156764e83fba918f4d58854dadd62426.png]: /images/20221123/7ff2bf41df104315b8a1bab9e9a06efc.png
[d44333598b121f1528c6494b0ccd9b36.png]: /images/20221123/d04453cb5f5c460eac0a858497a5da5a.png
[677a800bc7d6e048f76b23b49c758b02.png]: /images/20221123/572e0f1cea2b4c9296aefd87b2fe44a9.png
[a2ef300c77fbe2a6b827e4333741076b.png]: /images/20221123/2ed352b0cbe84cad86cf9298b53987b2.png
[https_img-blog.csdnimg.cn_20200909212938862.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/e249b0e34cc740bf8983db7bc12e58ff.png