小程序商城UI组件库

wx-mall-components

最近很久没有更新文章了，在开源一个商城UI组件库，将日常商城用到的一些组件整合打包整理出来，供大家使用，组件库还在完善当中，希望大家可以来一起维护。

项目地址

https://github.com/csonchen/wx-mall-components

技术

1. pug # 编写静态模板
2. stylus # 编写样式
3. gulp # 文件编译，复制操作等

启动

# 安装&开发阶段

npm install (cnpm install)

npm run start

# 小程序调试阶段

打开“小程序开发者工具”，选择“导入项目”，选中 dist 目录

四大模块

目前根据实际情况拆成四大组件版块，分别如下:

1. 基础组件
2. 交互组件
3. 表单组件
4. 业务组件

目录结构

     wx-mall-components 微信小程序商城组件库
    
    ./dist  # 编译后的小程序文件目录存放路径

    ./src
    ├── app.js
    ├── app.json
    ├── app.styl
    ├── components  # 组件存放路径
    │   ├── card-swiper
    │   │   ├── card-swiper.js
    │   │   ├── card-swiper.json
    │   │   ├── card-swiper.pug
    │   │   └── card-swiper.styl
    │   ├── date-picker
    │   ├── dropdown-select
    │   ├── form-input
    │   ├── search
    │   └── toast
    ├── images
    ├── node_modules
    ├── package.json
    ├── pages  # 页面存放路径
    │   ├── cardSwiperPage
    │   │   ├── cardSwiperPage.js
    │   │   ├── cardSwiperPage.json
    │   │   ├── cardSwiperPage.pug
    │   │   ├── cardSwiperPage.styl
    │   │   └── doc.js   # 组件说明文档
    │   ├── datePickerPage
    │   ├── dropdownSelectPage
    │   ├── index
    │   ├── inputPage
    │   ├── richTextPage
    │   ├── searchPage
    │   └── toastPage
    ├── sitemap.json
    ├── styles  # 公用样式
    │   ├── define.styl  # 定义变量
    │   ├── flex.styl  # flex布局
    │   ├── framework.styl  # 框架定义
    │   ├── normal.styl  # 字体，边距等
    │   └── plugin.styl  # 三角形，下三角等插件定义
    └── templates  # 公用模板文件
        └── pageHead.pug

示例

小程序码