WeUI是什么？
"WeUI"（微信UI）是腾讯（Tencent）开发的一个前端框架，旨在帮助开发者创建与微信应用的用户界面类似的网页应用和网站。WeUI提供一组CSS和JavaScript组件和UI元素，使开发者能够更轻松地为微信用户创建一致和熟悉的用户体验。
WeUI包括各种UI组件，如按钮、表单元素、导航栏等，都经过样式设计，使其看起来类似于微信应用。它经常用于需要与微信集成或提供类似微信应用的用户体验的Web开发项目中
weui既然是微信开发的项目名称，所以我们在学习人家的源码的时候，值得去注意人家如何体现BEM的，如果这里还有人不了解BEM的概念，可以去看我的上一篇文章《鹅厂面试题~代码规范》，里面有提及BEM的概念。我们今天主要是来讲weui源码，关于BEM我们不过多赘述。
正文
在实现一个页面之前我们需要进行一个功能分离，也就是css文件，js文件。
好，现在我们进入今天的主题，weui之panel，panel是面板的意思，我们先来看下微信的面板是什么样子的
大家也可以自行查看：weui.io/#panel 检查网页的时候可以点击element左边的图标更换成手机浏览模式
html部分
这里只给出了我们今天准备要学的小部分，我们主要是学weui人家是如何命名css的以及一些css面试热点问题。
拿到这张效果图，我们不难看出，整个page是成为两个部分的，所以
-
上部分命名为：page__hd
[hd]: head的缩写
-
下面那部分命名为：page__bd
[bd]: body的缩写
如果有三部分，就是多个尾部，那部分将会被命名为page__ft
[ft]: foot的缩写
通常就是这样分三个部分去写，但是实际上分出的部分会是更多，到时候怎么命名我们后面再讲，大家可以先关注我一手，最快获得新内容的推送[doge]
ini
<div class="page__hd"></div>
<div class="page__bd"></div>这样整个page就被我们一分为二了，这里大家可以使用".page__hd+.page__bd"这一快捷操作来写代码
注意：中间的"+"为兄弟选择器
page__hd
ini
<div class="page__hd">
<h1 class="page__title">Panel</h1>
<p class="page__desc">面板</p>
</div>这个部分就只有两行文字，第一行文字内容符号用h1去写，第二行文字内容用p去写就可以了
注意这里的命名：
-
h1标签是page__title
-
p标签是page__desc
[desc]: describe的缩写，很好理解，段落就是用来描述的
盲猜这里有小白会问，为什么h1标签不命名为page__hd__title呢？
根据BEM的规则，BE的E只能有一个，page是block，hd和title都是element，一个是父子，一个可以理解为爷孙，三者不能同时出现
page__bd
ini
<div class="page__bd">
<div class="weui-panel"></div>
</div>因为page__bd里面不仅仅是panel，为了方便管理，我们引入weui-panel这个新组件
weui-panel
ini
<div class="weui-panel">
<div class="weui-panel__hd"></div>
<div class="weui-panel__bd"></div>
</div>整个页面的下半部分就是这个panel部分，不难发现，这个panel也分成两部分
第一部分是图文组合列表这段文字
ini
<div class="weui-panel__hd">
图文组合列表
</div>第二部分就是里面的文章内容
ini
<div class="weui-panel__bd">
<a href="javascript:;" class="weui-media-box weui-media-box_appmsg"></a>
<a href="javascript:;" class="weui-media-box weui-media-box_appmsg"></a>
</div>这里的weui-media-box又是一个新的小组件，小组件构成大组件。注意这里的文章都是超链接的格式。
ini
<a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd"></div>
<div class="weui-media-box__bd"></div>
</a>整个超链接里面有左右两个部分，所以用hd和bd来表示，左边就是一个图片，右边是一个文章。我们先来看下左边的图片：
ini
<div class="weui-media-box__hd">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==
" alt="" class="weui-media-box__thumb">
</div>Google图片格式--base64
大家发现这里的图片src不像是个网址，其实这是个图片编码，里面一个字符代表一个字节Byte，1024Byte=1kb 这里的占用大小大约1kb左右，如果我们用的png|jpg|jpeg|wtt这样的格式，这里的图片至少就要4kb以上。
关于上面提到的图片格式大家是否注意到我没有提到webp图片格式，这个格式要特殊点，webp是由Google开发的具有更高的压缩效率的格式，其实它的优点还有很多，总之我们需要知道的就是它大概能比普通图片格式的空间优化30%左右。
但是我们这里用的编码就更强大了，像是上面提到的这些图片格式是需要浏览器分出线程下载的，图片用的越多，线程就会越多，因此效率很低，并且我们还需要单独一个文件去存储这些格式图片，而这里的base64编码直接写在html或者css文件中，一般像是这样的小图片都是用这些编码去写。另外我们这里一般就是命名为__thumb thumb理解为小图片的意思
ini
<div class="weui-media-box__bd">
<strong class="weui-media-box__title">标题一</strong>
<p class="weui-media-box__desc">
由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
</p>
</div>整个weui-media-box__bd分为上下两个部分，都是文本格式。注意这里的strong标签会使字体加粗。
css部分
这里的css文件有三个，分别为：reset.css 、base.css 和 panel.css
-
reset.css文件
reset文件目的是针对不同的浏览器重置成一张相同的白纸
css*{ margin: 0; padding: 0; outline: 0; /* box-sizing: border-box; 盒子模型方式切换 */ }浏览器默认会有margin和padding，outline是外边框，并且不占用空间，一般用于突出input 和 a 标签。
这里我需要讲下box-sizing这个属性
box-sizing是指盒子的切换方式，它有两种模型：
1.标准盒子模型 = content + padding + border + margin
假设我的div设置成宽高各100px,那么content就是宽高各100px
2.IE盒子模型 = content(自动缩放) + padding + border + margin
假设我的div设置成宽高各100px,那么整个div宽高各100px
通过下面的注释我们其实很好理解，假设两个模型给定总共100的面积，这个标准盒子模型的模式就很像我们买房的时候会算上的公摊。
在这里我们不需要用上IE盒子模型，默认为标准盒子模型，所以不需要进行改动
-
base.css文件
css.page{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto ; -webkit-overflow-scrolling: touch; box-sizing: border-box; z-index: 1; } body{ --weui-BG-0: #111; --weui-FG-1: rgba(255,255,255,0.5); --weui-BG-2: #191919; } .page,body{ background-color: var(--weui-BG-0); } body{ color: rgba(255,255,255,0.8); } .page_hd{ padding: 40px; } .page_title{ text-align: left; font-size: 20px; font-weight: 400; } .page_desc{ margin-top: 4px; color: var(--weui-FG-1); text-align: left; font-size: 14px; } .page_bd{ padding-bottom: 20px; }.page{}
首先说一下这个page写法大家可以拿去套用，这是移动端占满整个page的写法
里面的overflow属性是BFC很重要的属性之一，极大概率出现在css面试题中！
BFC大家都清楚吗？"BFC" 指的是 "Block Formatting Context"（块级格式化上下文）
overflow-y: auto;指的是当内容超出屏幕时则上下滚动，-webkit-overflow-scrolling: touch;指的是让滚动与手同步，滚动更加丝滑流畅。手机端（移动端）浏览器的内核基本上都是-webkit，包括safari
body{}
这里的body是指上面的body，这个body作用是进行变量的声明
什么？css也可以声明变量？没错，css可以声明变量，它的目的就是为了统一更改，方便管理利用，比如全网禁娱的时候，网站可能需要统一变成灰色，就是只需要更改这个变量就可以
-
panel.css文件
css.weui-panel{ background-color: var(--weui-BG-2); margin-top: 10px; position: relative; overflow: hidden; } .weuipanel:first-child{ margin-top: 0px; } .weui-panel__hd{ padding: 16px 16px 13px; color: var(--weui-FG-0); font-size: 15px; font-weight: 500; position: relative; }这个css文件就是专门用来设置面板组件，这个面板组件就是来放置文章的。
这个里面需要注意的属性就是
overflow: hidden;意思为超出就会隐藏掉.weuipanel:first-child{margin-top: 0px;}这里设置的是第一个新闻我们需要更改参数，到当前div顶部距离为0，其余的新闻都有10px的margin-top
今天的weui-panel源码分享到这里就结束了，大家如果非常感兴趣，可以关注我一手，获得接下来更新的最快推送，后面我还会持续更新weui源码系列。如果觉得本文对你有帮助的话，可以给个免费的赞吗[doge] 还有可以给我的gitee链接codeSpace: 记录coding中的点点滴滴 (gitee.com)点一个免费的star吗[星星眼]