Skip to content
基于zanui-weapp移植的一套wepy界面框架
Branch: v2.4.4
Clone or download
Latest commit 9a7d5e5 Jan 27, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src 清除不需要的样式 Jan 27, 2018
.editorconfig init Jul 6, 2017
.eslintignore init Jul 6, 2017
.eslintrc.js init Jul 6, 2017
.gitignore init Jul 6, 2017
LICENSE init Jul 6, 2017
README.md
package.json Dashboard update Jan 18, 2018
wepy.config.js Dashboard update Jan 18, 2018
yarn.lock Dashboard update Jan 18, 2018

README.md

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>
You can’t perform that action at this time.