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源码学习笔记一的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。