微信開發入門（七）如何使用weui.wxss

什麼是WeUI?

WeUI是在遵守微信視覺設計規範下，由官方設計團隊為小程式量身打造的基礎樣式庫。

這裡把WeUI放到基礎篇裡，是因為WeUI是官方出品，並且在10月28號IDE更新後，IDE不能識別和引用css，同時也屏蔽了從網絡獲取樣式文件，和css劃清界線。

》》》 如何引入WeUI

1. 下載WeUI
   weui.wxss
   注意是在【weui-wxss/dist /style/】目錄下，不要【weui-wxss/src】目錄裡面下載

2. #將weui.wxss拷貝到小程式根目錄中
   

3. #在app.wxss或頁面wxss導入weui.wxss

   /**app.wxss**/
   @import 'weui.wxss';

   登入後複製

4. 以上就成功引入了weui.wxss，weui也提供了單一元件的樣式引入，流程同上。

》》》》如何使用WeUI

1. #根元件使用class="page"

   <view class="page">
   </view>

   登入後複製

2. 頁面骨架元件使用class="pagexxx"(注意是兩個底線)

   <view class="page">
   <!--页头-->
   <view class="pagehd"></view>
   <!--主体-->
   <view class="pagebd"></view>
   <!--没有页脚-->
   </view>

   登入後複製

3. #其他元件都已weui-開頭後接元件名稱，例如class="weui -footer"

   <view class="weui-footer">我是页脚</view>

   登入後複製

4. 元件的子元件樣式，例如view.weui-footer元件還有連結和版權資訊。

   <view class="weui-footer">
   <view class="weui-footerlinks">
       <navigator url="" class="weui-footerlink">小黄象</navigator>
   </view>
   <view class="weui-footertext">Copyright © 精品专栏组</view>
   </view>

   登入後複製

   元件和子元件使用兩個底線銜接，所以要區分什麼時候用"-",什麼時候用

下圖是結合weui.wxss做的社群專欄小程式版，正在完善ing

【相關推薦】

#1. 微信公眾號平台原始碼下載

2. 微信投票原始碼

3. 微信啦啦外送2.2.4解密開源版微信魔術方塊原始碼

以上是微信開發入門（七）如何使用weui.wxss的詳細內容。更多資訊請關注PHP中文網其他相關文章！