WeUI 簡明入門指南

2021-09-01 11:23:31 字數 1623 閱讀 3307

之前做智慧型校園的時候想找乙個開源的移動端 ui 框架,找了好多個,比如**的 sui mobile、qq 的 frozenui 等,基本都沒有滿意的,這些框架要麼過於龐雜,要麼太像 ios!最後無意間發現了 weui 這個框架,一眼就愛上了! 加了 weui 官方 qq 群後發現好多童鞋都不知道怎麼用,那我就寫個簡明的入門教程吧!

綠色按鈕

注意:

這樣就搞定了,你可以任意使用各種元件了,關於元件怎麼使用,去看官方 wiki 就好了,或者 f12 去扒官方 demo 把他們的**複製過來就行了,就是這麼簡單粗暴!

weui 的元件目前不是很多,但是也基本能滿足大部分需求了。 官方 demo 裡面使用了前端路由,但這並不是 weui 的一部分,並且 demo 內也寫了一些自定義的 css 樣式,也不是 weui 的一部分,所以我們使用的時候只有元件的樣式可以直接複製來,其他的比如路由、邏輯操作、上傳等都需要自己來搞定! 下面來幾個元件的 demo 方便需要的童鞋直接複製:

九宮格就是官方 demo 首頁那個樣式,九宮格不一定非要是九個,幾個都可以的,看自己的需求了!

weui_grids是整個九宮格元件的樣式,weui_grid是乙個乙個宮格,我這裡只寫了兩個,你需要幾個就寫幾遍,weui_grid_icon是乙個宮格的圖示,weui_grid_label就是圖示下面那個字咯! 圖示最好使用向量圖,以保證在不同裝置上的清晰度,的尺寸不需要自己寫上,weui 已經幫你搞定了!

1

2

3

4

tabbar 的 class 為weui_tabbar, 一般巢狀在weui_tab內,weui_tab_bd為 tab 頁面的主體內容,weui_tabbar_item為 tabbar 的乙個乙個的按鈕,建議為 3~5 個,weui_tabbar_icon為每個按鈕的圖示,weui_tabbar_label為圖示下面的字,active 狀態可以使用weui_bar_item_on樣式。 注意,你這樣寫完後會發現 tabbar 位於頁面最頂端,這是因為 weui 沒有定義html, body的高度,所以給其定義個height: 100%;就可以了!

html,body
這個就不寫**了,去複製 demo 或 wiki 裡面的**就好了,不過有一點要注意:你會發現表單內可以輸入日期、時間和數字等,但這並不是 weui 的元件,而是使用 html 5 的 input 屬性,然後呼叫的瀏覽器自身的控制項來輸入日期、時間等的。 日期:

數字:

更多 html 5 input 型別請參考:html5 input 類

Rails簡明實用入門指南

ruby請參考我寫的簡明ruby系列 ruby簡明入門和提高 rails 4.2 ruby 2.0 可以先嘗試 一小時熱身 有興趣的話可繼續選學基礎部分。也許你關心需要多少時間學會,我給乙個參考時間,請注意我是說的參考時間,入門一小時就夠了,學習乙個完整專案的話大概兩個月吧,累計三個專案也就是六個月...

git 簡明指南

助你入門 git 的簡明指南,木有高深內容 建立新資料夾,開啟,然後執行 git init 以建立新的 git 倉庫。執行如下命令以建立乙個本地倉庫的轉殖版本 git clone path to repository 如果是遠端伺服器上的倉庫,你的命令會是這個樣子 git clone usernam...

git 簡明指南

建立新倉庫 建立新資料夾,開啟,然後執行 git init 以建立新的 git 倉庫。檢出倉庫 執行如下命令以建立乙個本地倉庫的轉殖版本 git clone path to repository 如果是遠端伺服器上的倉庫,你的命令會是這個樣子 git clone username host path...