浅谈微信小程序之官方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 相关文章推荐
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
js读取配置文件自写
Feb 11 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
Vue深入理解插槽slot的使用
Aug 05 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
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
Prototype Number对象 学习
2009/07/19 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
Python有序查找算法之二分法实例分析
2017/12/11 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
浅谈Python的list中的选取范围
2018/11/12 Python
python如何保证输入键入数字的方法
2019/08/23 Python
python suds访问webservice服务实现
2020/06/26 Python
介绍一下.net和Java的特点和区别
2012/09/26 面试题
自荐信的五个重要部分
2013/10/29 职场文书
大学本科毕业生的自我鉴定
2013/11/26 职场文书
寒假思想汇报
2014/01/10 职场文书
十八大闭幕感言
2014/01/22 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
营销与策划专业求职信
2014/06/20 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫
青岛市的收音机研制与生产
2022/04/07 无线电
优化Mysql查询的示例
2022/04/26 MySQL