xes-wxapp

微信小程序自定义 UI 组件，基于微信的 Component 封装

快速上手

在线教程文档

目录结构

├─ demo-tools      # 示例组件目录 
│  ├─ module-demo  # 开发组件样例
│  └─ example-demo # example项目组件页面样例
├─ dist            # 生产组件打包目录 
├─ docs            # xes-wxapp 项目组件使用说明文档
├─ example         # example 样例小程序文件
│  ├─ assets       # 静态资源
│  └─ dist         # 组件引用目录
│  └─ pages        # 页面组件示例目录
│  └─ utils        # 工具库
│  └─ app.js 
│  └─ app.json 
│  └─ app.wxss 
├─ screenshots     # 项目截图页面
├─ src             # 开发代码目录
│  ├─ assets       # 静态资源和共用css样式文件
│  ├─ page         # 各个组件页面
│  └─ index.js     # 组件入口
├─ .gitignore      # git库 上传需要忽略的配置文件
├─ .npmignore      # npm包 上传需要忽略的配置文件
├─ gulpfile.js     # gulp 构建工具目录
├─ package.json    # 项目依赖配置文件
└─ README.md       # 项目说明文档

已完成组件（点击跳转说明文档）

• button 按钮组件
• search 搜索框组件
• empty 缺省或空数据组件
• gallery 画廊组件
• list 列表组件
• slideshow 轮播图组件
• upload 图片上传组件
• result 结果页组件
• login 登录和注册页组件

开发指令说明

// 安装项目依赖
npm install
// 开发过程中，监听文件夹内容的改变，实时打包到 example/dist
npm run watch
// 开发新的组件 (module -- 组件的名称，已存在的会有提示)
npm run create module
// 打包代码到 example 样例小程序文件夹的dist
npm run dev 
// 打包到生产环境，发布代码
npm run build

使用之前

在开始使用之前，你需要先阅读 微信小程序自定义组件 的相关文档。

如何使用

通过 npm install xes-wxapp --save ,下载包到项目，然后 将dist/ 目录拷贝到自己的小程序项目中。按照如下的方式使用组件，以 Button 为例，其它组件在对应的文档页查看：

在 page.json 中引入组件

"usingComponents": {
  "xes-button": "../../dist/button/index"
}

在 page.wxml 中使用组件

<xes-button type="circle">circle</xes-button>
<xes-button type="small">small</xes-button>
<xes-button type="default">default</xes-button>