Shulou(Shulou.com)05/31 Report--

The knowledge points of this article "how to achieve a WeChat Mini Programs dashboard component" are not quite understood by most people, so the editor summarizes the following contents for you. The content is detailed, the steps are clear, and it has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve a WeChat Mini Programs dashboard component" article.

The function of the component is still very simple, so let's preview the effect first:

If you are interested, look directly at the source code:

Https://github.com/tower1229/weapp-plugin-dashboard

The following is the process of stepping on the pit.

How to develop WeChat Mini Programs Custom components

Officially, a CLI tool is provided specifically for developing Mini Program custom components. First, install this tool globally:

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

Then use it to initialize a custom component project:

Miniprogram init-type custom-component

In this step, you will download a front-end project template to local. This template is a front-end automation project based on gulp. You need to install dependencies before using it:

Npm i

It's possible that you'll find, like me, that the default dependent version of this project is a little old, and then habitually upgrade and reinstall it with Npm Dependency in VSCode, and then you'll be stupid. The new babel plug-in will keep the project from running.

Restore to the default version and reinstall and start the development service:

Npm run watch

At this point, the automation project will build the code in src/ into the miniprogram_dev/ folder, which is a standard Mini Program directory structure that can be imported and run with Wechat developer tools. Be careful to use test appId when importing.

Then here we edit the source file in src, the other side will synchronize the build to miniprogram_dev, Wechat developer tool will automatically recompile the project if it detects file changes, which has been great so far.

But from my personal experience, there is something wrong with this automation project. I occasionally "lose" individual files for compilation, such as suddenly the style is gone, or the js compilation fails, then the js file is gone, and the Wechat developer tool will report an error.

Worst of all, the compilation process of the project integrates eslint code checking, which is not compiled without passing the js file, leaving developer tools to report errors. How abnormal is the default eslint configuration? At least it was an unforgettable experience for me. I spent the afternoon gnashing my teeth to find out what eslint error means and how to turn it off.

However, eslint also has some meaningful requirements. For example, I usually don't pass the second parameter of the parseInt () method, which is really not a good practice.

The use of canvas in Mini Program components

The worst problem encountered in the development process is that I didn't read the documents carefully, but I think the greater responsibility is that the official documents of Mini Program are too messy.

The wx.createCanvasContext () method for initializing canvas instances actually has two parameters, and the second parameter is usually not passed. This parameter needs to be passed only when it is used in the component. Canvas has never been used in the component before, resulting in forgetting that there is such a parameter and does not report an error. It took a long time to find out that canvas could not draw anything.

This situation can be reported as an error in the development tool, why not?

In the process of checking documents, I really feel that Mini Program's document organization is too TM chaotic, and the knowledge points are complete, but the knowledge points of the same thing are scattered everywhere. For example, if you look at the contents of [frame] this column alone, it is impossible for you to grasp what Mini Program framework is all about. Take a look at the Guide to get a general idea, and then look at the components and API before you can write a hello world project.

Let's talk about the development of custom components. The contents of each link of the interface, development, release and installation of custom components are scattered in different pages of [Framework], [Guide] and [tools]. That is, when you first developed a custom component, you need to flip through the whole document in order to find all the things I need to know.

Publish and install the NPM package

After the custom component is developed, it will be released to npm. The release process is the most enjoyable part of the whole process. There is no problem with the development environment test. Run the build command:

Npm run build

A miniprogram_dist/ folder will be generated, and the .gitignore and .npmfiles of the entire project will be preset. If you submit the code to GitHub, only the source code and necessary project files will be submitted; if you want to publish to npm, just execute it if you have logged in to npm:

Npm publish

The code will be released to npm in a format supported by Mini Program (including miniprogram_dist/), which can then be installed and used in other Mini Program projects.

It is a bit troublesome to install the npm package for Mini Program project.

First, execute in the Mini Program code root directory (the directory configured by miniprogramRoot in project.config.json):

Npm initnpm i weapp-plugin-dashboard-S-production / / here take the installation of the weapp-plugin-dashboard module as an example

This is the only way to install the module counts, at first I casually created a package.json file to write down the dependency package name, and then executed npm I, although the module was also downloaded, it will report an error in the next developer tool, indicating that the npm package cannot be found, probably because the package.json file is not standard, but the document does not tell what kind of package.json is the specification.

After installation, you will not see the node_modules/ directory in the developer tools, because Mini Program does not support these modules at this time and needs to be built again before you can use them.

First of all, open the npm module in the project configuration of the developer's tools, and then execute the "tools-build npm" operation. After success, a miniprogram_npm/ folder will be generated, which can be seen in the developer's tools. Only at this step can the npm package be installed successfully and can be called normally in the Mini Program project.

The above is about the content of this article on "how to implement a WeChat Mini Programs dashboard component". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.