一、前言
因為小程序的api描述都比較簡單,並沒有wxml及wxss的描述,一定會想小程序有沒有一個UI庫,類似於前端中的Bootstrap,MD,Semantic UI這樣的框架UI庫。有的,它就是WeUI。
WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫,由微信官方設計團隊為微信內網頁和微信小程序量身設計,令用戶的使用感知更加統一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
它的界面如圖:

二、WeUI的使用方法
1、引入組件
本文選擇第二種方式
2、將下載的壓縮包解壓,導入到小程序中(解壓的目錄為weui-miniprogram
)
3、在app.wxss里面引入weui.wxss
在app.wxss最上方加入下面的代碼
@import './weui-miniprogram/weui-wxss/dist/style/weui.wxss'
4、使用搜索組件Searchbar
(1)index.json:在頁面中引入 Searchbar搜索組件
{ "usingComponents": { "mp-searchbar": "/weui-miniprogram/searchbar/searchbar" }, "navigationBarTitleText": "UI組件庫" }
(2)index.wxml:在對應頁面的 wxml 中直接使用該組件
<view class="page"> <view class="page__bd"> <mp-searchbar bindselectresult="selectResult" search="{{search}}"></mp-searchbar> </view> </view>
(3)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) }, });
5、運行結果