103

GitHub - youzan/zanui-weapp: 高颜值、好用、易扩展的微信小程序 UI 库，Powered by...

 6 years ago
source link: https://github.com/youzan/zanui-weapp
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

有赞logo

项目logo

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

概述

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

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

ZanUI-WeApp 演示

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

下载

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

预览

  1. 在 zanui-weapp 根目录下运行
# 安装项目依赖
npm install
# 执行组件编译
npm run dev
  1. 打开微信web开发者工具，'本地小程序项目 - 添加项目'，把 zanui-weapp/example 目录添加进去就可以预览示例demo了。

使用

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

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

详细使用文档，请参考 快速上手

组件分类介绍

根据功能的不同，可以将组件大致的分为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 贡献力量


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK