微信小程序 WePY 引入WeUI

hedeqiang

发布于 2019-12-17 22:02:13

2.3K0

发布于 2019-12-17 22:02:13

文章被收录于专栏：LaravelCodeLaravelCode

微信小程序 WePY 引入WeUI

什么是WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一

安装WeUI

我们在上一节中安装了 WePY ，那么在WePY中如何使用 WeUI 呢？

官方有一个 wepy-weui-demo 例子，我们可以直接使用

下载

git clone git@github.com:wepyjs/wepy-weui-demo.git
or
git clone https://github.com/wepyjs/wepy-weui-demo.git

集成到 WePY 项目中

cp -r wepy-weui-demo/src/style/ my-project/src/style

my-project 为上一节安装的WePY 项目

引入样式文件

修改 app.wpy 中的 style 部分

<style lang="less">
@import 'style/weui.less';
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
</style>

其中主要引入的weui 的样式文件

编辑pages/index.wpy

<template>
  <view class="container">
    <button class="weui-btn" type="primary">页面主操作 Normal</button>
    <button class="weui-btn" type="primary" disabled="true">页面主操作 Disabled</button>

    <button class="weui-btn" type="default">页面次要操作 Normal</button>
    <button class="weui-btn" type="default" disabled="true">页面次要操作 Disabled</button>

    <button class="weui-btn" type="warn">警告类操作 Normal</button>
    <button class="weui-btn" type="warn" disabled="true">警告类操作 Disabled</button>

  </view>
</template>