浅谈微信小程序之官方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编程起步(第四课)
Feb 27 Javascript
JavaScript触发器详解
Mar 10 Javascript
Javascript 遍历对象中的子对象
Jul 03 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
javascript常用代码段搜集
Dec 04 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
PHP之变量、常量学习笔记
2008/03/27 PHP
php 禁止页面缓存输出
2009/01/07 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
php对数组排序的简单实例
2013/12/25 PHP
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
wxPython窗口中文乱码解决方法
2014/10/11 Python
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
破解安装Pycharm的方法
2018/10/19 Python
python微信撤回监测代码
2019/04/29 Python
keras 多gpu并行运行案例
2020/06/10 Python
python如何停止递归
2020/09/09 Python
python 装饰器重要在哪
2021/02/14 Python
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
公司年会演讲稿范文
2014/01/11 职场文书
工程资料员岗位职责
2014/03/10 职场文书
青春励志演讲稿
2014/04/29 职场文书
树转促学习心得体会
2014/09/10 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
小学体育组工作总结
2015/08/13 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技