微信小程序常见的几种UI组件库
微信小程序UI组件库
在讲组件库之前呢,先带一个属性,用要就是用于复用组件之间相同的方法
Behavior:
- 相当于vue的mixins React中类似于HOC
// my-behavior.js
module.exports = Behavior({behaviors: [],properties: {myBehaviorProperty: {type: String}},data: {myBehaviorData: {}},attached: function(){},methods: {myBehaviorMethod: function(){}}
})
推荐大家在写相同的方法的时候可以用这个属性来封装组件!
接下来就进入今天正式介绍的内容,UI组件库
在微信小程序开发的过程中,自己不借助UI组件库开发出来的页面,不但要花费更多的时间,页面的美观度上也有一定差距。
所以在这里我给大家推荐几个好看,常用的几个UI组件库(这也是我在百度上搜到的,感觉还不错,就总结过来了)
WeUI
WeUI 是微信官方出品的组件库,它沿用了微信的视觉设计与交互设计,提供了各类原生组件的基础样式,风格简约大方。选用这一套组件库,可以让你的小程序与微信本身保持一致的界面风格。
官方组件库能够满足基础的界面需求,但是,如果你想要更加饱满的视觉,更加活泼的动效,恐怕 WeUI 就满足不了你的需要了。
GitHub 地址:https://github.com/Tencent/weui
ColorUI 组件库
ColorUI 是由文晓港发布的高颜值组件库,侧重于视觉交互。比起 WeUI 的低调克制,ColorUI 色彩鲜亮,样式繁多。除了拥有非常丰富的原生组件的自定义样式,它还提供一些常见的页面元素,比如时间轴、步骤条、聊天页、模态窗口等等。
ColorUI 给大家提供了高度自定义的组件,一些比较麻烦的样式,开发者只需调用其组件就能得以实现。不过,ColorUI 也不是万能的,比如,它尚未涉及购物类小程序所需的组件。
GitHub 地址:https://github.com/weilanwl/ColorUI
Vant 组件库演示
Vant 是由有赞发布的,轻量的小程序 UI 组件库。如果你想制作一款电商、餐饮、外卖平台、票务预订等购物类小程序,选用 Vant 是较为合适的。为什么这么说呢?
首先,我们来看「业务组件」这一块。可以看到,「商品卡片」与「提交订单栏」两个组件可以构成一个基本的「购物车」页面;而「商品卡片」与「商品导航」二者又可以组成一个简单的商店页面。
对开发者非常友好,文档可以说是事无巨细了,而且在文档右侧,还可以预览样式哦。
开发文档:https://youzan.github.io/vant-weapp/#/intro
GitHub 地址:https://github.com/youzan/vant-weapp
iViewUI
iViewUI 是由 TalkingData 发布的组件库。作为一款好用的组件库,布局、面板、列表、表单、顶部导航栏、底部导航栏等组件当然必不可少,那么 iViewUI 除了具备这些标配的组件,还有哪些亮点呢?
iViewUI 同样有详细的文档,但是不支持网页预览,只能打开小程序预览。
开发文档:https://weapp.iviewui.com/docs/guide/start
GitHub 地址:https://github.com/TalkingData/iview-weapp
引入组件的方法
- 小程序如何引入第三方ui框架(通常也是基于npm)第一步:初始化package.json npm init -y第二步:安装需要的小程序ui框架或第三方包 npm install weui-miniprogram第三步:配置小程序支持npm打开开发者工具--详情--本地设置--勾选【使用npm模块】 打开开发者工具--工具--构造npm第四步:在app.wxss中引入第三方的ui框架样式 第五步:在要引入的页面中添加相关组件并在页面上直接使用 xxx.json中引入第三方组件路径!
上面呢就是写了一些引入组件的方法,具体的方法,还是要参照每个组件的文档,来实现引入!
举个例子吧:
- //vant ui使用vant ui(基于微信小程序)https://youzan.github.io/vant-weapp/#/intro第一步:初始化package.json npm init -y第二步:安装需要的小程序ui框架或第三方包 npm i @vant/weapp -S --production第三步:配置小程序支持npm打开开发者工具--详情--本地设置--勾选【使用npm模块】 打开开发者工具--工具--构造npm第四步:在要引入的页面中添加相关组件并在页面上直接使用 xxx.json中引入第三方组件路径注:具体使用方法包括相关属性事件参考api
好了,今天的分享就到这里了,对我是一种总结,也希望能帮助到大家!
微信小程序常见的几种UI组件库相关推荐
- 推荐微信小程序常用的几个UI组件库
在微信小程序开发的过程中,自己不借助UI组件库开发出来的页面,不但要花费更多的时间,页面的美观度上也有一定差距. 所以在这里我给大家推荐几个好看,常用的几个UI组件库. WeUI WeUI 是微信官方 ...
- api 微信小程序组件库colorui_微信小程序常用的几个UI组件库
1.WeUI WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog. progre ...
- 微信小程序的经验总结,UI组件、图表、自定义bar你学会了吗
目录 写在前面 1 如何使用自定义tabbar及权限控制 拷贝官方demo中的custom-tab-bar文件到根目录 入口文件app.json启用自定义tabbar 回到自定义custom-tab- ...
- 官方问答--微信小程序常见FAQ (17.8.21-17.8.27)
给提问的开发者的建议: 提问之前先查询 文档.通过社区右上角搜索搜索已经存在的问题. 写一个简明扼要的标题,并且正文描述清楚你的问题. 提交 BUG:需要带上基础库版本号,设备信息(iOS, Andr ...
- 微信小程序常见FAQ (17.8.21-17.8.27)
Q:1.5版本基础库的小程序出现了image bindload事件响应两次的问题. A:你好,感谢反馈,我们会尽快进行修复,敬请关注. Q:地图里marker的callout在android机型上变成 ...
- 微信小程序常见知识点
1.对微信小程序的理解 小程序是一种新的开放能力,开发者可以快速的开发一个小程序,小程序可以在微信内被便捷的获取和传播,同时具有出色的使用体验,而且简单易于学习 微信小程序的优势: 1.微信助理,容易 ...
- 微信小程序:简单舒服新UI装逼制作神器
这是一款装逼神器小程序源码 内包含了N种模板制作,另外并有大分类 另外小编还给添加了几个流量主广告,包含了每一个页面都覆盖了 而且流量主还不是单一种: Banner 激励视频 视频广告 多格子广告 横 ...
- 微信小程序:大红喜庆版UI猜灯谜又叫猜字谜
大家好给大家带来一款UI比较喜庆的猜灯谜小程序 大家看演示图的时候当然也是可以看得到那界面是多么的喜庆 而且新的一年也很快就来了,所以种种的界面可能都比较往喜庆方面去变吧 这款小程序搭建是免服务器和域 ...
- 微信小程序开发的四种文件
最近在弄一个微信小程序,将看到的内容记录一下: 微信小程序中就四种类型的文件: js ---------- JavaScrip文件 json -------- 项目配置文件,负责窗口颜色等等 wxml ...
- 微信小程序开发的三种模式
摘要:截止到2018年6月底,正式上线发布的微信小程序已超过100万个.而越来越多的公司也已经在做微信小程序开发,许多人会觉得"微信小程序开发是开发者们的专利".答案是否定的,今天 ...
最新文章
- %00截断攻击的探索
- 手动写个类似的Spring MVC框架试试
- 2019/4/4 动态规划
- js只能输入数字[价格等]
- html5 head 标签
- typename的双重语义
- JQuery树插件——ztree
- Spark内存空间分配机制
- 反转字符串的多种方式-经典面试题系列
- ASP.NET 参数传递,长度限制,及使用注意事项。
- PSP3000/2000V3用5.03GEN-C安装教程
- python spss_SPSS python教程:[5]SpssClient简介
- 关于C++ 存储类型auto、register、static、extern、mutable
- C语言this is a string,求一道C语言题目The aim of this exercise is to write a C program tha
- 计算机视觉不规则roi原理,C++ 中利用 Opencv 得到不规则的ROI 区域(已知不规则区域)...
- 如何快速将jpg格式文件转换成bmp格式
- vue-chartjs
- AXI协议详解(9)-数据总线
- 第一部分 思科九年 一(9)
- 中国联通 光猫 G-140W-UG 获取 管理员 密码