小程序模板網(wǎng)

xiaochun系列教程--微信小程序 WeUi.wxss

發(fā)布時間:2018-04-21 10:08 所屬欄目:小程序開發(fā)教程

個啥?:小程序界的Bootstrap 
去哪下?:https://github.com/weui/weui/blob/master/README_cn.md 
干啥使?:就是企鵝公司告訴你,你的小程序要和我微信要保持一個尿性,一樣式的。 
咋使呢?:把東西下載下來,怎么用呢,不然不白下了嗎?網(wǎng)吧的兩塊錢不白花了嗎?往下瞅

1.找到你下載的目錄 
注意是在【weui-wxss/dist/style/】目錄下,不要【weui-wxss/src】目錄里面下載

2.將weui.wxss拷貝到小程序根目錄中 
這里寫圖片描述 
3.在app.wxss或頁面wxss導(dǎo)入weui.wxss


/**app.wxss**/
@import 'weui.wxss';
  • 1
  • 2
  • 1
  • 2

4.weui也提供了單個組件的樣式引入,流程同上。

5 根組件使用class=”page”


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

6 頁面骨架


<view class="page">
<view class="page__hd"></view><!--頁頭-->
<view class="page__bd"></view><!--主體-->
<view></view><!--沒有頁腳-->
</view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

7 除此之外都是按照weui-開頭后接組件名稱,例如class=”weui-footer”


<view class="weui-footer">我是頁腳</view>
  • 1
  • 1

8 組件的子組件樣式,例如view.weui-footer組件還有鏈接和版權(quán)信息。


<view class="weui-footer">
<view class="weui-footer__links">
    <navigator url="" class="weui-footer__link">哎呀我去劉老師</navigator>
</view>
<view class="weui-footer__text">Copyright © 業(yè)界良心</view>
</view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

9.具體組件在小程序中新建個項目,地址指向weui-wxss-master\dist,就可以隨時查找自己要的效果,剩下的就是復(fù)制粘貼了

Tips:組件和子組件使用兩個下劃線銜接,所以要區(qū)分什么時候用”-“,什么時候用”__”



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.u-renovate.com/wxmini/doc/course/23869.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×