基于zanui-weapp移植的一套wepy界面框架

基于zanui-weapp移植的一套wepy界面框架

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-demoyarn

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 文件至项目目录

页面中如下方式使用

封装样式组件

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

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

以"Capsule 胶囊"为例：

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

页面中如下方式使用

内部交互组件

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

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

以"Tab 标签"为例：

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

页面中如下方式使用

外部交互组件

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

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

以"Actionsheet 行动按钮"为例：

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

页面中如下方式使用

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。