专栏首页ytkahWeUI教程/第三方扩展及其他UI框架对比

WeUI教程/第三方扩展及其他UI框架对比

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。WeUI 为微信 Web 服务量身设计的h5框架。严格的讲它是一个css库。算一个精简的库,它是使用less编写,最终编译成css,压缩成weui.min.css

WeUI使用方法

WeUI 是一套与微信原生 UI 一致的 UI 库,核心文件是 weui.css,只需要获取到该文件,然后在页面中引入,即可使用 WeUI 的组件。 微信官方、BootCDN 和 cdnjs 为 WeUI 提供了 CDN 链接,推荐使用,链接如下:

v2.1.3 https://res.wx.qq.com/open/libs/weui/2.1.3/weui.css

https://res.wx.qq.com/open/libs/weui/2.1.3/weui.min.css

v1.1.3 https://res.wx.qq.com/open/libs/weui/1.1.3/weui.css

https://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css

v0.4.3 https://res.wx.qq.com/open/libs/weui/0.4.3/weui.css

https://res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css

其他资源

来源 地址 微信官方 //res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css 微信官方 //res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css BootCDN //cdn.bootcss.com/weui/0.4.3/style/weui.css cdnjs //cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.css (注:cdnjs服务器在国外)

WeUI演示列表及代码

WeUI第三方扩展

weui的优点

它很好的解决推入和返回的问题 它有微信一样的ui界面 它还提供了基本的ui组件(弹出框,actionsheet等)

weui的缺点

页面内容过长的时候,滑动不流畅,但可以通过iscroll修正

WeUI与VUX

VUX(读音 [v’ju:z],同 views)是基于WeUIVue(2.x)开发的移动端UI组件库,主要服务于微信页面。基于webpack + vue-loader + vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式。但VUX并不完全依赖于WeUIVUXWeUI 的基础上扩展了多个常用组件,但是尽量保持整体UI样式接近WeUI的设计规范。

WeUI与Zepto

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。中文文档https://www.html.cn/doc/zeptojs_api/

WeUI+是Zepto1.2和WeUI 2.0为基础,收集整理了上百个组件开发而成,兼容IOS和Android平台,主要用于微信/手机网站开发.演示地址https://weui.shanliwawa.top/

LayUI与WeUI

layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。Layui比一般UI框架更加方便,不光为我们提供好静态页面,连数据交互这块也帮前端写好了。LayUI官网还提供一些其用户基于LayUI写好的开源的完整系统,比如一个具有所有功能的管理后台,让一些没有设计师或者快速开发的公司,直接拿来修改使用。项目地址https://www.layui.com/

WeUI 为微信 Web 服务量身设计的h5框架。严格的讲它是一个css库。

MUI与WeUI

MUI是一个轻量级的CSS框架,遵循Google的Material Design设计方针。MUI凭着其极小的体积,帮助网页尽可能快地加载,mui.min.css只有6.6KB (gzipped),mui.min.js只有5.4KB (gzipped)。项目地址https://www.muicss.com/

WeUI只用css文件没有JS文件,但已经有第三方已经集成了,例如jQuery WeUI,WeUI+,他们都加入了幻灯片切换等js特效

jQuery WeUI

jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间。jQuery WeUI 提供了总共30+ 个非常实用的组件:列表,表单,卡片,对话框,下拉刷新等。项目地址http://jqweui.com/

iView与WeUI

iView Weapp是一套高质量的微信小程序 UI 组件库。项目地址https://weapp.iviewui.com/

WeUI是微信官方设计团队为微信内网页和微信小程序量身设计

SUI与WeUI

SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美,只需要引入CDN文件就可以使用,方便迅速搭建手机H5应用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。是阿里巴巴共享业务事业部UED团队开发的。项目地址http://m.sui.taobao.org/

WeUI是由微信官方设计团队为微信内网页和微信小程序量身设计

WePY与WeUI

WePY (发音: /'wepi/) 项目启动于 2017 年 11 月份, 是小程序最早的框架之一,是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions的引入都是为了能让开发小程序项目变得更加简单,高效。项目地址https://wepyjs.github.io/wepy-docs/。WePY资源汇总:awesome-wepy

WePY可以将WeUI引入到小程序中

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Baozi Training Leetcode solution 257: Binary Tree Paths

    Blogger:https://blog.baozitraining.org/2019/08/leetcode-solution-257-binary-tree...

    包子面试培训
  • 用网卡计算,Mellanox这是要谋反吗?

    按照这个思路, Mellanox在9月3日对外发布了ConnectX-6 Dx、BlueField-2两款芯片,对外称:新一代云Smart NIC和I/O 处理...

    用户5498443
  • xBIM 基础01 简介

      BIM(Building Information Modelling)建筑信息模型,xBIM(eXtensible Building Information...

    张传宁老师
  • 干货 | Elasticsearch7.X Scripting脚本使用详解

    除了官方文档,其他能找到的介绍Elasticsearch脚本(Scripting)的资料少之又少。

    用户1390885
  • PyTorch  深度学习新手入门指南

    原标题 | Starter Pack for Deep Learning Projects in PyTorch — for Extreme Beginners...

    昱良
  • 四分之一数据泄露背后是人为原因

    根据Ponemon研究机构的最新调查数据,去年所发生的四分之一的数据泄露事件都是人为原因所导致的,而且同期的全部数据泄露事件所带来的平均经济损失约为392万美元...

    FB客服
  • 【FETAL】Python 2 自生自灭倒计时,官方不再维护更新

    官方宣布,新一年的钟声响起之时(2020年1月1日),就是Python 2落幕之日。

    昱良
  • 安装包制作工具 SetupFactory使用2 API清单

    张传宁老师
  • Java 实现 QQ 登陆

    个人网站最近增加了评论功能,为了方便用户不用注册就可以评论,对接了 QQ 和微博这 2 大常用软件的一键登录,总的来说其实都挺简单的,可能会有一点小坑,但不算多...

    Rookie
  • 清华学霸直博简历火了!CPU、操作系统、编译器全自主写,刘知远点赞

    最近,一个来自福州的男生突然火了,原因是知乎上一个热帖《清华大学计算机专业本科的这位同学是什么水平?》:

    昱良

扫码关注云+社区

领取腾讯云代金券