编程 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文件的代码

Jul 18 Javascript

用JavaScript仿PS里的羽化效果代码

Dec 20 Javascript

实例讲解JS中数组Array的操作方法

May 09 Javascript

jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例

Aug 22 Javascript

jquery实现鼠标悬浮停止轮播特效

Aug 20 Javascript

jQuery+CSS实现一个侧滑导航菜单代码

May 09 Javascript

Bootstrap实现水平排列的表单

Jul 04 Javascript

Actionscript与javascript交互实例程序(修改)

Sep 22 Javascript

js实现多行文本框统计剩余字数功能

Mar 28 Javascript

解析vue data不可以使用箭头函数问题

Jul 03 Javascript

vue cli3.0结合echarts3.0与地图的使用方法示例

Mar 26 Javascript

JavaScript 截取字符串代码实例

Sep 05 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

PHP集成FCK的函数代码

2008/09/27 PHP

php中存储用户ID和密码到mysql数据库的方法

2013/02/06 PHP

ThinkPHP中处理表单中的注意事项

2014/11/22 PHP

php中使用GD库做验证码

2016/03/31 PHP

PHP微信支付实例解析

2016/07/22 PHP

PHP实现向关联数组指定的Key之前插入元素的方法

2017/06/06 PHP

Laravel Eloquent ORM 多条件查询的例子

2019/10/10 PHP

javascript 字符 Escape,encodeURI,encodeURIComponent

2009/07/09 Javascript

window.onload 加载完毕的问题及解决方案（下）

2009/07/09 Javascript

jQuery 定时局部刷新(setInterval)

2010/11/19 Javascript

jquery操作复选框(checkbox)的12个小技巧总结

2014/02/04 Javascript

jQuery的$.proxy()应用示例介绍

2014/04/03 Javascript

jquery用data方法获取某个元素上的事件

2014/06/23 Javascript

微信企业号开发之微信考勤Cookies的使用

2015/09/11 Javascript

JS+CSS实现分类动态选择及移动功能效果代码

2015/10/19 Javascript

js获取本机操作系统类型的两种方法

2015/12/19 Javascript

vue.js中父组件调用子组件的内部方法示例

2017/10/22 Javascript

JS解析后台返回的JSON格式数据实例

2018/08/06 Javascript

浅谈webpack SplitChunksPlugin实用指南

2018/09/17 Javascript

vue实现同一个页面可以有多个router-view的方法

2018/09/20 Javascript

vue 框架下自定义滚动条(easyscroll)实现方法

2019/08/29 Javascript

a标签调用js的方法总结

2019/09/05 Javascript

JS替换字符串中指定位置的字符(多种方法)

2020/05/28 Javascript

python 专题九 Mysql数据库编程基础知识

2017/03/16 Python

python实现五子棋游戏

2019/06/18 Python

python实现控制COM口的示例

2019/07/03 Python

keras自定义回调函数查看训练的loss和accuracy方式

2020/05/23 Python

python如何用matplotlib创建三维图表

2021/01/26 Python

利用CSS3的checked伪类实现OL的隐藏显示的方法

2010/12/18 HTML / CSS

2014升学宴答谢词

2014/01/26 职场文书

大二法英学生职业生涯规划范文

2014/02/27 职场文书

父母对孩子说的话

2014/04/12 职场文书

小学生运动会报道稿

2014/09/12 职场文书

学校机关党总支领导班子整改工作方案

2014/10/26 职场文书

四风专项整治工作情况汇报

2014/10/28 职场文书

python小程序之飘落的银杏

2021/04/17 Python