ZanUI for WeApp 为微信小程序量身设计

概述

ZanUI WeApp 是一套用于微信小程序开发的基础UI组件库，由有赞官方提供，结合了微信的视觉规范，为用户提供更加统一的使用感知。包含 btn、card、cell、icon、tab 等各式元素

下载

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

预览

用微信web开发者工具打开项目目录

使用

首先引入样式文件，我们推荐在你的app.wxss直接引入zanui-weapp/dist/index.wxss。

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

简单组件

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

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

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

复杂组件

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

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

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

<!-- 使用组件 -->
<template is="zan-loadmore" data="{{loading: true}}" />

带事件回掉的组件

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

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

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

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

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

// example/quantity/index.js

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

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

  handleZanQuantityChange(e) {
    // 如果页面有多个Quantity组件，则通过componentId来表示唯一
    var compoenntId = e.componentId;
    var quantity = e.quantity;

    this.setData({
      [`quantity.quantity`]: quantity
    });
  }
}));

API类组件

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

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

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

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

<view bindtap="showToast">showToast</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 贡献力量

3.5 KiB Raw Blame History Unescape Escape

ZanUI for WeApp 为微信小程序量身设计

概述

下载

预览

使用

协议

贡献

3.5 KiB

Raw Blame History