WeUI源码学习笔记一
WeUI
- 前言
- 一、WeUI是什么？
- 二、WeUI要遵守什么准则——BEM
- 三、编写WeUI在浏览器和微信开发者工具的不同之处
一、WeUI是什么？
WeUI 是微信官方设计团队为微信 Web 开发量身打造的一个 UI 样式库，你可以把它理解为一个前端框架，类似于 Bootstrap 的那种。 由于是微信官方出品，所以对微信的兼容性基本没有太大问题，而且各组件的样式和微信一样，能够和微信很好的融合在一起，给用户较好的体验。
二、WeUI命名要遵守什么准则——BEM
CSS 的命名规范又叫做BEM规范，为的是结束混乱的命名方式，达到一个语义化的CSS命名方式。现在在业界的顶级大厂十分的流行，作为定义一个前端人员的专业程度的一个部分。
BEM是三个单词的缩写：Block（块）代表更高级别的抽象或组件，Element（元素） Block的后代，以及Modifier（修饰） 不同状态的修饰符。
注：这里就是一些命名的规范示例
<div class="page"><div class="page__hd"><h1 class="page__title">Button</h1><p class="page__desc">按钮</p></div><div class="page__bd"><a href="#" class="weui-btn weui-btn_primary" >页面主操作</a><a href="#" class="weui-btn weui-btn_default">页面次要操作</a><a href="#" class="weui-btn weui-btn_primary weui-btn_disable">禁用按钮</a><a href="#" class="weui-btn weui-btn weui-btn_loading"><span class="weui-primary-loading weui-primary-loading_transparent"><i class="weui-primary-loading_dot"></i></span>加载中按钮</a></div></div>三、编写WeUI在浏览器和微信开发者工具的不同之处
在对按钮进行高亮的显示的时候在浏览器端使用一下代码是可以高亮显示的（要使用浏览器的切换设备仿真按钮查看），但是在使用微信开发者工具的时候，由于微信开发者工具不支持对透明度的显示
-webkit-tap-highlight-color: rgba(0,0,0,0.5);我就直接使用了在你要高亮显示的按钮使用active伪元素来对其进行显示
.weui-btn:active{background-color: #06ae56;
}还有就是我们普通前端开发软件的body标签在微信开发者工具里面是没有作用的，要删除；div标签要改成view，才能显示相关内容。
WeUI源码学习笔记一相关推荐
- Java多线程之JUC包：Semaphore源码学习笔记
若有不正之处请多多谅解,并欢迎批评指正. 请尊重作者劳动成果,转载请标明原文链接: http://www.cnblogs.com/go2sea/p/5625536.html Semaphore是JUC ...
- RocketMQ 源码学习笔记 Producer 是怎么将消息发送至 Broker 的？
RocketMQ 源码学习笔记 Producer 是怎么将消息发送至 Broker 的? 文章目录 RocketMQ 源码学习笔记 Producer 是怎么将消息发送至 Broker 的? 前言 项目 ...
- Vuex 4源码学习笔记 - 通过Vuex源码学习E2E测试（十一）
在上一篇笔记中:Vuex 4源码学习笔记 - 做好changelog更新日志很重要(十) 我们学到了通过conventional-changelog来生成项目的Changelog更新日志,通过更新日志 ...
- Vuex 4源码学习笔记 - Vuex是怎么与Vue结合？（三）
在上一篇笔记中:Vuex源码学习笔记 - Vuex开发运行流程(二) 我们通过运行npm run dev命令来启动webpack,来开发Vuex,并在Vuex的createStore函数中添加了第一个 ...
- jquery源码学习笔记三：jQuery工厂剖析
jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...
- 雷神FFMpeg源码学习笔记
雷神FFMpeg源码学习笔记 文章目录 雷神FFMpeg源码学习笔记 读取编码并依据编码初始化内容结构 每一帧的视频解码处理 读取编码并依据编码初始化内容结构 在开始编解码视频的时候首先第一步需要注册 ...
- Apache log4j-1.2.17源码学习笔记
(1)Apache log4j-1.2.17源码学习笔记 http://blog.csdn.net/zilong_zilong/article/details/78715500 (2)Apache l ...
- PHP Yac cache 源码学习笔记
YAC 源码学习笔记 本文地址 http://blog.csdn.net/fanhengguang_php/article/details/54863955 config.m4 检测系统共享内存支持情 ...
- Vuex 4源码学习笔记 - 通过dispatch一步步来掌握Vuex整个数据流（五）
在上一篇笔记中:Vuex 4源码学习笔记 - Store 构造函数都干了什么(四) 我们通过查看Store 构造函数的源代码可以看到主要做了三件事情: 初始化一些内部变量以外 执行installMod ...
最新文章
- python列表去重效率_python面试题 - osc_yztbpii7的个人空间 - OSCHINA - 中文开源技术交流社区...
- 使用Silverlight4无边窗口
- 这家获得谷歌投资的企业想把亚马逊挑下神坛
- ksql 数量大于2_别人1加1大于2大于3，雍禾植发1加1小于2……
- python 插补数据_python 2020中缺少数据插补技术的快速指南
- mac 强制退出程序_教你强制退出程序！
- 西电华为交换设备配置（6506）
- 高校里的你值得关注的最强大脑
- Windows 常用的 CMD 命令
- 手把手教你如何安装水晶易表——靠谱的安装教程
- 详解 WebRTC 高音质低延时的背后—AGC 自动增益控制
- echarts制作区域地图。
- NLP预训练(PTMs)
- 第三方接入支付宝授权登录（支付宝新建应用没有公钥和私钥）问题
- 微博登录接入出现错误码21322(重定向地址不匹配)，其他解决方法
- CentOS系统的安装
- Python的一个图片识别工具-PyTesseract（Win10）
- python入门--常用的numpy函数：arange()
- TCP/IP卷一:87---TCP拥塞控制之（对标准算法的改进：NewReno、采用选择确认机制、转发确认(FACK)和速率减半、限制传输、拥塞窗口校验）
- 京东杨业飞：京东云原生大规模实践之路