微信小程序使用WeUI組件庫

本身玩項目沒有配套UI，審美不在線，css寫的爛（固然小程序這裏叫wxss），這就很容易致使寫出來頁面的醜的一批。

這時候就急需一個UI框架，解決這些痛點。官方很貼心的給出了WeUI組件庫。

可是這個文檔真心很差看，「快速上手」根本沒讓我能快速上手。官方提供的兩種方式引用該組件庫，如何引用寫的都很抽象哇。

這裏我總結了一下，詳細介紹這兩種方式的具體操做。

下載組件直接引用

進入下面這個網址，按需下載。

https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html

下載到本地是個壓縮包，解壓以後存放在你小程序項目的以下這個位置：

導入完成以後，在app.wxss中，首行引入weui.wxss

@import './weui-miniprogram/weui-wxss/dist/style/weui.wxss'

這樣就算是引用成功了，在須要的頁面中使用。

例如在index中使用搜索組件Searchbar。

一、首先須要在index.json中引入Searchbar。

{ "usingComponents": { "mp-searchbar": "/weui-miniprogram/searchbar/searchbar" }, "navigationBarTitleText": "UI組件庫"}

二、在index.wxml中直接使用該組件。

<view class="page"> <view class="page__bd"> <mp-searchbar bindselectresult="selectResult" search="{{search}}"></mp-searchbar> </view></view>

三、index.js的處理邏輯。

Page({ data: { inputShowed: false, inputVal: "" }, onLoad() { this.setData({ search: this.search.bind(this) }) }, search: function (value) { return new Promise((resolve, reject) => { setTimeout(() => { resolve([{text: '搜索結果', value: 1}, {text: '搜索結果2', value: 2}]) }, 200) }) }, selectResult: function (e) { console.log('select result', e.detail) },});

關於組件如何使用，官方文檔給出的說明仍是很詳細的，就是像上面這樣三步驟，給出了每一個組件的使用案例。

npm方式下載構建

首先確保本機有node環境，在小程序項目的文件下執行：

npm init

而後就能夠在項目中多了一些文件。終端裏繼續執行指令：

npm install --save weui-miniprogram --production

點擊小程序開發工具右上角詳情，本地設置，勾選上使用npm模塊。

這樣，WeUI就完成了導入，接下來的引用和使用和第一個方法中介紹的同樣。

本文分享自微信公衆號 - 前端一塊兒學（gh_3ba18d51f982）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。