WeUI源码分析之Panel：小白入门篇

站长

2024年04月26日 18:48 · 阅读数 2

WeUI是什么？

"WeUI"（微信UI）是腾讯（Tencent）开发的一个前端框架，旨在帮助开发者创建与微信应用的用户界面类似的网页应用和网站。WeUI提供一组CSS和JavaScript组件和UI元素，使开发者能够更轻松地为微信用户创建一致和熟悉的用户体验。

WeUI包括各种UI组件，如按钮、表单元素、导航栏等，都经过样式设计，使其看起来类似于微信应用。它经常用于需要与微信集成或提供类似微信应用的用户体验的Web开发项目中

weui既然是微信开发的项目名称，所以我们在学习人家的源码的时候，值得去注意人家如何体现BEM的，如果这里还有人不了解BEM的概念，可以去看我的上一篇文章《鹅厂面试题~代码规范》，里面有提及BEM的概念。我们今天主要是来讲weui源码，关于BEM我们不过多赘述。

正文

在实现一个页面之前我们需要进行一个功能分离，也就是css文件，js文件。

好，现在我们进入今天的主题，weui之panel，panel是面板的意思，我们先来看下微信的面板是什么样子的

WeUI源码分析之Panel：小白入门篇

大家也可以自行查看：weui.io/#panel 检查网页的时候可以点击element左边的图标更换成手机浏览模式

html部分

这里只给出了我们今天准备要学的小部分，我们主要是学weui人家是如何命名css的以及一些css面试热点问题。

拿到这张效果图，我们不难看出，整个page是成为两个部分的，所以

上部分命名为：page__hd

[hd]: head的缩写
下面那部分命名为：page__bd

[bd]: body的缩写

如果有三部分，就是多个尾部，那部分将会被命名为page__ft

[ft]: foot的缩写

通常就是这样分三个部分去写，但是实际上分出的部分会是更多，到时候怎么命名我们后面再讲，大家可以先关注我一手，最快获得新内容的推送[doge]

<div class="page__hd"></div>
<div class="page__bd"></div>

这样整个page就被我们一分为二了，这里大家可以使用“.page__hd+.page__bd”这一快捷操作来写代码

注意：中间的“+”为兄弟选择器

page__hd

<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标签不命名为`pagehdtitle`呢？

根据BEM的规则，BE的E只能有一个，page是block，hd和title都是element，一个是父子，一个可以理解为爷孙，三者不能同时出现

page__bd

<div class="page__bd">
	<div class="weui-panel"></div>
</div>

因为page__bd里面不仅仅是panel，为了方便管理，我们引入weui-panel这个新组件

weui-panel

<div class="weui-panel">
	<div class="weui-panel__hd"></div>
	<div class="weui-panel__bd"></div>
</div>

整个页面的下半部分就是这个panel部分，不难发现，这个panel也分成两部分

第一部分是图文组合列表这段文字

<div class="weui-panel__hd">
	图文组合列表
</div>

第二部分就是里面的文章内容

<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又是一个新的小组件，小组件构成大组件。注意这里的文章都是超链接的格式。

<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来表示，左边就是一个图片，右边是一个文章。我们先来看下左边的图片：

<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理解为小图片的意思

<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文件目的是针对不同的浏览器重置成一张相同的白纸
```
*{
    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文件

.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作用是进行变量的声明

WeUI源码分析之Panel：小白入门篇

什么？css也可以声明变量？没错，css可以声明变量，它的目的就是为了统一更改，方便管理利用，比如全网禁娱的时候，网站可能需要统一变成灰色，就是只需要更改这个变量就可以

panel.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吗[星星眼]

WeUI源码分析之Panel：小白入门篇

WeUI是什么？

正文

html部分

page__hd

盲猜这里有小白会问，为什么h1标签不命名为page__hd__title呢？

page__bd

weui-panel

Google图片格式--base64

css部分

这里我需要讲下box-sizing这个属性

盲猜这里有小白会问，为什么h1标签不命名为`pagehdtitle`呢？