为了账号安全,请及时绑定邮箱和手机立即绑定

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

2018.06.11 16:37 7983浏览

概述

今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下。

一 预览iView组件

  1. 可以在手机上扫码查看这个组件,但是我们想使用哪一个组件是什么样的,就需要在手机上看这个组件是什么样的,其实这样挺麻烦的,不过我还是把二维码给放过来吧。

https://img3.mukewang.com/5b1e31450001318604300430.jpg

2.就是在web微信开发者工具中查看,首先去github上下载,下载地址:https://github.com/TalkingData/iview-weapp,然后安装依赖。

# 从GitHub下载并安装依赖
npm install
# 编译组件
npm run dev

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

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

https://img.mukewang.com/5b1e32070001580619200935.jpg

报了了错误,说没有game.json这个文件,又看了一遍 examples 目录,也没发现这个文件,这是为什么呢,百度了一下,然后发现是自己没有写AppID,把自己的AppID填上就可以,然后再次打开,就是这样:

https://img2.mukewang.com/5b1e32600001ad9318920928.jpg

二 使用iView组件

使用之前首先要了解微信自定义组件:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

也可以去看我以前的文章微信组件封装:https://www.imooc.com/article/33553

现在开始使用,首先到 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    
   });  
 }
})

完成以上步骤之后咱们看下效果:

https://img3.mukewang.com/5b1e344d000161cf00120019.jpg

如果觉得文章还不错并对你有帮助的话,请分享给你的小伙伴,并点赞,点亮红心的人最美,有什么不懂得可以在底下留言哦。

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

13人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消