Tecnología de desarrollo de aplicaciones multiterminal

No puedo salir durante este período, así que planeo escribir una aplicación para administrar estudiantes y cursos. Después de unos días de selección técnica, he compilado este documento para que los estudiantes lo aprendan y lo consulten. Una base de programa sólida y buenos pensamientos de programación, dominio de las tecnologías necesarias, familiaridad con los marcos aplicables, ciertas capacidades de procesamiento de imágenes y texto, diseño funcional meticuloso, hábitos de prueba del paciente, gestión autodisciplinada del progreso del proyecto, tiempo fijo continuo y música en movimiento. para que pueda comenzar felizmente a crear aplicaciones independientes ~(^ _*)Pila de tecnologíahtml css javascriptNodeJs React ReduxTaro TaroUI DvaJS TypeScript ScssJest ESLint JSDoc Gitwx wxCloud herramientas de desarrollo vscode WeChat catálogo de herramientas para desarrolladores página web tecnología básica HTML lenguaje de marcado de hipertexto CSS hoja de estilo en cascada JavaScript script lenguaje lenguaje js y programación funcional estándar función pura función Curry, función generadora de datos inmutables, función asíncrona, tecnología avanzada de páginas web, lenguaje de descripción de interfaz en JSX, React, superconjunto de sintaxis JS estricta de TypeScript, preprocesamiento SASS/SCSS, superconjunto de marco de aplicación CSS , NodeJs, motor cross-end que utiliza JS, marco de interfaz de usuario de React Marco de interfaz de usuario de aplicación móvil nativa Flutter Marco de interfaz de usuario de desarrollo multiterminal de Taro TaroUI Marco de interfaz de usuario basado en Taro AntDesign Biblioteca de componentes de interfaz de usuario basada en React Redux Biblioteca de gestión de estado basada en Reactr Herramienta de desarrollo de marco de flujo de datos basado en redux DvaJS Complemento ESLint Herramienta de detección de código JS Marco de pruebas Jest Herramienta de gestión de versiones de código Git Herramienta de generación de documentos de anotación jsDoc Marco de plataforma wx subprograma WeChat wxCloud Desarrollo en la nube WeChat otras herramientas Plataforma de gestión de producción de iconos Red de combinación de colores tecnología de servidor Base de datos distribuida Mongoose referencia de desarrollo de proyectos manual del desarrollador página web tecnología básica MDNTecnología de desarrollo web HTML super Lenguaje de marcado de texto Ayuda MDNHTML El lenguaje de marcado de hipertexto (HTML, HyperTextMarkupLanguage) se utiliza para describir y definir el contenido de la página web. Hojas de estilos en cascada CSS Ayuda de MDNCSS Las hojas de estilos en cascada (CSS, CascadingStyleSheets) se utilizan para describir la apariencia y visualización del contenido web. Lenguaje de scripting JavaScript Lenguaje js y ayuda estándar de JavaScript MDN JavaScript es un lenguaje de programación que se ejecuta en el navegador. Puede agregar interactividad y otras características dinámicas a su sitio web o aplicación. Con la llegada de Node.js, también puedes ejecutar JavaScript en el servidor. Programación funcional Tutorial de introducción a la programación funcional - Ruan Yifeng JS Guía de programación funcional - Descargar PDF Función pura ¿Qué es una función pura y por qué deberíamos usar funciones de curry [Traducción] Curry en JavaScript (CurryinginJavaScript) no es posible Explicación detallada de datos variables inmutables? desde datos de referencia hasta copias profundas y datos inmutables. Este es el progreso de la convocatoria y la mejora de la optimización. Función generadora MDNfunction* ayuda a la función asincrónica MDNasyncfunction ayuda a que la tecnología de páginas web avance JSX Lenguaje de descripción de interfaz en React Sitio web oficial de React - JSXJSX es una extensión de sintaxis de JavaScript utilizada en la arquitectura React. Su formato se parece más a un lenguaje de plantilla, pero en realidad es completamente. Se implementa dentro de JavaScript. Los elementos son la unidad más pequeña que constituye una aplicación React. JSX se usa para declarar elementos en React usa JSX para describir la interfaz de usuario. TypeScript es un superconjunto de sintaxis JS estricta. Documento chino TypeScript. TypeScript es un lenguaje de programación multiplataforma de código abierto desarrollado por Microsoft.

Es un superconjunto de JavaScript y eventualmente se compilará en código JavaScript. TypeScript agrega un sistema de tipos estáticos opcional y muchas características nuevas de ECMAScript que aún no se han lanzado oficialmente. Preprocesamiento de SASS/SCSS CSS es un superconjunto del sitio web oficial chino de SASS. SASS es un lenguaje de preprocesamiento de CSS escrito en lenguaje buby. Es una herramienta auxiliar para fortalecer CSS y agrega características adicionales basadas en la sintaxis de CSS. funciones como variables, nestedrules, mixins, extend e inlineimports, estas extensiones hacen que CSS sea más potente y elegante. SCSS es una nueva sintaxis introducida por Sass3. Su sintaxis es totalmente compatible con CSS3 y hereda las poderosas funciones de Sass. Es decir, cualquier hoja de estilo CSS3 estándar es un archivo SCSS válido con la misma semántica. SCSS requiere punto y coma y llaves en lugar de saltos de línea y sangría. SCSS no es sensible a los espacios en blanco. De hecho, tiene la misma sintaxis que css3 y su sufijo es .scss. El marco de aplicación NodeJs utiliza la red china nodejs del motor cross-end de JS. Node.js es un tiempo de ejecución de JavaScript basado en el motor ChromeV8. Node.js utiliza un modelo de E/S sin bloqueo y controlado por eventos. Node es una plataforma de desarrollo que permite ejecutar JavaScript en el lado del servidor. Optimice algunos casos de uso especiales y proporcione API alternativas para que V8 funcione mejor en entornos sin navegador. El motor V8 ejecuta Javascript muy rápidamente y tiene muy buen rendimiento. Se utiliza para crear fácilmente aplicaciones de red con respuesta rápida y fácil expansión. Node utiliza un modelo de E/S sin bloqueo y controlado por eventos para ser liviano y eficiente, lo que lo hace ideal para ejecutar aplicaciones en tiempo real con uso intensivo de datos en dispositivos distribuidos. Sitio web oficial de nodejs##nodo#Instalación global n$npminstall-gn#Actualizar a la última versión estable$nstable#Actualizar a la última versión$nlatest#Actualizar a la versión personalizada$nv7.10.0#Cambiar a la versión $n7.10.0 (ENTER)$nrm7 .10.0#Eliminar la versión especificada $nrm7.10.0#Usar la versión especificada para ejecutar el script $nuse7.10.0some.js##npm#Actualizar npm$npminstall-gnpm#Ver versión de npm$npm-v #Actualizar cnpm$npm-gicnpm# Ver la versión de cnpm $cnpm-v# Acerca de la función de package.jsonpackage-lock.json Marco de interfaz de usuario de React Sitio web oficial de React React se originó a partir del proyecto interno de Facebook Es una biblioteca de JavaScript utilizada para. construye interfaces de usuario y también es la capa de visualización de aplicaciones web. Marco de interfaz de usuario de la aplicación móvil nativa de Flutter Sitio web oficial de Flutter Flutter es el marco de interfaz de usuario móvil de Google, que puede crear rápidamente interfaces de usuario nativas de alta calidad en iOS y Android. Flutter puede funcionar con código existente. Cada vez más desarrolladores y organizaciones de todo el mundo utilizan Flutter, y Flutter es completamente gratuito y de código abierto. Marco front-end de desarrollo multiterminal de Taro Documento oficial de Taro Taro es un conjunto de soluciones de desarrollo multiterminal que siguen las especificaciones de sintaxis de React. Solo puede escribir un conjunto de código y luego usar la herramienta de compilación de Taro para compilar el código fuente por separado y compilarlo en diferentes terminales (WeChat/Baidu/Alipay/ByteDance/QQ/JD Mini Programs, Quick Apps, H5, React-Native , etc.) para ejecutar el código.

Requiere entorno de nodo (gt;=8.0.0)#Use npm para instalar CLI$npminstall-g@tarojs/cli#O instale cnpm, use cnpm para instalar CLI$cnpminstall-g@tarojs/cliUse el comando para crear un proyecto de plantilla $taroinitmyAppWeChat Mini compilación y empaquetado del programa #npmscript$npmrundev:weapp$npmrunbuild:weapp#Solo instalación global$tarobuild--typeweapp--watch$tarobuild--typeweappNota: la versión global de Taro debe ser coherente con la versión del proyecto#Actualizar versión global#taroupdateself [versión]$taroupdateself#Actualizar versión del proyecto#taroupdateproject[versión]$taroupdateprojectError: UnhandledPromiseRejectionWarning: Error: Cannotfindmodule'autoprefixer'UnhandledPromiseRejectionWarning: Error:Cannotfindmodule'webpack-sources'Solución: Simplemente instale los módulos faltantes anteriores. Programación asincrónica Configuración del entorno de programación asincrónica de Taro $npmibabel-plugin-transform-runtime-D$npmibabel-runtime "Taro Framework: Creación de miniprogramas WeChat" Instalación de la versión Taro1.x @tarojs/async-await (no es necesario para 2.0 y superior): $npmi @tarojs/async-await--savecomponentWillMount(){Taro.request({url:'ponentWillMount(){constresponse=awaitTaro.request({url:'pilerOptions":{"paths":{"@/*" :[ "./src/*"]}}} Solución de depuración para archivos empaquetados demasiado grandes webpack-bundle-analyzerTaroUI es un marco de interfaz de usuario basado en TaroUI. El sitio web oficial ha instalado Taro. Después de crear el proyecto, instale taro- en. directorio raíz del proyecto.ui: Biblioteca de componentes de interfaz de usuario basada en React de AntDesign AntDesignReactantd es una biblioteca de componentes de ReactUI basada en el sistema de diseño AntDesign. Se utiliza principalmente para desarrollar productos de nivel medio y back-end basados ​​en la gestión de estado de Reactr. Biblioteca Redux Documento chino Rematch: Es la mejor práctica de Redux sin DvaJS estándar. El sitio web oficial de DvaJS del marco de flujo de datos basado en redux es primero una solución de flujo de datos basada en redux y redux-saga. , dva también tiene incorporado react-router y fetch, por lo que también puede entenderse como un marco de aplicación liviano que administra el modelo de un dominio a través del concepto de modelo: los reductores que manejan la lógica asincrónica. Objeto de modelo de suscripción: el nombre de toda la aplicación, el estado de varios modelos pequeños se sintetiza con el espacio de nombres como clave: el estado actual del modelo.

Los datos se guardan aquí, lo que determina directamente los reductores de salida de la capa de vista: Procesador de acciones, que procesa acciones sincrónicas y se utiliza para calcular los últimos efectos de estado: Procesador de acciones, que procesa acciones asincrónicas $npminstalldva-cli-g$npminstall-- saveva-coredva- cargando#Configure Taro para usar, también necesita instalar @tarojs/redux$npmi--saveredux@tarojs/redux@tarojs/redux-h5redux-thunkredux-loggerReferencia de Taro Dva: Taro dva Typescript construye la arquitectura del subprograma WeChat taro subprograma dva - compilación Proceso accesorio taro taro-ui herramienta de desarrollo dva complemento ESLint herramienta de detección de código JS sitio web oficial de ESLint ESLint es una herramienta de detección de código javascript complemento. La receta de inspección de código de ESLint y Typecript-eslint en VScode es inconveniente y debe cerrarse.

Utilice eslint directamente, configúrelo en settings.json: "editor.formatOnType": true, // Si formatear automáticamente al editar "editor.formatOnSave": true, // Si formatear automáticamente al guardar, "javascript.validate.enable" : true, // El código del editor js verifica "typescript.validate.enable": true, // El código del editor ts verifica "typescript.tsdk": "node_modules/typescript/lib", // Configura manualmente el SDK "eslint" .enable": true//Para habilitar la inspección del código eslint, debe ejecutar el comando para crear el archivo .eslintrc.js $eslint--init. Después de la creación, escriba las reglas para este archivo: module.exports={"env ":{"navegador": verdadero," es6": verdadero}, "extiende": ["eslint: recomendado", "complemento: reaccionar/recomendado", "complemento: @typescript-eslint/eslint-recommended", "Taro ", ], "globals": {" wx": "readonly", // Declaración de variable global del mini programa "Atomics": "readonly", "SharedArrayBuffer": "readonly"}, "parser": "@typescript-eslint /parser", "parserOptions": {" ecmaVersion": 2018, "sourceType": "module", "ecmaFeatures": {"jsx": true}, }, "plugins": ["react", "@typescript- eslint"], "settings": {" reaccionar": {"createClass": "createReactClass", "pragma": "React", "version": "detect", "flowVersion": "0.53"}}, "reglas ": {"no-useless-return" : "error", //No utilice retorno adicional "no-unused-vars": ["error", {"varsIgnorePattern": "Config"}], "react/react -in-jsx-scope": false, //Evita el error causado por usar React en Taro y escribirlo como reaccionar "react/jsx-filename-extension": [1, {"extensions": [".js", ".jsx", ".tsx"]}]}} ; Ayuda de referencia: Primeros pasos con mecanografiado-eslint Receta de inspección de código con ESLint y mecanografiado-eslint en VScode Marco de pruebas Jest Sitio web oficial chino de jest Los cinco marcos de pruebas automatizados de JavaScript más populares en 2019 Herramienta de gestión de versiones de código Git Sitio web oficial de Git Git es un sistema de control de versiones distribuido de código abierto que puede manejar la gestión de versiones de proyectos desde muy pequeños hasta muy grandes de manera eficiente y a alta velocidad.

sitio web oficial de github Tutorial para principiantes de Git La herramienta de generación de documentos de anotación jsDoc genera documentos de desarrollo a partir de la gestión de anotaciones marco de plataforma de documentos chino jsDoc wx subprograma WeChat Documento oficial del subprograma WeChat Descarga de la herramienta para desarrolladores WeChat wxCloud Desarrollo en la nube WeChat documento de desarrollo en la nube Cuando se importa utilizando un proyecto existente, debe cree el directorio de funciones de nube y especifique el directorio de funciones de nube en project.config.json: {..."cloudfunctionRoot":"cloudfunctions/",...} Luego, en las herramientas de desarrollo de WeChat, puede hacer clic derecho en el directorio de funciones de nube para sincronizar o crear una función en la nube. Copia de seguridad automática de la base de datos en la nube Código de muestra de copia de seguridad automática de la base de datos en la nube Nota: Hay errores en el código de muestra proporcionado por la comunidad WeChat anterior y deben modificarse. La solución es factible. Otras herramientas Plataforma de producción y gestión de iconos iconfonteasyiconColor red de combinación de colores herramienta de coincidencia de colores teoría avanzada desarrollo de proyectos referencia manual del desarrollador manual del desarrollador - comunidad en la nube - Tencent Cloud sin terminar para actualizar ~