浅谈微信小程序之官方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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
微信小程序如何使用云开发
May 17 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
jQuery实现简单全选框
Sep 13 jQuery
在Vue中使用mockjs代码实例
Nov 25 Vue.js
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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删除非空目录的函数代码小结
2013/02/28 PHP
如何用php获取文件名后缀
2013/06/09 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
python不带重复的全排列代码
2013/08/13 Python
Python中with及contextlib的用法详解
2017/06/08 Python
详解python中的文件与目录操作
2017/07/11 Python
Python KMeans聚类问题分析
2018/02/23 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
对Python信号处理模块signal详解
2019/01/09 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
青春寄语大全
2014/04/09 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
道歉的话语大全
2015/05/12 职场文书
交通事故案件代理词
2015/05/23 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript