|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 本篇文章給大家帶來的內容是關于微信小程序實例:引入框架WeUI的代碼實現,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。首先來看下WeUI的官方介紹: WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫,由微信官方設計團隊為微信內網頁和微信小程序量身設計,令用戶的使用感知更加統一。在微信小程序的開發過程中,涉及到的前端復雜的樣式界面的問題,就需要使用個UI框架,這樣可以省去以后很多麻煩。 WeUI作為一個開源的移動端UI框架,由于它是微信官方提供的對微信的兼容性沒有太大問題,而且和各組件的樣式和微信一樣,能夠很好地和微信融合在一起,給用戶較好的體驗。 使用步驟1、在GitHub上https://github.com/weui/weui-wxss/下載程序代碼,解壓后可以看到如下目錄:
2、我們只需要將weui-wxss-master\dist\style\weui.wxss文件導入到小程序項目的根目錄下:
3、新建微信小程序項目,將weui.wxss文件導入到小程序項目的根目錄下:
4、在項目中引用:在全局app.wxss中加入weui.wxss的引用- @import "weui.wxss";
5 根組件使用class=”page” <view class="page"></view> 6 頁面骨架 <view class="page"> <view class="page__hd"></view><!--頁頭--> <view class="page__bd"></view><!--主體--> <view></view><!--未設置頁腳--> </view> 7 除此之外都是按照weui-開頭后接組件名稱,例如class=”weui-footer” <view class="weui-footer">我是頁腳</view> 8 組件的子組件樣式,例如view.weui-footer組件還有鏈接和版權信息。 <view class="weui-footer">
<view class="weui-footer__links">
<navigator url="" class="weui-footer__link">上海物聯網科技有限公司</navigator>
</view>
<view class="weui-footer__text">Copyright ? 程序媛專用</view>
</view>9、具體組件在小程序中新建個項目,地址指向weui-wxss-master\dist,就可以隨時查找自己要的效果,剩下的就是復制粘貼了,或者導入從github上下載代碼中的實例使用,在項目中使用weui的樣式如下:
示例代碼: <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>相關推薦: 以上就是微信小程序實例:引入框架WeUI的代碼實現的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!