wx miniprogram boilerplate Download - wx miniprogram boilerplate Source code download

wx miniprogram boilerplate

AI Source Code

1.0.0

Download

️ illustrate

️ ️ ️ Updates have been stopped. It is for learning reference only. It is recommended to use other mature small program development frameworks.

wx-miniprogram-boilerplate

WeChat applet development workflow based on Gulp

The development model of native small programs is too simple. In terms of style, students who are used to writing less, stylus and sass will not be able to tolerate the writing method of wxss. Based on this, I decided to use gulp automation tools to build a set of WeChat small program development. The basic template, while fully retaining the functions and features of the WeChat applet, can also use less to write styles. At the same time, it also adds features such as image compression and quick command line creation of templates to improve development efficiency!

characteristic

WeChat mini program project based on gulp+less
Automatic compression of project images
ESLint code inspection
Quickly create page , template and component using the command line
Support production environment packaging

Getting Started

0. Before starting, please ensure that node and npm have been installed, and gulp-cli is installed globally.

 $ npm install --global gulp-cli

1. Download the code

 $ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git

2. Enter the directory and install dependencies

 $ cd wx-miniprogram-boilerplate && npm install

3. Compile the code, generate the dist directory, and use developer tools to open the dist directory.

 $ npm run dev （开发环境打包）
$ npm run test (测试环境打包)

4. Create a new page, template or component

  gulp auto -p mypage           创建名为mypage的page文件
  gulp auto -t mytpl            创建名为mytpl的template文件
  gulp auto -c mycomponent      创建名为mycomponent的component文件
  gulp auto -s index -p mypage  复制pages/index中的文件创建名称为mypage的页面

5. Compile before uploading code

 $ npm run build （生产环境打包）

6. Upload code, review, and release

engineering structure

 wx-miniprogram-boilerplate
├── dist         // 编译后目录
├── node_modules // 项目依赖
├── src 
│    ├── components // 微信小程序自定义组件
│    ├── env        // 请求域名配置
│    ├── images     // 页面中的图片和icon
│    ├── pages      // 小程序page文件
│    ├── styles     // ui框架，公共样式
│    ├── template   // 模板
│    ├── utils      // 公共js文件
│    ├── app.js
│    ├── app.json
│    ├── app.less
│    ├── project.config.json // 项目配置文件
│    └── api.config.js       // 项目api接口配置
├── .gitignore
├── .eslintrc.js
├── package-lock.json
├── package.json
└── README.md

Gulp description

 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            显示帮助信息                                           [布尔]

示例：
  gulp auto -p mypage           创建名为mypage的page文件
  gulp auto -t mytpl            创建名为mytpl的template文件
  gulp auto -c mycomponent      创建名为mycomponent的component文件
  gulp auto -s index -p mypage  复制pages/index中的文件创建名称为mypage的页面

Q&A

Q: Why are js conversion, style completion and code compression not included in the workflow?
A: WeChat developer tools come with babel's functions of converting ES6 to ES5, style completion, and js code compression. No additional additions are required in this workflow.
Q: What are the uses of the files in the _template directory?
A: Use the gulp auto command to automatically generate files. The -s parameter can specify the copy object. By default, the files in the folder in the corresponding directory are _template as the copy object. Developers can customize the files under _template according to business needs.
Q: Will the files in the _template directory be compiled into dist directory?
A: No.