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