1. The mini program itself has a set of scaffolding called @wechat-miniprogram/miniprogram-cli. We use this set of scaffolding to build our own components and publish them to the npm official website
wechat-miniprogram / miniprogram-cli GitHub 官 网
2. Create a new folder MeBtn on the desktop
3. Open the folder Open the cmd terminal in the folder, install wechat-miniprogram/miniprogram-cli globally
4.'After the installation is successful, the corresponding folder can be found
View the corresponding instructions through the command miniprogram --help
5. init initialization instruction
6. miniprogram init --type MeBtn to create a project named MeBtn and press Enter directly. . .
Template for MeBtn component
7. Dependency installation in package.json file-----------install dependencies npm install
Delete unnecessary asking prices in the src directory. Other is a component referenced in the template. Delete
8. Create your own button in index.wxml
9. Execute gulp in cmd and press Enter (install gulp, otherwise it is not a command that cannot be executed)
10. Verification:
-
In testing the use of third-party components vant-weapp article WeChat applet
-
The folder mybutton created under the miniprogram_npm folder
-
Copy the files in MeBtn\miniprogram_dist to the folder mybutton in the demo
-
Introduced in pages---> index.json
-
Use in pages---->index.wxml
11. Publish Enter the project (create a new folder bjwdbtn to copy all files in the test project) Delete the node_modules folder (reinstall when it is too big to use)
12. Log in to your npm account
If it is Taobao mirror, you need to modify C:\Users\bai
Mirror correctly
12. Publish npm publish
- Note that the file name needs to be standardized when publishing (it seems that there can be no capital letters, I have failed several times) The last successful file is named bjwdbtn
- The name in the package-lock.json file in the project needs to be the same as the file name bjwdbtn, otherwise the release is unsuccessful
- The name in the package.json file in the project needs to be the same as the file name bjwdbtn, otherwise the release is unsuccessful
13, view
