编程 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 相关文章推荐

关于js获取radio和select的属性并控制的代码

May 12 Javascript

让新消息在网页标题闪烁提示的jQuery代码

Nov 04 Javascript

jquery动态加载select下拉框示例代码

Dec 10 Javascript

javascript下拉列表中显示树形菜单的实现方法

Nov 17 Javascript

angularjs在ng-repeat中使用ng-model遇到的问题

Jan 21 Javascript

JS获取多维数组中相同键的值实现方法示例

Jan 06 Javascript

理解javascript中的闭包

Jan 11 Javascript

详解在Angularjs中ui-sref和$state.go如何传递参数

Apr 24 Javascript

JavaScript 保护变量不被随意修改的实现代码

Sep 27 Javascript

React学习笔记之高阶组件应用

Jun 02 Javascript

详解用场景去理解函数柯里化(入门篇)

Apr 11 Javascript

javascript实现京东快递单号的查询效果

Nov 30 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

Laravel 5框架学习之子视图和表单复用

2015/04/09 PHP

Yii2实现同时搜索多个字段的方法

2016/08/10 PHP

PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例

2018/05/23 PHP

JavaScript的单例模式（singleton in Javascript)

2010/06/11 Javascript

基于jQuery的实现简单的分页控件

2010/10/10 Javascript

js图片实时加载提供网页打开速度

2014/09/11 Javascript

jQuery实现文本框邮箱输入自动补全效果

2015/11/17 Javascript

js+flash实现的5图变换效果广告代码(附演示与demo源码下载)

2016/04/01 Javascript

全面了解addEventListener和on的区别

2016/07/14 Javascript

JQuery之proxy实现绑定代理方法

2016/08/01 Javascript

轻松掌握JavaScript策略模式

2016/08/25 Javascript

JS实现倒计时(天数、时、分、秒)

2016/11/16 Javascript

自带气泡提示的vue校验插件（vue-verify-pop）

2017/04/07 Javascript

关于meta viewport中target-densitydpi属性详解（推荐）

2017/08/18 Javascript

Vue中render函数的使用方法

2018/01/31 Javascript

使用Vue中 v-for循环列表控制按钮隐藏显示功能

2019/04/23 Javascript

vue多页面项目中路由使用history模式的方法

2019/09/23 Javascript

[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来

2018/08/17 DOTA

[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19

2018/08/21 DOTA

[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25

2020/11/25 DOTA

Python编程中的反模式实例分析

2014/12/08 Python

Python简单实现控制电脑的方法

2018/01/22 Python

浅谈python新式类和旧式类区别

2019/04/26 Python

TensorFlow 读取CSV数据的实例

2020/02/05 Python

python中字典增加和删除使用方法

2020/09/30 Python

Python3爬虫ChromeDriver的安装实例

2021/02/06 Python

会走动的图形html5时钟示例

2014/04/27 HTML / CSS

【HTML5】3D模型--百行代码实现旋转立体魔方实例

2016/12/16 HTML / CSS

单位领导证婚词

2014/01/14 职场文书

国贸专业自荐信范文

2014/03/02 职场文书

2015年企业新年寄语

2014/12/08 职场文书

总经理岗位职责范本

2015/04/01 职场文书

SQL Server中交叉联接的用法详解

2021/04/22 SQL Server

vue ref如何获取子组件属性值

2022/03/31 Vue.js

Python OpenCV超详细讲解读取图像视频和网络摄像头

2022/04/02 Python

微信小程序APP的事件绑定以及传递参数时的冒泡和捕获

2022/04/19 Javascript