Foreword:
Many friends have a headache when they first come into contact with small programs. They need to use some npm packages. They don’t know how to build them. It is not as convenient as vue and react. Just npm install the package name and you can use it directly through import . . The following article will give you an example mainly through the vant framework commonly used in WeChat mini programs and the framework package pubsub-js commonly used for communication between mini program components.
version number
1. Current developer tool debugging base library version number
2. vant and pubsub-js version numbers
1. Build the basic file pageage.json of npm package
npm init
If there is nothing you need to change in this step, just keep pressing Enter.
2. Download pubsub-js
npm install pubsub-js
3. Modify the file root directory file: project.config.json
Note: Everything else remains basically unchanged, mainly modifying the following positions:
If the initial build of this location is "srcMiniprogramRoot": "miniprogram/"
needs to be modified to the following format, "compileType": "miniprogram" needs to be added if it does not exist.
"srcMiniprogramRoot": "miniprogram_npm/",
"compileType": "miniprogram"
Below is a sample project.config.json file that has been built by a small program. Cloud development-related files are added to it. You can delete it if you don’t need it, otherwise the program may report an error. The
appid has been deleted by me. You need to use your personal appid.
{
"cloudfunctionRoot": "cloudfunctions/",
"description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
"setting": {
"urlCheck": true,
"es6": false,
"enhance": true,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
"newFeature": false,
"coverView": true,
"nodeModules": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
"uglifyFileName": false,
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true,
"compileHotReLoad": true,
"lazyloadPlaceholderEnable": false,
"useMultiFrameRuntime": true,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"useIsolateContext": true,
"userConfirmedBundleSwitch": false,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"disableUseStrict": false,
"minifyWXML": true,
"showES6CompileOption": false,
"useCompilerPlugins": false,
"ignoreUploadUnusedFiles": true,
"useStaticServer": true
},
"compileType": "miniprogram",
"cloudfunctionTemplateRoot": "cloudfunctionTemplate/",
"condition": {
},
"editorSetting": {
"tabIndent": "insertSpaces",
"tabSize": 5
},
"libVersion": "2.24.0",
"packOptions": {
"ignore": [],
"include": []
},
"appid": "your appid",
"srcMiniprogramRoot": "miniprogram_npm/"
}
4. npm build
This step is a no-brainer operation. The main steps are:
Select the top bar of WeChat Developer Tools-----> Tools------> Build npm
After the build is completed, the following files will be generated in the root directory. You can see that the pubsub-js related files are already inside. Pay attention to our project structure, otherwise an error may be reported that the app.json file cannot be found.
5. Use pubsub-js
People who have used Vue or React should know this step very well. It is relatively simple. Just take a screenshot and you should understand. 1.
Use publish to publish the message
. 2. Use the subscribe function to subscribe to the message.
When publish is called, subscribe will also be called immediately. My personal usage scenario here is a project for a little fairy. It needs to be obtained through a small program where the user clicks to log in on the user interface and then starts timing learning and recording the number of days. The user's openid
, and then set this openid to the global app.js. Therefore, using pubsub-js is the simplest, and it is much more convenient to set up communication between various pages.
6. Build vant framework
The vant framework address of WeChat mini program: https://vant-contrib.gitee.io/vant-weapp/#/home
The basic construction method is the same as pubsub-js, without much change. The key point is that vant needs to set the alias of the component globally. This file is the app.json file in the root directory, which is at the same level as tabBar. Don’t put it wrong. location. See the screenshot.
In addition, you also need to import vant-related style files into the global wxss. Please see the example.
app.json file source code example
{
"pages": [
"pages/index/index",
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "诗词歌赋",
"navigationBarTextStyle": "black",
"onReachBottomDistance": 0,
"enablePullDownRefresh": true
},
"sitemapLocation": "sitemap.json",
"tabBar": {
"color": "#bfbfbf",
"selectedColor": "#000",
"backgroundColor": "#fff",
"borderStyle": "white",
"list": [
},
"usingComponents": {
"van-button": "@vant/weapp/button/index",
"van-nav-bar": "@vant/weapp/nav-bar/index",
"van-tab": "@vant/weapp/tab/index",
"van-tabs": "@vant/weapp/tabs/index",
"van-transition": "@vant/weapp/transition/index",
"van-tree-select": "@vant/weapp/tree-select/index",
"van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
"van-dropdown-item": "@vant/weapp/dropdown-item/index",
"van-notify": "@vant/weapp/notify/index",
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index",
"van-empty": "@vant/weapp/empty/index",
"van-collapse": "@vant/weapp/collapse/index",
"van-collapse-item": "@vant/weapp/collapse-item/index",
"van-search": "@vant/weapp/search/index",
"van-row": "@vant/weapp/row/index",
"van-col": "@vant/weapp/col/index",
"van-image": "@vant/weapp/image/index",
"van-loading": "@vant/weapp/loading/index",
"van-icon": "@vant/weapp/icon/index",
"van-sticky": "@vant/weapp/sticky/index",
"van-field": "@vant/weapp/field/index"
},
"lazyCodeLoading": "requiredComponents"
}
Then you can use related components globally, please see the basic example
All the built packages should look like the picture below. Note that their parent folder names are: miniprogram_npm
at last
That’s it for now. Thank you for watching.
As for the construction method of other npm packages, I hope this article can help you in your actual work or study.