微信小程序 - 使用WeUI框架

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

官网地址：https://weui.io/

本地预览项目

1、下载源码并解压,小程序导入项目-->目录dist
地址：https://github.com/Tencent/weui-wxss

导入目录dist

预览

loadmore例子：

image.png

上面预览可以看到页面整体结构，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结构请看dist/example/下的组件
样式文件可直接引用dist/style/weui.wxss，或者单独引用dist/style/widget下的组件的wxss

详细步骤

1、将weui-wxss-master/dist/style/weui.wxss文件导入到小程序项目的根目录下：

image.png

2、全局app.wxss：

@import "weui.wxss";

3、修改源码
可以试着修改一下小程序底部添加没有数据提示，复制粘贴即可

image.png

WeUI官方小程序：

image.png