WeUI框架 WeUI是一套小程序的UI框架,所谓UI框架就是一套界面设计方案,有了组件,我们可以用它来拼接出一个内容丰富的小程序,而有了UI框架,我们就可以让我们的小程序变得更加美观。...体验WeUi小程序 WeUI是微信官方设计团队的一套同微信原生视觉体验一致的基础样式库,在手机微信里搜索WeUI小程序即可。...下载源码就可以看到weui-wxss-master文件夹,导入项目,体验 为什么是weui-wxss-master下的dist⽂件夹,⽽不是weui-wxss-master?...下载了WeUI的源代码,其实WeUI的核⼼⽂件是weui.wxss。 如何在我们 的模板⼩程序⾥使⽤WeUI的样式呢?...├── pages ├── image ├── style │ ├── weui.wxss ├── app.js ├── app.json ├── app.wxss 把weui⼩程序dist
WeUI 项目简介 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一 包含button、cell、dialog、 progress...toast、article、actionsheet、icon等各式元素;在 github 开源至今,累计 17000+ 个 star 官方开源地址: https://github.com/Tencent/weui...https://github.com/Tencent/weui-wxss https://github.com/Tencent/weui.js 喜欢它别忘了去github上给它一个star!
jQuery WeUI 中使用的是官方 WeUI 的 CSS 代码,并提供了 jQuery/Zepto 版本的 API 实现。因为直接使用了官方的 CSS,所以你不用担心跟官方版本的冲突。...实际上 jQuery WeUI == WeUI + jQuery 插件。...下载+文档:http://lihongxun945.github.io/jquery-weui/ 简洁强大的API 如果你使用过 jQuery,那么你使用 jQuery WeUI 将没有任何障碍,所有的...="/jquery-weui/dist/css/jquery-weui.css"> 其中 weui.css 是官方的版本,并未做任何修改。
官方地址:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/cells.html 使用之前 扩展组件库基于小程序自定义组件构建...引入组件 可以通过npm方式下载构建,npm包名为weui-miniprogram 也可以通过页面按需下载 如何使用 假设组件的目录为weui-miniprogram,首先要在app.wxss里面引入weui.wxss.../weui-miniprogram/weui-wxss/dist/style/weui.wxss'; 然后可以在页面中引入 dialog 弹窗组件 首先在页面的 json 文件加入 usingComponents
uni-app是一个使用vue.js开发跨平台应用的前端框架。 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验。...Uni-app继承自vue.js,提供了完整的vue.js开发体验。 uni-app组件规范和扩展api与微信小程序基本相同。...有一定vue.js和微信小程序开发经验的开发者可快速上手uni-app,开发出兼容多端的应用。 uni-app提供了条件编译优化 pages.json: 配置页面路由,导航条,选项卡等页面类信息。...体验weui小程序 weui是微信官方设计团队设计的一套同微信原生视觉体验一致的基础样式库,在手机微信里搜索weui小程序或扫描,即可在手机里体验。...小任务:为什么是weui-wxss-master下的dist文件夹,而不是weui-wxss-master?
/zh-cn Github: https://github.com/ElemeFE/mint-ui/ 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库。...二.WeUI 官网地址:https://weui.io/ Github: https://github.com/weui/weui.git WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计...三.iView UI 官网地址:https://www.iviewui.com Github: https://github.com/TalkingData/iview-weapp 一套基于 Vue.js...的高质量UI 组件库,主要服务于 PC 界面的中后台产品,过去的两年里,iView 开源项目已经帮助成千上万的开发者快速完成网站开发,大幅度提高了开发效率,成为 Vue.js 生态里重要的一部分。
uni-app 【重点推荐】 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,到7个平台, Android版 iOS版 H5版 微信小程序版 支付宝小程序版 百度小程序版 头条小程序版...依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。...它与WeUI完全解耦。用户通过自定义WeUI的样式文件,可以方便地对VUWE实现定制化。...vue-mobile is an UI Framework build with Vue.js for SPA: vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用...vux并不完全依赖于WeUI,但是尽量保持整体UI样式接近WeUI的设计规范。 Flutter 是谷歌的移动UI框架 可以快速在iOS和Android上构建高质量的原生用户界面。
2:uni-app 基于 Vue.js 的跨平台框架 GitHub地址:https://github.com/dcloudio/uni-app 官网文档:https://uniapp.dcloud.io.../ Star: 27.5k uni-app dcloud公司开发的,基于vue.js的多平台框架,支持app,h5,小程序的一键生成。...3:WeUI 小程序–使用教程 官网文档:https://weui.io/ GitHub地址:https://github.com/Tencent/weui Star:25.2k WeUI 是一套同微信原生视觉体验一致的基础样式库...mpvue GitHub地址:https://github.com/Meituan-Dianping/mpvue 官网文档:http://mpvue.com/ Star:20.1k mpvue是一个使用 Vue.js...框架基于 Vue.js核心,mpvue修改了 Vue.js的 runtime和 compiler实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js开发体验。 ?
下面一起看一下这些具体的技术介绍以及学习传送门吧 1:渐进式 JavaScript 框架 Vue.js Vue.js年年稳坐前端最受欢迎的开源技术榜首,受到国内光大前端开发者的喜爱,想必大家对于它也已经了然于心啦...官方文档:https://cn.vuejs.org/ 2:基于 Vue.js 的跨平台框架 uni-app uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,通过编写 Vue.js 代码...官方文档:https://youzan.github.io/vant/#/zh-CN/intro 10:专为微信设计的 UI 库 WeUI WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的...官方文档:https://weui.io/ ?
有的,它就是WeUI。 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。...界面 下面我们重点讲解一下WeUI的使用方法: 小程序版weui下载地址:https://github.com/Tencent/weui-wxss 2.可以将整个文件下载下来,将其中的dist文件夹导入到独立的小程序中作为参考如下图...style目录结构 4.weui.wxss的引入方法 方法一.在app.wxss内或者需要的页面引入style/weui.wxss。.../**app.wxss---->引入button的wxss**/ @import 'style.widget.weui-button.weui-button.wxss'; 注意:这样引入前提是weui.wxss...引入位置 这样就可以简单的调用WeUI组件了。 ? 组件
1:WeUI 小程序–使用教程 https://weui.io/ 官方介绍:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一...美团小程序框架mpvue Github:https://github.com/Meituan-Dianping/mpvue 官网: http://mpvue.com/ 官方介绍:mpvue是一个使用 Vue.js...框架基于 Vue.js核心,mpvue修改了 Vue.js的 runtime和 compiler实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js开发体验。 ?
主要服务于 PC 界面的中后台业务,很优秀的组件库,可惜不适合移动端 https://github.com/iview/iview https://iviewui.com/ (3)vux 基于Vue和WeUI...的移动UI组件 (Star:9762) Vux是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。...github.com/airyland/vux https://vux.li/ (4)Mint-UI 饿了么移动端组件库 (Star:8062) 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js.../mint-ui (5)vue-admin 管理面板UI框架 (Star:6289) https://github.com/vue-bulma/vue-admin (6)vue-material为 Vue.js...4550) https://github.com/vuematerial/vue-material https://vuematerial.github.io/#/ (7)vue-strap基于 Vue.js
引入方式1 npm init生成package.json npm install --save weui-miniprogram 工具 → 构建npm 详情 → 本地配置 → ES6转ES5、上传代码时样式自动补全...、上传代码自动压缩、使用npm模块 在 app.wxss 里面引入 weui.wxss → @import 'weui-miniprogram/weui-wxss/dist/style/weui.wxss...'; 引入方式2 在app.json文件中 { "useExtendedLib": { "weui": true } } 当你使用mp-cell
概述 WeUI是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计,可以令用户的使用感知更加统一。...github地址:https://github.com/weui/weui 使用 方法一: 使用bower进行安装 bower install --save weui 方法二: 使用npm进行安装 npm...install --save weui 开发 git clone https://github.com/weui/weui.git cd weui npm install -g gulp npm install...http://weui.github.io/weui/ Button ? Cell ? Dialog ? ?...Gulp实战和原理解析(以weui作为项目实例)http://i5ting.github.io/stuq-gulp/
可以看到,整体风格完全和微信一致,做微信应用时可以考虑使用,节省了页面设计时间,又有很好的用户体验 官方提供的完整版示例: 网页URL weui.github.io/weui
h5: 1.WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。...https://weui.io/ 2.SUI Mobile 是阿里巴巴共享业务事业部SDC团队(UED)提供的一套手机UI库。...frozenui.github.io/frozenui/demo/ 4.mui 是以iOS平台UI为基础,补充部分Android平台特有的UI控件 http://www.dcloud.io/hellomui/ 5.WeUI...+ WeUI+是Zepto1.2和weui.js,weui0.44/1.1,以及上百个组件开发而成,兼容IOS和Android两大平台,仅适用于微信/手机网站开发,如有任何问题,请在github反馈,其他方式不做回答...toggle,push2refresh……),帮助您更方便的开发移动应用 http://vycool.com/Jingle/demo/index.html#index_section 后台: 1.一套基于 Vue.js
vonic 2. vux vux 基于WeUI和Vue(2.x)开发的移动端UI组件库。...基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式。小编在开发微信公众号的时候使用过,欢迎来评论区吐槽。...Cube-UI 滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库 中文文档 | github地址 | 在线预览 ?...Vue.js modal 易于使用,高度可定制,移动友好的Vue.js 2.0+ modal。 在线文档 | github地址 | 在线预览 ? Vue.js modal 14....Onsen UI 将Vue.js的强大功能和简单性带入混合和渐进式Web应用程序。 在线文档 | github地址 | ?
weui-react简介 weui是微信官方制作的一个基础样式UI库,打造与原生微信同样的视觉和交互体验,整个UI库包括网页版和小程序版,网页版包括传统的javascript版和react版本。...weui-react 官网:点击这里 背景介绍 计划做一个基于图书交换平台,大家可以通过平台发布自己的闲置书籍,如有人愿意通过自己的闲置书籍进行交换,即可达成交易。...为了便于开发,把精力更多的放在业务和后端,对前端的技术栈进行了选择,基于微信的项目,我选择这样的核心框架: 基础框架:react UI框架:weui-react 构建工具: webpack 路由工具:...升级到ES6 weui-react使用的前提是对react有一个基本认识,weui-react使用的是es6的语法,如果大家还在使用es5,依然是可以兼容的,但还是强烈建议大家还是切换到es6,这个是趋势...多看官方示例,文档基本没什么意义 weui的官方文档,相比开放平台的文档,还是有不少差距的,单是好在weui本身就是一个很简答的框架,使用起来也没有太大的问题,主要还是通过示例去了解使用方法,具体的文档说明
微信小程序 WePY 引入WeUI 什么是WeUI WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一 安装WeUI 我们在上一节中安装了...WePY ,那么在WePY中如何使用 WeUI 呢?...官方有一个 wepy-weui-demo 例子,我们可以直接使用 下载 git clone git@github.com:wepyjs/wepy-weui-demo.git or git clone https...://github.com/wepyjs/wepy-weui-demo.git 集成到 WePY 项目中 cp -r wepy-weui-demo/src/style/ my-project/src/style...> 页面次要操作 Normal <button class="<em>weui</em>-btn" type
效果 html css .weui-navbar a{text-decoration: none;color: #333;} .weui_tab_bd_item{display:none;height: 100%...('.weui-bar__item_on').removeClass('weui-bar__item_on'); //内容切换 $(".weui-tab...__panel .weui_tab_bd_item_active").removeClass('weui_tab_bd_item_active'); var data_toggle
领取专属 10元无门槛券
手把手带您无忧上云