微信网页开发样式库的使用
2017-05-23 18:14
399 查看
一、WeUI 是什么
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。在微信网页或小程序中使用 WeUI,有如下优势:1. 同微信客户端一致的视觉效果,令所有微信用户都能更容易地使用你的网站或小程序
2. 便捷获取快速使用,降低开发和设计成本
3. 微信设计团队精心打造,清晰明确,简洁大方
该样式库目前包含表单、基础组件、操作反馈、导航相关、搜索相关、层级规范等内容,已经在GitHub上开源(WeUI的GitHub地址)。访问WeUI预览地址或微信扫码即可预览。
二、WeUI 怎么玩
1、获取 WeUI
WeUI 是一套与微信原生 UI 一致的 UI 库,核心文件是 weui.css,只需要获取到该文件,然后在页面中引入,即可使用 WeUI 的组件。WeUI的获取方式有好几种,我这里主要介绍比较常用和方便的其中两种方式:方式一:引入官方 WeUI 链接
在页面中引入微信官网的weui.min.css地址即可。
微信官方核心文件 weui.css 的引用地址:
https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css
例如,在head标签中加入引用:
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
方式二:引入本地 WeUI 文件链接
在 WeUI 的 GitHub 上直接下载最新发布的版本。GitHub 提供了 zip 和 tar.gz 两种格式的包,选择其中一种下载,解压后引用 dist/style/weui.css 文件即可。
GitHub 最新版 WeUI 的下载地址是 :
https://github.com/weui/weui/releases
例如 : 在head标签中加入下载的weui.min.css的地址:
<link rel="stylesheet" href="dist/style/weui.min.css"/>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>WeUI</title> <!-- 方式一: 引入官方 WeUI 链接 --> <!-- <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/> --> <!-- 方式二: 引入本地 WeUI 文件链接 --> <link rel="stylesheet" href="dist/style/weui.min.css"/> </head> <body> </body> </html>
2、使用 WeUI
通过以上方式获取到 WeUI 后,在页面中引入后即可使用。例如使用 WeUI 按钮:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>WeUI</title> <!-- 引入官方 WeUI 链接 --> <!-- <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/> --> <!-- 引入本地 WeUI 文件链接 --> <link rel="stylesheet" href="dist/style/weui.min.css"/> </head> <body> <!-- 使用 WeUI 按钮 --> <div class="page__bd page__bd_spacing"> <a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作 Normal</a> <a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-loading"></i>页面主操作 Loading</a> <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">页面主操作 Disabled</a> <a href="javascript:;" class="weui-btn weui-btn_default">页面次要操作 Normal</a> <a href="javascript:;" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-loading"></i>页面次操作 Loading</a> <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">页面次要操作 Disabled</a> <a href="javascript:;" class="weui-btn weui-btn_warn">警告类操作 Normal</a> <a href="javascript:;" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-loading"></i>警告类操作 Loading</a> <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告类操作 Disabled</a> <a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_plain-default weui-btn_plain-disabled">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_plain-primary weui-btn_plain-disabled">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">按钮</a> </div> </body> </html>
相关文章推荐
- 微信公众帐号开发教程第8篇-文本消息中使用网页超链接
- 微信公众帐号开发教程第8篇-文本消息中使用网页超链接(8)
- [032] 微信公众帐号开发教程第8篇-文本消息中使用网页超链接
- 微信网页开发样式
- 微信网页第三方登录原理 微信开放平台和公众平台的区别 1.公众平台面向的时普通的用户,比如自媒体和媒体,企业官方微信公众账号运营人员使用,当然你所在的团队或者公司有实力去开发一些内容,也可以调用公众
- 微信公众帐号开发教程第8篇-文本消息中使用网页超链接
- 微信公众帐号开发教程第8篇-文本消息中使用网页超链接
- 微信公众帐号开发教程第8篇-文本消息中使用网页超链接
- [008]微信公众帐号开发教程第8篇-文本消息中使用网页超链接
- 微信接口开发之高级篇系列【网页授权详细说明【提供测试账号使用】】
- 微信公众帐号开发教程第8篇-文本消息中使用网页超链接
- 微信公众帐号开发教程第8篇-文本消息中使用网页超链接
- [032] 微信公众帐号开发教程第8篇-文本消息中使用网页超链接
- 夺命雷公狗---微信开发19----使用网页调试工具调试该接口进行文件的上传与下载
- 微信公众帐号开发教程第8篇-文本消息中使用网页超链接
- [032] 微信公众帐号开发教程第8篇-文本消息中使用网页超链接
- [032] 微信公众帐号开发教程第8篇-文本消息中使用网页超链接(转)
- 微信公众帐号开发教程第8篇-文本消息中使用网页超链接
- 微信公众帐号开发教程第7篇-文本消息中使用网页超链接