wx-miniprogram-boilerplate

Development workflow of wechat applets based on Gulp

Applicable scenario

At present, there are about four technical solutions for the development of wechat small programs, which are:

  1. Wechat small program native development
  2. Use the WEpy framework
  3. Use the MPVue framework
  4. Use the Taro Framework

Each of the three development schemes has its advantages and disadvantages. However, many features and functions added to small programs, such as WXS modules, custom components, and plug-ins, cannot be used under the control of third-party frameworks.

However, the development mode of native applets is too simple. In terms of style, students who are used to writing less, Stylus and Sass cannot tolerate the writing style of WXSS. Based on this, we decide to use gulP automatic tool to build a basic template for wechat applets development. Can also use less to write styles, while adding image compression, command line quickly create templates and other features, so development, quick zai, quick zai!

Making start

features

  • Based on thegulp+lessThe construction of wechat small program engineering project
  • Automatic compression of project images
  • ESLint code checking
  • Use the command line to quickly createpage,templateandcomponent

Getting Started

0. Before starting, ensure that node and NPM have been installed, and gulp cli has been installed globally
$ npm install --global gulp-cli
Copy the code
1. Download the code
$ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git
Copy the code
2. Access the directory and install dependencies
$ cd wx-miniprogram-boilerplate && npm install
Copy the code
3. Compile the code to generate the dist directory and use developer tools to open the dist directory
$ npm run dev
Copy the code
4. Create a Page, template, or Component
Gulp auto -p mypage Creates a page file named mypage. Gulp auto -t mytpl Creates a template file named mytpl Create a component file named gulp Auto named myComponent-sIndex -p mypage Copies the files in pages/index to create a page named mypageCopy the code
5. Compile the code before uploading it
$ npm run build
Copy the code
6. Upload code, review and release

Engineering structure

│ ├─ SRC │ ├─ Components │ ├─ WX-MiniProgram - BoilerPlate ├─ dist │ ├─ SRC │ ├─ SRC │ ├─ │ ├─ Pages │ ├─ styles │ ├─ images │ ├─ Pages │ ├─ styles │ ├─ Public Style │ ├─ Template │ ├── all // Public js files │ ├─ app.js │ ├─ app.json │ ├─ less │ ├─ project.config.json // ├─ ├─ download.txt └─ ├─ download.txt └─ ├─ download.txt └─ ├─ download.txtCopy the code

Gulp instructions

Tasks: Clean Clean output directory WXML compile WXML file (just copy) js Compile JS file, Json Compiles JSON files (only copy) WXSS compiles less files compiles compressed image files for WXSS IMG Watch listens for development file changes Auto Gulp Auto automatically creates a page from a template,template or Component (a widget custom component)-s, -- SRC copy template [string] [Default:"_template"] -p, --page Generated page name [string] -t, --template generated template name [string] -c, --component Generated Component name [string] -- MSG displays help message [Boolean] Example: Gulp auto -p mypage Creates a page file named mypage. Gulp auto -t mytpl Creates a template file named mytpl Create a component file named gulp Auto named myComponent-sIndex -p mypage Copies the files in pages/index to create a page named mypageCopy the code

Q&A

Q: Why are js conversions, style completion and code compression not included in the workflow? A: Wechat developer tools have Babel functions such as converting ES6 to ES5, style completion and JS code compression, which are not added in this workflow.

Q: _template: what is the use of files in the Q: _template directory? A: Run the gulp auto command to automatically generate files. The -s parameter specifies the copy object. By default, files in the _template folder under the corresponding directory are copied. Developers can customize files under _template based on business requirements.

Will files in the Q: _template directory be compiled to the dist directory? A: no.

TODO

  • [x] Code comments
  • [x] normalizes the command line
  • [x] eslint
  • [] Introduce common CSS libraries such as Weui

The last

It will be updated continuously, if there are new suggestions, please create an Issue or send PR, thank you for your support and contribution.