Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brucx/wepy-zanui-demo
基于zanui-weapp移植的一套wepy界面框架
https://github.com/brucx/wepy-zanui-demo
Last synced: about 2 months ago
JSON representation
基于zanui-weapp移植的一套wepy界面框架
- Host: GitHub
- URL: https://github.com/brucx/wepy-zanui-demo
- Owner: brucx
- License: mit
- Created: 2017-07-06T07:51:38.000Z (over 7 years ago)
- Default Branch: v2.4.4
- Last Pushed: 2018-05-10T08:09:50.000Z (over 6 years ago)
- Last Synced: 2024-08-03T21:03:03.859Z (5 months ago)
- Language: CSS
- Size: 144 KB
- Stars: 240
- Watchers: 10
- Forks: 47
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-wepy - wepy-zanui-demo：基于zanui-weapp移植的一套wepy界面框架
README
# ZanUI in WePY
[ZanUI](https://github.com/youzan/zanui-weapp) 有赞移动 Web UI 规范 ZanUI 的小程序现实版本，结合了微信的视觉规范，为用户提供更加统一的使用感受。
这里是 ZanUI 在 WePY 中的移植。
## 体验步骤
### 1. 安装 wepy
本项目基于wepy开发，[参考这里](https://github.com/wepyjs/wepy)
```bash
yarn global add wepy-cli
```
### 2. 下载源代码
```bash
git clone https://github.com/brucx/wepy-zanui-demo.git
```
### 3. 安装开发依赖
```bash
cd wepy-zanui-demo
yarn
```
### 4. 编译源代码
```bash
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` 文件至项目目录
页面中如下方式使用
```Vue
@import '/zanui/badge.wxss';
99+
```
## 封装样式组件
封装样式组件需要引入 .WPY 组件文件，通过 Props 传入参数即可。
包含的组件有：Capsule、Loadmore、Steps
以"Capsule 胶囊"为例：
复制 `components/zan-capsule.wpy` 文件至项目目录
页面中如下方式使用
```Vue
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: '限购两份'
}
}
}
```
## 内部交互组件
内部交互组件需要引入 .WPY 组件文件，通过 Props 传入参数，组件通过事件向页面通信。
包含的组件有：Select、Stepper、Switch、Tab
以"Tab 标签"为例：
复制 `components/zan-tab.wpy` 文件至项目目录
页面中如下方式使用
```Vue
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)
// 此处进行业务逻辑处理...
}
}
```
## 外部交互组件
外部交互组件需要引入 .WPY 组件文件，通过 Props 传入参数，页面可以主动调用组件方法，组件通过事件向页面通信。
包含的组件有：Actionsheet、Dialog、Field、Noticebar、Popup、Toast、Toptips
以"Actionsheet 行动按钮"为例：
复制 `components/zan-actionsheet.wpy` 文件至项目目录
页面中如下方式使用
```Vue
Actionsheet
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('行动取消')
})
}
}
```