新手快速入门微信小程序组件库 iView Weapp

介绍

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

使用步骤

1：首先在github上面下载组件库代码

github

2：下载之后解压

可以看到解压的组件文件内容，选择 dist文件，将 dist 目录拷贝到自己的小程序项目中

3：开始写代码

写页面效果，写一个按钮

在json文件里面引入组件

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

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

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

代码完成之后，可以在左侧查看按钮效果

结语

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 小程序click-scroll组件设计

    一. 背景 有些业务需求,要求前端展示的内容多时可以通过scroll的形式拖拉查看,但是太多的滚动条又造成页面太乱,于是封装了这个click-scroll 组件.在组件上设定好展示的位置和空间大小,在组件内部放置实际要展示的内容,实际展示的内容宽度或长或短都由此组件来控制. 二. 功能 组件内的内容宽度超过组件宽度时,组件两侧会自动出现『左右移动』交互. 当内部展示的内容超过组件的可见区域时,可以在组件的可见区域单击拖动查看内容 三. 背景知识,元素大小的测量 1.偏移量(offset dime

  • 微信小程序 image组件遇到的问题

    远程图片 在真机上测试时 image组件只能显示http请求的图片, 对https 与 //xxx.xxx.xx 之类的不能显示. 可显示 'http://img.alicdn.com/i2/83231071/TB2B03RsYplpuFjSspiXXcdfFXa_!!83231071.jpg', "http://img.alicdn.com/i2/83231071/TB2uTODub0kpuFjy0FjXXcBbVXa_!!83231071.jpg", "http://im

  • 微信小程序 wepy框架与iview-weapp的用法详解

    最近在弄wepy的时候在想有没有什么ui比较合适一点的wepy的,也是在网上看了好久发现iview还不错.引用简单,上手超快,组件绚丽!当然,这里还介绍下微信官方建议的框架也是和不错的,有需要的可以看看(https://github.com/Tencent/weui-wxss),这里主要做view-weapp的介绍 小程序相关项目 1.wepy项目     https://github.com/Tencent/wepy 2.iview-weapp https://weapp.iviewui.co

  • 微信小程序 MinUI组件库系列之badge徽章组件示例

    MinUI是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础的组件,其中 badge 徽章组件是一个很常用的基础元件, MinUI 中 badge 组件的效果图如下: 各式各样的类型都有哦,是不是看起来很方便很快捷的样子(^_^).可以打开微信扫一扫下面的小程序二维码先一睹为快: 下面介绍 badge 组件的使用方式. 1.使用下列命令安装 Min-Cli,如

  • 小程序组件之自定义顶部导航实例

    小程序组件之自定义顶部导航实例

    前言 微信小程序凭借着"不占内存,即用即走"等特点,加上微信的社交的属性,其用户量一路保持快速的增长.对其的应用要求也日渐增高,使用更多样化.个性化.其中,对顶部导航的自定义实现,因交互功能成了一个普遍需要实现的组件,而尤因其不同设备下样式的兼容问题 如何更优雅的实现 使其成为大家讨论的热点. 下面我们从对其的设计.实现.使用上进行详细阐述,让大家更加了解这个组件.原创文章,若有写的不妥之处,欢迎大家指出更正. 自定义导航的设计 界面设计 目前,大多小程序对自定义导航的设计是:标题居中

  • 微信小程序动态添加view组件的实例代码

    微信小程序动态添加view组件的实例代码

    在web中,我们动态添加DOM,可以用jQuery的方法,很简单.在微信小程序中怎么实现下面这么需求. 其中,里程数代表上一行到这一行地方的距离(这个不重要):要实现的就是点击增加途径地,就多一行,删除途径地,就少一行. 分析:添加的和删除的是同样的结构,只是数量不一样,所以考虑循环,用列表表示,增加就往这个列表push一个,删除就从列表pop一个. 主要代码如下: <view class="weui-cell weui-cell_input"> <view clas

  • 微信小程序 swiper 组件遇到的问题及解决方法

    Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! swiper 组件高度被限制为150px了,所以内容无法撑开. 解决办法 给这组件重新设置个高度,然后在把里面的图片设置为自动适应容器大小.图片模式设置为 宽度不变 自动适应高度 <swiper class="test" .....>

  • 新手快速入门微信小程序组件库 iView Weapp

    新手快速入门微信小程序组件库 iView Weapp

    介绍 iView Weapp提供了与 iView 一致的 UI 和尽可能相同的接口名称,大幅度降低了学习成本,是一套一套高质量的微信小程序 UI 组件库. 使用步骤 1:首先在github上面下载组件库代码 github 2:下载之后解压 可以看到解压的组件文件内容,选择 dist文件,将 dist 目录拷贝到自己的小程序项目中 3:开始写代码 写页面效果,写一个按钮 在json文件里面引入组件 { "usingComponents": { "i-button":

  • VUE 组件转换为微信小程序组件的方法

    简介: 首先我们介绍一下本文的关键点:抽象语法树,它是以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构. 通过操作这棵树,可以精确的定位到声明.赋值.运算语句,从而实现对代码的优化.变更等操作. 本文通过对 VUE 组件的 JavaScript .CSS模块进行转换,比如 JavaScript模块,包括外层对象,生命周期钩子函数,赋值语句,组件的内部数据,组件的对外属性等等来实现把一个 VUE 组件转换为 一个小程序组件. AST 抽象语法树,似乎我们平时并不会接触到.

  • 手把手带你入门微信小程序新框架Kbone的使用

    Kbone 框架 前些天在微信上收到了微信开发者公众号的文章推送<揭开微信小程序Kbone的神秘面纱>,心想:微信小程序有新框架了?抱着学习的态度点进去看了一眼,看过之后觉得这框架也太宠开发者了吧,不愧是微信团队出品. 原来这个框架早在去年就已经发布了,看完只恨自己没有早点知道消息开始学习这个框架.我写本文的目的也是为了跟个风,想要让更多的人能够知道这个框架,感受它的便利,希望好学的你可以停下脚步看看~ Kbone 是什么? 看到这里我也不多说了,简单介绍一下 Kbone 是什么.用官方高大上

  • 微信小程序组件 contact-button（客服会话按钮）详解及实例代码

    微信小程序组件 contact-button contact-button 客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话. 属性名 类型 默认值 说明 size Number 18 会话按钮大小,有效值 18-27,单位:px type String default-dark 会话按钮的样式类型,有效值 default-dark, default-light session-from String   用户从该按钮进入会话时,开发者将收到带上本参数的事件推送.本

  • 微信小程序组件 marquee实例详解

    微信小程序组件 marquee实例详解 1. marquee标签 html是有marquee标签的,可以实现跑马灯效果,但小程序没有,所以要实现.这里考虑使用css3的animation实现. html的marquee是这样使用的. <marquee direction="left" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1"

  • 微信小程序组件之srcoll-view的详解

    微信小程序组件之srcoll-view的详解

    微信小程序组件之srcoll-view的详解 今天记录一下scroll-view学习中遇到的问题及解决办法,希望能对其他同学有所帮助. 首先展示一下想达到的效果.↓ vertical scroll实现上下滚动,horizontal实现左右滚动. 先附上wxml的代码. <view class="container"> <view> <text>vertical scroll</text> <scroll-view scroll-y

  • 微信小程序组件生命周期的踩坑记录

    微信小程序组件生命周期的踩坑记录

    组件生命周期,通常是我们业务逻辑开始的地方. 如果业务场景比较复杂,组件生命周期有不符合预期的表现时, 可能会导致一些诡异的业务bug,它们极难复现和修复. 组件 attached 生命周期执行次数 按照通常的理解,除moved/show/hide等生命周期可能多次执行外, 严格意义上与组件加载相关的生命周期,如:created.attached.ready等,每个组件实例应该只执行一次.但是事实真的如此吗? 背景 这个问题的发现,源于我们在小程序的报错日志中, 收到大量类似Cannot red

  • 微信小程序组件开发之可视化电影选座功能

    微信小程序组件开发之可视化电影选座功能

    目录 一. 简介 1. 组件数据 2. 组件页面布局 1. 标识区构成 2.座位区构成 2.1 电影屏幕: 2.2 电影厅介绍: 2.3 座位区域: 3. 组件业务逻辑 总结 一. 简介 想必很多人都有陪男女朋友去看电影的经历吧,是不是在每次选座的时候你都要征求女盆友或男盆友的意见,什么?不征求?!那你完了! 目前市场上许多的电影购票app和小程序中,为了让观众老爷们在线上更好地选择自己心怡的位置,方便可视化的选座数据必不可少,在此, 让我们一起来看看这个好用的可视化选座组件吧! 视图效果如下:

  • 一个小时快速搭建微信小程序的方法步骤

    一个小时快速搭建微信小程序的方法步骤

    「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的是微信这两天发布了正式版开发者工具,无需内测邀请也可以尝鲜了. 因此也就有了我与「小程序」的初体验,而我的感受只有一个字--爽! 选择哪个「小程序」Demo? 在知名同性交友网站 Github 上,「小程序」的 Demo 不少,但是大多只是简单的 API 演示,有的甚至直接把页面数据写在了 json

  • 三分钟带你快速学会微信小程序的条件渲染

    三分钟带你快速学会微信小程序的条件渲染

    目录 前言 1.wx:if实现条件渲染 2.block结合wx:if使用 3.hiden实现条件渲染 4. wx:if vs hidden 补充:hidden 和 wx:if 的区别 总结 前言 这篇文章是三分钟学会小程序的条件渲染教程,所谓的条件渲染就是判断是否需要把代码渲染到展示页面上.使用以下三种方式可以实现条件渲染,各自有不同的应用场景,只有熟练掌握其用法,在使用时才能得心应手. 1.wx:if实现条件渲染 在框架中,使用 wx:if="" 来判断是否需要渲染该代码块: <

随机推荐