浅谈微信小程序之官方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 相关文章推荐
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
详解封装基础的angular4的request请求方法
Jun 05 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
vue离开当前页面触发的函数代码
Sep 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
基于HTTP长连接的"服务器推"技术的php 简易聊天室
2009/10/31 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
python2.7和NLTK安装详细教程
2018/09/19 Python
python3.6实现学生信息管理系统
2019/02/21 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
C有"按引用传递"吗
2016/09/06 面试题
MIS软件工程师的面试题
2016/04/22 面试题
介绍一下Ruby的特点
2013/01/20 面试题
中专生毕业个人鉴定
2014/02/26 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
银行业务授权委托书
2014/10/10 职场文书
2014年技术员工作总结
2014/11/18 职场文书
房贷工资证明范本
2015/06/12 职场文书