Prefacio:
Muchos amigos tienen dolor de cabeza cuando entran en contacto por primera vez con programas pequeños. Necesitan usar algunos paquetes npm. No saben cómo compilarlos. No es tan conveniente como vue y reaccionar. Simplemente npm instala el nombre del paquete y Puedes usarlo directamente a través de la importación . El siguiente artículo le brindará un ejemplo principalmente a través del marco vant comúnmente usado en mini programas WeChat y el paquete de marco pubsub-js comúnmente usado para la comunicación entre componentes de mini programas.
número de versión
1. Número de versión de la biblioteca base de depuración de la herramienta de desarrollador actual
2. Número de versión de vant y pubsub-js
1. Cree el archivo básico pageage.json del paquete npm
npm init
Si no hay nada que deba cambiar en este paso, simplemente siga presionando Enter.
2. Descarga pubsub-js
npm install pubsub-js
3. Modifique el archivo del directorio raíz del archivo: project.config.json
Nota: Todo lo demás permanece básicamente sin cambios, modificándose principalmente las siguientes posiciones:
Si la compilación inicial de esta ubicación es "srcMiniprogramRoot": "miniprogram/"
debe modificarse al siguiente formato, "compileType": "miniprogram" debe agregarse si no existe.
"srcMiniprogramRoot": "miniprogram_npm/",
"compileType": "miniprogram"
A continuación se muestra un archivo project.config.json de muestra que ha sido creado por un pequeño programa. Se le agregan archivos relacionados con el desarrollo en la nube. Puede eliminarlo si no lo necesita; de lo contrario, el programa puede informar un error.
El appid ha sido eliminado por mí. Necesitas usar tu appid personal.
{
"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. compilación npm
Este paso es una operación obvia. Los pasos principales son:
Seleccione la barra superior de WeChat Developer Tools-----> Herramientas------> Build npm
Una vez completada la compilación, se generarán los siguientes archivos en el directorio raíz. Puede ver que los archivos relacionados con pubsub-js ya están dentro. Preste atención a la estructura de nuestro proyecto; de lo contrario, se puede informar un error en el archivo app.json. no pudo ser encontrado.
5. Utilice pubsub-js
Las personas que han usado Vue o React deberían conocer muy bien este paso. Es relativamente simple. Solo tome una captura de pantalla y comprenderá. 1. Use
publicar para publicar el mensaje
. 2. Use la función de suscripción para suscribirse al mensaje.
Cuando se llama a publicar, también se llamará a suscripción inmediatamente. Mi escenario de uso personal aquí es un proyecto para una pequeña hada. Debe obtenerse a través de un pequeño programa donde el usuario hace clic para iniciar sesión en la interfaz de usuario y luego comienza a cronometrar el aprendizaje. y registrando el número de días, el openid del usuario
, y luego configura este openid en el app.js global. Por lo tanto, usar pubsub-js es el más simple y mucho más conveniente para configurar la comunicación entre varias páginas.
6. Construir marco vant
La dirección del marco vant del mini programa WeChat: https://vant-contrib.gitee.io/vant-weapp/#/home
El método de construcción básico es el mismo que pubsub-js, sin muchos cambios. El punto clave es que vant necesita establecer el alias del componente globalmente. Este archivo es el archivo app.json en el directorio raíz, que está al mismo nivel como tabBar. No lo escribas mal. ubicación. Vea la captura de pantalla.
Además, también necesita importar archivos de estilo relacionados con vant al wxss global. Consulte el ejemplo.
Ejemplo de código fuente del archivo app.json
{
"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"
}
Luego puede utilizar componentes relacionados globalmente; consulte el ejemplo básico
Todos los paquetes creados deberían verse como en la imagen siguiente. Tenga en cuenta que los nombres de sus carpetas principales son: miniprogram_npm
por fin
Eso es todo por ahora. Gracias por mirar.
En cuanto al método de construcción de otros paquetes npm, espero que este artículo pueda ayudarlo en su trabajo o estudio real.