微信小程序 WePY 引入WeUI

微信小程序 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>

查看是否生效

wepy build --watch

具体使用方法可以参考克隆下来的代码，进入到 example 目录查看每一个组件的使用方式。

关于极客返利

极客返利 是由我个人开发的一款网课返利、返现平台。包含 极客时间返现、拉勾教育返现、掘金小册返现、GitChat返现。目前仅包含这几个平台。后续如果有需要可以考虑其他平台。 简而言之就是：你买课，我返现。让你花更少的钱，就可以买到课程。

https://geek.laravelcode.cn

https://geek.idaka.ink

版权许可

本作品采用 知识共享署名 4.0 国际许可协议 进行许可。

转载无需与我联系，但须注明出处，注明文章来源 微信小程序 WePY 引入WeUI

联系我