浅谈微信小程序之官方UI框架we-ui使用教程


Posted in Javascript onAugust 20, 2018

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含buttoncelldialog、 progress、 toastarticleactionsheeticon等各式元素。

首先先看一下这套框架的GItHub地址

微信小程序UI框架we-ui

1.从git上clone到本地

太简单的东西我就不解释了,直接讲怎么用吧

这是解压后的目录

浅谈微信小程序之官方UI框架we-ui使用教程

2.新建一个项目

将 dist/style/目录下的weui.wxss 放到新项目的根目录下,如下图所示

浅谈微信小程序之官方UI框架we-ui使用教程

3.在app.wxss中引入weui.wxss文件

浅谈微信小程序之官方UI框架we-ui使用教程

至此,准备工作就完成了,已经可以使用官方的样式了

接下来看一下如何查看示例代码,我们将clone下来的示例代码导入到微信小程序开发工具中

导入的目录是src/example 

然后就可以看到示例代码了

浅谈微信小程序之官方UI框架we-ui使用教程

浅谈微信小程序之官方UI框架we-ui使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 常用函数
Dec 30 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
基于Vue实现图书管理功能
Oct 17 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
详解Vue router路由
Nov 20 Vue.js
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 #Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 #Javascript
获取layer.open弹出层的返回值方法
Aug 20 #Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 #Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 #Javascript
详解如何在Vue里建立长按指令
Aug 20 #Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 #Javascript
You might like
第一节--面向对象编程
2006/11/16 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
JS高级笔记
2011/07/13 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
python使用socket连接远程服务器的方法
2015/04/29 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
python顺序执行多个py文件的方法
2019/06/29 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
党员批评与自我批评
2014/02/12 职场文书
保证书范文大全
2014/04/28 职场文书
中标通知书
2015/04/17 职场文书
python实现图片批量压缩
2021/04/24 Python