浅谈微信小程序之官方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 图像裁剪插件Jcrop的简单使用
May 22 Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
js获取checkbox值的方法
Jan 28 Javascript
javascript日期计算实例分析
Jun 29 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
js利用iframe实现选项卡效果
Aug 09 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
Apache服务器无法使用的解决方法
2013/05/08 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
php时区转换转换函数
2014/01/07 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
密码强度检测效果实现原理与代码
2013/01/04 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
Bootstrap精简教程
2015/11/27 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
React中的refs的使用教程
2018/02/13 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
python实现问号表达式(?)的方法
2013/11/27 Python
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
详解python 爬取12306验证码
2019/05/10 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
基于python 凸包问题的解决
2020/04/16 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
python判断是空的实例分享
2020/07/06 Python
Python如何急速下载第三方库详解
2020/11/02 Python
大学生旷课检讨书1000字
2015/02/19 职场文书
《司马光》教学反思
2016/02/22 职场文书
oracle数据库去除重复数据
2022/05/20 Oracle
Linux磁盘管理方法介绍
2022/06/01 Servers