编程 Javascript

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

Posted in Javascript onAugust 20, 2018

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

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

微信小程序UI框架we-ui

1.从git上clone到本地

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

这是解压后的目录

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

2.新建一个项目

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

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

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

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

导入的目录是src/example

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

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

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

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

- Author -

李俊标

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

大家未必知道的Js技巧收藏

Apr 07 Javascript

利用js获取服务器时间的两个简单方法

Jan 08 Javascript

javascript中的document.open()方法使用介绍

Oct 09 Javascript

JavaScript中this详解

Sep 01 Javascript

js点击返回跳转到指定页面实现过程

Aug 20 Javascript

js ajaxfileupload.js上传报错的解决方法

May 05 Javascript

jQuery链式调用与show知识浅析

May 11 Javascript

微信小程序 video组件详解

Oct 25 Javascript

Vue下的国际化处理方法

Dec 18 Javascript

浅谈React Event实现原理

Sep 20 Javascript

浅谈vue限制文本框输入数字的正确姿势

Sep 02 Javascript

js中实现继承的五种方法

Jan 25 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

PHP自动生成月历代码

2006/10/09 PHP

ThinkPHP视图查询详解

2014/06/30 PHP

php cli配置文件问题分析

2015/10/15 PHP

CI框架（ajax分页，全选，反选，不选，批量删除）完整代码详解

2016/11/01 PHP

PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法

2019/04/16 PHP

对JavaScript的eval()中使用函数的进一步讨论

2008/07/26 Javascript

IE JS无提示关闭窗口不提示的方法

2010/04/29 Javascript

js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装

2010/05/15 Javascript

基于JQuery的访问WebService的代码（可访问Java[Xfire]）

2010/11/19 Javascript

Javascript将数值转换为金额格式（分隔千分位和自动增加小数点）

2016/06/22 Javascript

详解axios在node.js中的post使用

2017/04/27 Javascript

在vue-cli项目中使用bootstrap的方法示例

2018/04/21 Javascript

mpvue构建小程序的方法(步骤+地址)

2018/05/22 Javascript

详解如何用typescript开发koa2的二三事

2018/11/13 Javascript

JavaScript实现模态对话框实例

2020/01/13 Javascript

vue深度监听(监听对象和数组的改变)与立即执行监听实例

2020/09/04 Javascript

js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)

2020/12/24 Javascript

[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17

2018/08/20 DOTA

解决uWSGI的编码问题详解

2017/03/24 Python

Python通过matplotlib绘制动画简单实例

2017/12/13 Python

python使用筛选法计算小于给定数字的所有素数

2018/03/19 Python

python使用flask与js进行前后台交互的例子

2019/07/19 Python

Python SELENIUM上传文件或图片实现过程

2019/10/28 Python

Python GUI库PyQt5样式QSS子控件介绍

2020/02/25 Python

Python实现一个简单的递归下降分析器

2020/08/01 Python

Python lxml库的简单介绍及基本使用讲解

2020/12/22 Python

HTML5边玩边学（1）画布实现方法

2010/09/21 HTML / CSS

Shopee菲律宾：在线购买和出售

2019/11/25 全球购物

初中校园之声广播稿

2014/01/15 职场文书

房地产经营管理专业自荐信

2014/09/02 职场文书

工作表现证明

2015/06/15 职场文书

在校学生证明格式

2015/06/24 职场文书

暑期家教宣传单

2015/07/14 职场文书

2016年小学生新年寄语

2015/08/18 职场文书

一行代码python实现文件共享服务器

2021/04/22 Python

MySQL安装后默认自带数据库的作用详解

2021/04/27 MySQL