微信開發入門(七)如何使用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的詳細內容,更多請關注龍方網絡其它相關文章!

鄭重聲明:本文版權包含圖片歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們([email protected])修改或刪除,多謝。

鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。

留言與評論(共有 0 條評論)
   
驗證碼:
彩票店