高颜值、好用、易扩展的小程序 UI 库

概述

ZanUI-WeApp是有赞移动 Web UI 规范 ZanUI 的小程序现实版本，结合了微信的视觉规范，为用户提供更加统一的使用感受。

现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、toptips 等组件或元素。具体可以扫描下方小程序二维码，体验组件库示例 Demo

更多背景介绍，请移步 我们写的介绍文章。

下载

git clone https://github.com/youzan/zanui-weapp.git

预览

1. 在 zanui-weapp 根目录下运行

# 安装项目依赖
npm install
# 执行组件编译
npm run dev

2. 打开微信web开发者工具，'本地小程序项目 - 添加项目'，把 zanui-weapp/example 目录添加进去就可以预览示例demo了。

使用

1. 使用 ZanUI-WeApp 前请确保已经学习过微信官方的 小程序简易教程 和 小程序框架介绍。
2. 然后用 Bower 将 ZanUI-WeApp 添加到你的项目中使用。
3. 你也可以 fork 出一份你自己的 ZanUI-WeApp，这样可以获得更稳定的代码和更方便的进行个性定制。

我们推荐在你的app.wxss直接引入zanui-weapp/dist/index.wxss。

具体组件文档

• Actionsheet - 行动按钮
• Badge - 徽章
• Button - 按钮
• Capsule - 胶囊
• Card - 卡片
• Cell - 单元格
• Helper - 基础样式
• Icon - 图标
• Layout - 布局
• Loadmore - 加载
• Noticebar - 通告栏
• Panel - 面板
• Popup - 弹出层
• Stepper - 计数器
• Select - 选择
• Steps - 步骤条
• Switch - 开关
• Tab - 标签
• Field - 输入框
• Dialog - 弹出框
• Tag - 标签
• Toast - 轻提示
• Toptips - 顶部提示

根据功能的不同，可以将组件大致的分为4类：

1. 简单组件

如按钮组件，只要按照wxml结构写就好了

<!-- example/btn/index.html -->

<view class="zan-btn">按钮</view>

2. 复杂组件

如加载更多组件，需要先引入定义好的模版，然后给模版传递数据

<!-- example/loadmore/index.html -->

<!-- 引入组件模版 -->
<import src="path/to/zanui-weapp/dist/loadmore/index.wxml" />

<!-- 加载中 -->
<template is="zan-loadmore" data="{{loading: true}}" />

<!-- 一条数据都没有 -->
<template is="zan-loadmore" data="{{nodata: true}}" />

<!-- 没有更多数据了 -->
<template is="zan-loadmore" data="{{nomore: true}}" />

3. 带事件回调的组件

如数量选择组件，需要先引入模版，然后给模版传递数据

<!-- example/stepper/index.html -->

<import src="path/to/zanui-weapp/dist/stepper/index.wxml" />

<template is="zan-stepper" data="{{ ...stepper, componentId: 'customId' }}" />

然后通过Zan.Stepper把相关回调注入到页面中

// example/stepper/index.js

var Zan = require('path/to/zanui-weapp/dist/index');

Page(Object.assign({}, Zan.Stepper, {
  data: {
    stepper: {
      stepper: 10,
      min: 1,
      max: 20
    },
  },

  handleZanStepperChange(e) {
    // 如果页面有多个Stepper组件，则通过唯一componentId进行索引
    var compoenntId = e.componentId;
    var stepper = e.stepper;

    this.setData({
      'stepper.stepper': stepper
    });
  }
}));

4. API类组件

如Toast组件，需要先引入模版，并在页面上使用。

注意zanToast这个数据也是通过Zan.Toast注入到页面的

<!-- example/toast/index.html -->

<import src="path/to/zanui-weapp/dist/toast/index.wxml" />

<view bindtap="showToast">显示toast</view>

<template is="zan-toast" data="{{ zanToast }}"></template>

将API注入到页面后，就可以通过this来直接调用相应的API了

<!-- example/toast/index.js -->

var Zan = require('path/to/zanui-weapp/dist/index');

Page(Object.assign({}, Zan.Toast, {
  showToast() {
    this.showZanToast('toast的内容');
  }
}));

更多示例可以在项目的example目录中查看

开源协议

本项目基于 MIT协议，请自由地享受和参与开源。

贡献

如果你有好的意见或建议，欢迎给我们提 issue 或 PR，为优化 ZanUI-Weapp 贡献力量