编程 Javascript

浅谈微信小程序之官方UI框架we-ui使用教程

Posted in Javascript onAugust 20, 2018

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

首先先看一下这套框架的GItHub地址

微信小程序UI框架we-ui

1.从git上clone到本地

太简单的东西我就不解释了,直接讲怎么用吧

这是解压后的目录

浅谈微信小程序之官方UI框架we-ui使用教程

2.新建一个项目

将 dist/style/目录下的weui.wxss 放到新项目的根目录下,如下图所示

3.在app.wxss中引入weui.wxss文件

至此,准备工作就完成了,已经可以使用官方的样式了

接下来看一下如何查看示例代码,我们将clone下来的示例代码导入到微信小程序开发工具中

导入的目录是src/example

然后就可以看到示例代码了

浅谈微信小程序之官方UI框架we-ui使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

浅谈微信小程序之官方UI框架we-ui使用教程

- Author -

李俊标

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

入门基础学习 ExtJS笔记（一）

Nov 11 Javascript

Extjs4 类的定义和扩展实例

Jun 28 Javascript

javascript读写json示例

Apr 11 Javascript

Node.js中对通用模块的封装方法

Jun 06 Javascript

jQuery左侧大图右侧小图焦点图幻灯切换代码分享

Aug 19 Javascript

jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果

Aug 15 Javascript

Three.js实现绘制字体模型示例代码

Sep 26 Javascript

vue中使用input[type="file"]实现文件上传功能

Sep 10 Javascript

node.js实现为PDF添加水印的示例代码

Dec 05 Javascript

微信小程序身份证验证方法实现详解

Jun 28 Javascript

js验证账户名是否重复

May 26 Javascript

Javascript柯里化实现原理及作用解析

Oct 22 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

Zerg剧情介绍

2020/03/14 星际争霸

世界上第一台立体声收音机

2021/03/01 无线电

php中文本操作的类

2007/03/17 PHP

Linux环境下php实现给网站截图的方法

2016/05/03 PHP

PHP生成word文档的三种实现方式

2016/11/14 PHP

php注册系统和使用Xajax即时验证用户名是否被占用

2017/08/31 PHP

Laravel6.2中用于用户登录的新密码确认流程详解

2019/10/16 PHP

Aster vs KG BO3 第一场2.18

2021/03/10 DOTA

区分JS中的undefined,null,"",0和false

2007/03/08 Javascript

javascript实现日历控件(年月日关闭按钮)

2012/12/12 Javascript

jQuery 插件仿百度搜索框智能提示(带Value值)

2013/01/22 Javascript

基于jquery实现控制经纬度显示地图与卫星

2013/05/20 Javascript

js如何获取object类型里的键值

2014/02/18 Javascript

jQuery的live()方法对hover事件的处理示例

2014/02/27 Javascript

基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)

2015/11/24 Javascript

jQuery图片加载显示loading效果

2016/11/04 Javascript

Vue 中使用 CSS Modules优雅方法

2018/04/09 Javascript

Vue利用History记录上一页面的数据方法实例

2018/11/02 Javascript

vue模式history下在iis中配置流程

2019/04/17 Javascript

JavaScript定时器使用方法详解

2020/03/26 Javascript

python使用socket远程连接错误处理方法

2015/04/29 Python

python实现判断一个字符串是否是合法IP地址的示例

2018/06/04 Python

Django数据库连接丢失问题的解决方法

2018/12/29 Python

python Pexpect 实现输密码 scp 拷贝的方法

2019/01/03 Python

linux下安装python3和对应的pip环境教程详解

2019/07/01 Python

如何通过python的fabric包完成代码上传部署

2019/07/29 Python

Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子

2019/12/04 Python

Python代码中如何读取键盘录入的值

2020/05/27 Python

对python pandas中 inplace 参数的理解

2020/06/27 Python

用 python 进行微信好友信息分析

2020/11/28 Python

AmazeUI图片轮播效果的示例代码

2020/08/20 HTML / CSS

Tommy Hilfiger澳洲官网：美国高端休闲领导品牌

2020/12/16 全球购物

新员工入职感想

2015/08/07 职场文书

六年级语文教学反思

2016/03/03 职场文书

Python爬虫之爬取某文库文档数据

2021/04/21 Python

Django中的JWT身份验证的实现

2021/05/07 Python