微信小程序從零開始開發(fā)步驟(八)引入框架WeUI

首先來看下WeUI的官方介紹:

WeUI 是一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫睛竣,由微信官方設(shè)計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計,令用戶的使用感知更加統(tǒng)一求摇。在微信小程序的開發(fā)過程中酵颁,涉及到的前端復(fù)雜的樣式界面的問題,就需要使用個UI框架月帝,這樣可以省去以后很多麻煩躏惋。

WeUI作為一個開源的移動端UI框架,由于它是微信官方提供的對微信的兼容性沒有太大問題嚷辅,而且和各組件的樣式和微信一樣簿姨,能夠很好地和微信融合在一起,給用戶較好的體驗。

使用步驟

1扁位、在GitHub上https://github.com/weui/weui-wxss/下載程序代碼准潭,解壓后可以看到如下目錄:

圖片.png

2、我們只需要將weui-wxss-master\dist\style\weui.wxss文件導(dǎo)入到小程序項目的根目錄下:

圖片.png

3域仇、新建微信小程序項目刑然,將weui.wxss文件導(dǎo)入到小程序項目的根目錄下:


圖片.png
圖片.png

4、在項目中引用:在全局app.wxss中加入weui.wxss的引用- @import "weui.wxss";

圖片.png

5 根組件使用class=”page”

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

6 頁面骨架

<view class="page">
<view class="page__hd"></view><!--頁頭-->
<view class="page__bd"></view><!--主體-->
<view></view><!--未設(shè)置頁腳-->
</view>

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

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

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

<view class="weui-footer">
<view class="weui-footer__links">
    <navigator url="" class="weui-footer__link">上海物聯(lián)網(wǎng)科技有限公司</navigator>
</view>
<view class="weui-footer__text">Copyright ? 程序媛專用</view>
</view>

9垦细、具體組件在小程序中新建個項目择镇,地址指向weui-wxss-master\dist,就可以隨時查找自己要的效果括改,剩下的就是復(fù)制粘貼了腻豌,或者導(dǎo)入從github上下載代碼中的實例使用,在項目中使用weui的樣式如下:


圖片.png

示例代碼:

<view class="page">
    <view class="page__hd">
        <view class="page__title">Button</view>
        <view class="page__desc">按鈕嘱能,WeUI采用小程序原生的按鈕為主體吝梅,加入一些間距的樣式。</view>
    </view>
    
    <view class="page__bd page__bd_spacing">
        <button class="weui-btn" type="primary">頁面主操作 Normal</button>
        <button class="weui-btn" type="primary" disabled="true">頁面主操作 Disabled</button>

        <button class="weui-btn" type="default">頁面次要操作 Normal</button>
        <button class="weui-btn" type="default" disabled="true">頁面次要操作 Disabled</button>

        <button class="weui-btn" type="warn">警告類操作 Normal</button>
        <button class="weui-btn" type="warn" disabled="true">警告類操作 Disabled</button>

        <view class="button-sp-area">
            <button class="weui-btn" type="primary" plain="true">按鈕</button>
            <button class="weui-btn" type="primary" disabled="true" plain="true">按鈕</button>

            <button class="weui-btn" type="default" plain="true">按鈕</button>
            <button class="weui-btn" type="default" disabled="true" plain="true">按鈕</button>

            <button class="weui-btn mini-btn" type="primary" size="mini">按鈕</button>
            <button class="weui-btn mini-btn" type="default" size="mini">按鈕</button>
            <button class="weui-btn mini-btn" type="warn" size="mini">按鈕</button>
        </view>
    </view>
</view>

預(yù)覽框架WeUI文件:


圖片.png

文末福利:

【福利】微信小程序精選Demo合集:http://www.reibang.com/p/b5820cf9ff58

原文作者:祈澈姑娘惹骂;原文鏈接:http://www.reibang.com/u/05f416aefbe1
創(chuàng)作不易苏携,轉(zhuǎn)載請告知;90后前端妹子析苫,愛編程,愛運營穿扳,愛折騰衩侥。

閱讀鏈接:
微信小程序從零開始開發(fā)步驟(一)搭建開發(fā)環(huán)境http://www.reibang.com/p/0ff8c3b2f59f
微信小程序從零開始開發(fā)步驟(二)創(chuàng)建小程序頁面http://www.reibang.com/p/fe0db14e2869
微信小程序從零開始開發(fā)步驟(三)底部導(dǎo)航欄http://www.reibang.com/p/89a63dc99839
微信小程序從零開始開發(fā)步驟(四)自定義分享的功能http://www.reibang.com/p/65d9bdb8051d
微信小程序從零開始開發(fā)步驟(五)輪播圖http://www.reibang.com/p/bc3261557031
微信小程序從零開始開發(fā)步驟(六)4種頁面跳轉(zhuǎn)的方法http://www.reibang.com/p/01a5a6a0fdb9
微信小程序從零開始開發(fā)步驟(七)引入外部js 文件http://www.reibang.com/p/5f2cde64d7f2
微信小程序從零開始開發(fā)步驟(八)引入框架WeUI:http://www.reibang.com/p/fd423b6e17be
歡迎關(guān)注【編程微刊】公眾號,回復(fù)【領(lǐng)取資源】,500G編程學習資源干貨免費送矛物。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末茫死,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子履羞,更是在濱河造成了極大的恐慌峦萎,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件忆首,死亡現(xiàn)場離奇詭異爱榔,居然都是意外死亡,警方通過查閱死者的電腦和手機糙及,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門详幽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事唇聘“婀茫” “怎么了?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵迟郎,是天一觀的道長剥险。 經(jīng)常有香客問我,道長宪肖,這世上最難降的妖魔是什么表制? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮匈庭,結(jié)果婚禮上夫凸,老公的妹妹穿的比我還像新娘。我一直安慰自己阱持,他們只是感情好夭拌,可當我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著衷咽,像睡著了一般鸽扁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上镶骗,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天桶现,我揣著相機與錄音,去河邊找鬼鼎姊。 笑死骡和,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的相寇。 我是一名探鬼主播慰于,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼唤衫!你這毒婦竟也來了婆赠?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤佳励,失蹤者是張志新(化名)和其女友劉穎休里,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體赃承,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡妙黍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了瞧剖。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片废境。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出噩凹,到底是詐尸還是另有隱情巴元,我是刑警寧澤,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布驮宴,位于F島的核電站逮刨,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏堵泽。R本人自食惡果不足惜修己,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望迎罗。 院中可真熱鬧睬愤,春花似錦、人聲如沸纹安。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽厢岂。三九已至光督,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間塔粒,已是汗流浹背结借。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留卒茬,地道東北人船老。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像圃酵,于是被迫代替她去往敵國和親柳畔。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 最近小程序火了辜昵,是時候收藏一波了荸镊! 1:微信小程序官方工具:https://mp.weixin.qq.com/de...
    Sky109閱讀 13,570評論 2 97
  • 從零到有寫一個小程序系列專題咽斧,很早以前就想寫來分享堪置,但由于項目一直在進展,沒有過多的時間研究技術(shù)张惹,現(xiàn)在可以繼續(xù)分享...
    祈澈菇?jīng)?/span>閱讀 69,505評論 22 288
  • 天色沙沙舀锨, 遠山蒙蒙, 心如孤星宛逗,迷茫不知歸處坎匿! ...
    隕殤閱讀 131評論 0 1
  • 最近很多朋友問我:“郝梅,你最近在學什么呀?看你的圈正能量滿滿替蔬,狀態(tài)真好告私,有什么好東西記得分享啊承桥!還有你說的吸引力...
    寬兩秒心自在閱讀 570評論 2 2
  • 非常感恩驻粟,一個禮拜的回家旅程滿了神的同在與祝福,和家人相聚非常的開心凶异,爸爸媽媽的愛讓我們感覺非常溫暖蜀撑,回家?guī)滋焓裁?..
    恩寵爸爸閱讀 120評論 0 0