Feature installation steps of Labrador, the WeChat mini program component development framework

Features

Using the Labrador framework can enable WeChat developer tools to support loading massive NPM packages

Supports ES6/7 standard code, and using async/await can effectively avoid callback hell

Component reuse, the WeChat applet framework is re-encapsulated, realizing component reuse and nesting

Automated testing, it is very easy to write unit test scripts, and automated testing can be done without any additional configuration

Use Editor Config and ESLint to standardize code style to facilitate team collaboration

Installation

First install Node.js and npm v3 in your system. Download Node.js, and then run the following The command will install the Labrador command line tool globally.

npm install -g labrador-cli

Initialize the project

mkdir demo           # 新建目录
cd demo              # 跳转目录
npm init             # 初始化npm包
labrador init        # 初始化labrador项目

Project directory structure

demo                 # 项目根目录├── .labrador        # Labrador项目配置文件├── .babelrc         # babel配置文件├── .editorconfig    # Editor Config├── .eslintignore    # ESLint 忽略配置├── .eslintrc        # ESLint 语法检查配置├── package.json
├── dist/            # 目标目录├── node_modules/
└── src/             # 源码目录
    ├── app.js
    ├── app.json
    ├── app.less
    ├── components/  # 通用组件目录
    ├── pages/       # 页面目录
    └── utils/

Note that all files in the dist directory are compiled and generated by the labrador command, please do not modify them directly

Configure development tools

After the project is initialized, use your favorite IDE such as WebStorm or Sublime to open the project root directory. Then open the WeChat web developer tool to create a new project, and select the dist target directory for the local development directory.

Development process

Edit the source code in the src directory in an IDE such as WebStorm or Sublime, then run the labrador build command in the project root directory to build the project, and then debug in the WeChat web developer tool Click the Restart button on the left menu in the interface to view the effect.

During our development, WeChat Web Developer Tools are only used for debugging and previewing. Do not modify the code in the editing interface of WeChat Web Developer Tools.

WeChat web developer tools will occasionally make errors, which are manifested as no response when clicking the Restart button, the debugging console outputs a large number of errors that cannot require files, and the code files are not displayed in the editing interface. This is because the labrador build command will update the entire dist directory, and the WeChat web developer tool will encounter exceptions when monitoring code changes. In this case, you only need to close the WeChat web developer tool and start it again.

We can also use the labrador watch command to monitor the code in the src directory and build it automatically when changes occur. There is no need to manually run labrador build every time after editing the code.

So the best posture is:

Run labrador watch in the project

Encode in WebStorm, save

Switch to WeChat web developer tools Debugging and previewing in WebStorm

Return to coding in WebStorm

The above is the detailed content of Feature installation steps of Labrador, the WeChat mini program component development framework. For more information, please follow other related articles on the PHP Chinese website!