浅谈微信小程序之官方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 相关文章推荐
JQuery动画和停止动画实例代码
Mar 01 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
JavaScript中document.activeELement焦点元素介绍
Nov 27 Javascript
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
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
javascript确认框的三种使用方法
2013/12/17 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
vue实现弹幕功能
2019/10/25 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
python实现拓扑排序的基本教程
2018/03/11 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
Python 如何批量更新已安装的库
2020/05/26 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
数控技术应用个人求职信范文
2014/02/03 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
2014年少先队工作总结
2014/12/03 职场文书
开学典礼观后感
2015/06/15 职场文书
聘任书范文大全
2015/09/21 职场文书
2016年母亲节寄语
2015/12/04 职场文书
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python