ZanUI in WePY

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

这里是 ZanUI 在 WePY 中的移植。

体验步骤

1. 安装 wepy

本项目基于wepy开发，参考这里

yarn global add wepy-cli

2. 下载源代码

git clone https://github.com/brucx/wepy-zanui-demo.git

3. 安装开发依赖

cd wepy-zanui-demo
yarn

4. 编译源代码

wepy build

5.导入至开发者工具

编译完成后会生成dist目录，开发者工具本地开发目录指向dist目录。

切记： 取消勾选项目-->开启ES6转ES5，否则代码运行报错。

ZanUI-Wepy 组件的使用说明

目前 ZanUI-Wepy 一共有23个组件，分为纯样式组件、封装样式组件、内部交互组件、外部交互组件。具体组件接口可以参考 example 目录下的示例。

纯样式组件

纯样式组件只需引入相应的 .SCSS 样式文件，然后在项目中引用相应的样式类即可。

包含的组件有：Badge、Button、Card、Cell、Helper、Icon、Layout、Panel、Tag

以"Badge 徽章"为例：

复制 zanui/badge.scss 文件至项目目录

页面中如下方式使用

<style lang="css">
@import '/zanui/badge.wxss';
</style>

<template>
<view class="zan-badge">
  <view class="zan-badge__count">99+</view>
</view>
</template>

封装样式组件

封装样式组件需要引入 .WPY 组件文件，通过 Props 传入参数即可。

包含的组件有：Capsule、Loadmore、Steps

以"Capsule 胶囊"为例：

复制 components/zan-capsule.wpy 文件至项目目录

页面中如下方式使用

<template>
  <zanCapsule :options="zanCapsule" />
</template>

<script>
import wepy from 'wepy'
import zanCapsule from '../components/zan-capsule'

export default class Capsule extends wepy.page {
  components = {
    zanCapsule
  }
  data = {
    zanCapsule: {
      type: 'danger',
      leftText: '2折',
      rightText: '限购两份'
    }
  }
}
</script>

内部交互组件

内部交互组件需要引入 .WPY 组件文件，通过 Props 传入参数，组件通过事件向页面通信。

包含的组件有：Select、Stepper、Switch、Tab

以"Tab 标签"为例：

复制 components/zan-tab.wpy 文件至项目目录

页面中如下方式使用

<template>
  <zanTab :options="tab" componentId="tab" />
</template>

<script>
import wepy from 'wepy'
import zanTab from '../components/zan-tab'

export default class Capsule extends wepy.page {
  components = {
    zanTab
  }
  data = {
    tab: {
      list: [
        {
          id: 'all',
          title: '全部'
        },
        {
          id: 'topay',
          title: '待付款'
        },
        {
          id: 'tosend',
          title: '待发货'
        },
        {
          id: 'send',
          title: '待收货'
        },
        {
          id: 'sign',
          title: '已完成'
        }
      ],
      selectedId: 'all',
      scroll: false
    }
  }
  events = {
    zanTabChange({ selectedId }, event) {
      let { componentId } = event.source
      console.log('Page Tab receive selectedId:', componentId, selectedId)
      // 此处进行业务逻辑处理...
    }
  }
</script>

外部交互组件

外部交互组件需要引入 .WPY 组件文件，通过 Props 传入参数，页面可以主动调用组件方法，组件通过事件向页面通信。

包含的组件有：Actionsheet、Dialog、Field、Noticebar、Popup、Toast、Toptips

以"Actionsheet 行动按钮"为例：

复制 components/zan-actionsheet.wpy 文件至项目目录

页面中如下方式使用

<template>
  <button @tap="toggleActionsheet">
    Actionsheet
  </button>
  <zanTab :options="tab" componentId="tab" />
</template>

<script>
import wepy from 'wepy'
import zanActionsheet from '../components/zan-actionsheet'

export default class Capsule extends wepy.page {
  components = {
    zanActionsheet
  }
  methods = {
    toggleActionsheet() {
      this.$invoke('zanActionsheet', 'showZanActionsheet', {
        cancelText: '关闭 Action',
        closeOnClickOverlay: true,
        actions: [
          {
            type: 'first',
            name: '选项1',
            subname: '选项描述语1',
            className: 'action-class',
            asyncJob: function() {
              return new Promise((resolve, reject) => {
                setTimeout(() => {
                  resolve()
                }, 1500)
              }) // 可以接受一个异步任务作为参数
            }
          },
          {
            type: 'second',
            name: '选项2',
            subname: '选项描述语2',
            className: 'action-class',
          },
          {
            type: 'share',
            name: '去分享',
            openType: 'share'
          }
        ]
      })
        .then(result => {
          console.log(result.type)  // result.type 为点击选项的 type
        })
        .catch(e => {
          console.log('行动取消')
        })
    }
  }
</script>