Developing Third-party Custom Component

From Mini Program base library version 2.2.1 and later, npm can be used to install a third-party package. Therefore, the development and use of third-party custom component packages are also supported. For details on npm functionality, see relevant documentation.

Preparations

To develop an open-source custom component package for others to use, you need to first clarify how others are going to use the package. You can skip this documentation if you just want to copy it directly from the Mini Program directory. The following part in this documentation is explained on the premise that the npm manages a custom component package.

Before starting development, developers need to have a basic knowledge of node.js and npm, and to download Weixin DevTools that supports npm features.

Downloading Template

To help developers quickly build a custom component package project to be used for development, debugging, and testing, Weixin provides an official project template. There are three ways to download and use the template:

  • Download the zip file directly from GitHub and unzip it.
  • Directly clone a repository on GitHub.
  • Initialize the project with the official command line tool, as described below.

In the template, the project is built based on gulp + webpack and commands such as develop, build, and test are supported. Refer to README.md of the project template for details.

Command Line Tool

Weixin provides an official command line tool to initialize a project quickly. Execute the following command to install the command line tool:

npm install -g @wechat-miniprogram/miniprogram-cli

Then, create an empty directory as the project root directory, and execute the following command in this root directory:

miniprogram init --type custom-component

After the command has been executed, many files are generated in the project root directory. This is a complete project generated according to the official project template, based on which developers can perform development and make modifications.

For more information on how to use the command line tool, see the README.md documentation in the GitHub repository.

Note: When using miniprogram init to initialize a project for the first time, you need to go to GitHub to fetch the template. Remember to ensure a stable network connection.

Testing Tool

For information on unit testing for custom components, see Unit Testing.

Custom Component Examples

The following custom components provided by Weixin are available for reference and use:

Custom Component Extension Example

The following custom component extension provided by Weixin is available for reference and use: