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，才能显示相关内容。