浅谈微信小程序之官方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 高级语法介绍
Jun 15 Javascript
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 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.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
Python Paramiko模块的安装与使用详解
2016/11/18 Python
对pandas中to_dict的用法详解
2018/06/05 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
python之拟合的实现
2019/07/19 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
python用700行代码实现http客户端
2021/01/14 Python
极简的HTML5模版
2015/07/09 HTML / CSS
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
社区活动策划方案
2014/08/21 职场文书
公务员个人考察材料
2014/12/23 职场文书
放飞理想主题班会
2015/08/14 职场文书
《灰雀》教学反思
2016/02/19 职场文书
详解python的异常捕获
2022/03/03 Python
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电