# 锡慧在线小程序模板

**Repository Path**: XueDingMiaoJun/xhzx-mp-boilerplate

## Basic Information

- **Project Name**: 锡慧在线小程序模板
- **Description**: 基于Gulp构建的微信小程序开发工作流
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2019-07-31
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 锡慧在线小程序模板

#### 介绍
基于Gulp构建的微信小程序开发工作流,可以基于锡慧在线快速生成类似教育小程序  

#### 安装教程

1. 下载  
git clone https://gitee.com/XueDingMiaoJun/xhzx-mp-boilerplate.git
2. 安装依赖  
cd xhzx-mp-boilerplate && npm install
3. 编译代码，生成dist目录，使用开发者工具打开dist目录  
npm run dev （开发环境打包）
npm run test (测试环境打包)

#### 使用说明

1. 新建page、template或者component  
gulp auto -p test_page           创建名为test_page的page文件  
gulp auto -t tpl            创建名为tpl的template文件  
gulp auto -c component      创建名为component的component文件  
gulp auto -s index -p test_page  复制pages/index中的文件创建名称为test_page的页面  

2. 上传代码前编译  
npm run build  

3. 目录说明  
xhzx-mp-boilerplate  
├── dist         // 编译后目录  
├── node_modules // 项目依赖  
├── src   
│    ├── component // 微信小程序自定义组件  
│    ├── env        // 请求域名配置  
│    ├── images     // 页面中的图片  
│    ├── icon     // 页面中的icon  
│    ├── pages      // 小程序page文件  
│    ├── utils      // 公共js文件  
│    ├── app.js  
│    ├── app.json  
│    ├── app.scss  
│    ├── project.config.json // 项目配置文件  
│    └── api.js       // 项目api接口配置  
├── .gitignore  
├── .eslintrc.js  
├── package-lock.json  
├── package.json  
└── README.md 

4. Gulp说明  

Tasks:
  dev              开发编译，同时监听文件变化  
  test             整体编译，请求指向测试环境  
  build            整体编译  

  clean            清空产出目录  
  wxml             编译wxml文件（仅仅copy）  
  js               编译js文件，同时进行ESLint语法检查  
  json             编译json文件（仅仅copy）  
  wxss             编译less文件为wxss  
  img              编译压缩图片文件  
  watch            监听开发文件变化  
  devEnv/testEnv/prodEnv 生成对应环境的请求域名配置  

  auto             自动根据模板创建page,template或者component(小程序自定义组件)  

gulp auto 

选项：
  -s, --src        copy的模板                     [字符串] [默认值: "_template"]  
  -p, --page       生成的page名称                                       [字符串]  
  -t, --template   生成的template名称                                   [字符串]  
  -c, --component  生成的component名称                                  [字符串]  
  --msg            显示帮助信息                                           [布尔]  

5.锡慧在线小程序配置说明  
- 下载之后请进入项目根目录执行命令gulp build  
- 开发者工具选择项目根目录,导入项目  
- 开发者工具-详情-本地设置勾选不校验合法域名、ES6转ES5  

**环境切换**  
1.开发环境:  
gulp devMode  

2.生产环境:  
gulp prodMode