浅谈微信小程序之官方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 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
js中的this关键字详解
Sep 25 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
动态加载js、css的实例代码
May 26 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
浅谈Webpack打包优化技巧
Jun 12 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
vue实现计步器功能
Nov 01 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
php 启动报错如何解决
2014/01/17 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
泛谈JS逻辑判断选择器 || &&
2019/05/24 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
Python文件的读写和异常代码示例
2017/10/31 Python
python实现TF-IDF算法解析
2018/01/02 Python
python实现图片彩色转化为素描
2019/01/15 Python
python tkinter canvas使用实例
2019/11/04 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
海量信息软件测试笔试题
2015/08/08 面试题
趣味运动会新闻稿
2015/07/17 职场文书
社区服务活动感想
2015/08/11 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript
总结Python连接CS2000的详细步骤
2021/06/23 Python
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
python ConfigParser库的使用及遇到的坑
2022/02/12 Python