微信小程式mpvue專案使用WuxWeapp前端UI元件

摘要： 前言：這是一篇簡單粗暴的使用指南 在最近的小程式專案裡前端UI框架最後選擇使用WuxWeapp，這篇文章記錄一下如何在小程式mpvue專案中使用該UI元件。 步驟一：下載原始碼 （ 地址在這裡 ） 主要是裡面的dist資料夾，下載下來之後就把dist資料夾放到mpvue腳手...

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

在最近的小程式專案裡前端UI框架最後選擇使用WuxWeapp，這篇文章記錄一下如何在小程式mpvue專案中使用該UI元件。

步驟一：下載原始碼

（ 地址在這裡 ）

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

步驟二：引入元件

我們需要在app.json檔案中進行配置，其中有一個"usingComponents"配置屬性。需要使用什麼元件，按需引入就行。配置如下：

步驟三：使用元件

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

Tips：

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

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