ZanUI in WePY
ZanUI 有赞移动 Web UI 规范 ZanUI 的小程序现实版本，结合了微信的视觉规范，为用户提供更加统一的使用感受。
这里是 ZanUI 在 WePY 中的移植。
体验步骤
1. 安装 wepy
本项目基于wepy开发，参考这里
yarn global add wepy-cli2. 下载源代码
git clone https://github.com/brucx/wepy-zanui-demo.git3. 安装开发依赖
cd wepy-zanui-demo
yarn4. 编译源代码
wepy build5.导入至开发者工具
编译完成后会生成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>