微信小程序mpvue項目使用WuxWeapp前端UI組件

前言:這是一篇簡單粗暴的使用指南

在最近的小程序項目裏前端UI框架最後選擇使用WuxWeapp,這篇文章記錄一下如何在小程序mpvue項目中使用該UI組建。

步驟一:下載源碼

地址在這裏
主要是裏面的dist文件夾,下載下來之後就把dist文件夾放到mpvue腳手架自動生成的static文檔中。具體的目錄層級各位都可以按自己的喜好來設計。貼上我的僅供參考。

clipboard.png

步驟二:引入組件

我們需要在app.json文件中進行配置,其中有一個"usingComponents"配置屬性。需要使用什麼組件,按需引入就行。配置如下:

clipboard.png

步驟三:使用組件

最後就是使用啦,該UI組件也有官方的文檔,已經寫得很詳細了。

clipboard.png


Tips:

  • 小程序的限制
    由於小程序的定位是輕、快、小吧,所以小程序的代碼包的大小也是有限制的,一個包不能超過2M。所以,我們引入到項目中的wux組件的代碼小程序也會進行編譯因而增加了代碼包的大小,所以最好還是按需使用。
  • 如何在Wux的基礎上自定義樣式
    比如我想在wux修改wux按鈕組件的顏色,因爲這種行爲是會存在的,可能項目需求要按鈕就得是一種特定的顏色,而且我們想直接寫css來修改顏色也有點困難。那麼不妨,我們可以從組件源碼下手,其實加個背景顏色什麼的還算是簡單的,只要在wxss文件里加一個css 的class就差不多了…這一直是其中一種思路,其實也給了我們機會去看看別人是如何實際出一個UI組件庫的。(我想我們大多數人都是用過,卻很少看過代碼八)

寫到這裏,希望能對你有幫助(#^.^#)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章