WeUI 是一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫，由微信官方設(shè)計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計，令用戶的使用感知更加統(tǒng)一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

官網(wǎng)地址：https://weui.io/

本地預(yù)覽項目

1、下載源碼并解壓,小程序?qū)腠椖?->目錄dist
地址：https://github.com/Tencent/weui-wxss

導(dǎo)入目錄dist

預(yù)覽

loadmore例子：

image.png

上面預(yù)覽可以看到頁面整體結(jié)構(gòu)，weui-開頭后接組件名稱，例如class=”weui-loadmore”

<view class="page">
  <!-- 頁頭-->
  <view class="page__hd"></view>
  <!-- 主體-->
  <view class="page__bd">
     <!-- 組件-->    
     <view class="weui-xxx"></view>
  </view>
  <!-- 頁腳-->
  <view class="page__ft"></view>
</view>

項目中使用

組件的wxml結(jié)構(gòu)請看dist/example/下的組件
樣式文件可直接引用dist/style/weui.wxss，或者單獨引用dist/style/widget下的組件的wxss

詳細步驟

1、將weui-wxss-master/dist/style/weui.wxss文件導(dǎo)入到小程序項目的根目錄下：

image.png

2、全局app.wxss：

@import "weui.wxss";

3、修改源碼
可以試著修改一下小程序底部添加沒有數(shù)據(jù)提示，復(fù)制粘貼即可

image.png

WeUI官方小程序：

image.png