I can’t go out during this period. I plan to write an APP to manage students and courses. After several days of technical selection, I have compiled this document for students to learn and refer to. Solid program foundation + good Programming ideas + mastering necessary technologies + familiarity with applicable frameworks + certain image and text processing capabilities + meticulous functional design + patient testing habits + self-disciplined project progress management + continuous fixed time + moving music, so that you can be happy Started independent APP production ~ (^_*) technology stack html+css+javascriptNodeJs+React+ReduxTaro+TaroUI+DvaJS+TypeScript+ScssJest+ESLint+JSDoc+Gitwx+wxCloud development tools vscode+WeChat developer tools catalog web page basic technology HTML hypertext markup language CSS cascading style sheets JavaScript scripting language js language and standard functional programming pure function curry function immutable data generator function asynchronous function web page technology advanced interface description language TypeScript in React A superset of strict JS syntax SASS/SCSS preprocessing CSS superset application framework NodeJs cross-end engine using JS React front-end framework Flutter native mobile application UI framework Taro multi-terminal development front-end framework TaroUI Taro-based UI framework AntDesign React-based UI component library Redux based on Reactr state management Library DvaJS redux-based data flow framework development tool ESLint plug-in JS code detection tool Jest testing framework Git code version management tool jsDoc annotation document generation tool platform framework wx WeChat applet wxCloud WeChat cloud development other tools Icon icon production management platform Color color matching network Server-side technology Mongoose distributed database project development reference Developer Manual Web page basic technology MDNWeb development technology HTML Hypertext Markup Language MDNHTML Help Hypertext Markup Language (HTML, HyperTextMarkupLanguage) is used to describe and define web page content. CSS Cascading Style Sheets MDNCSS Help Cascading Style Sheets (CSS, CascadingStyleSheets) are used to describe the appearance and display of web content. JavaScript scripting language js language and standard MDN JavaScript help JavaScript is a programming language that runs in the browser. It can add interactivity and other dynamic features to your website or application. With the advent of Node.js, you can also run JavaScript on the server. Functional Programming Functional Programming Introduction Tutorial - Ruan Yifeng JS Functional Programming Guide - PDF Download Pure Function What is a pure function_and why should we use pure functions? Currying functions [Translation] Currying in JavaScript (CurryinginJavaScript) is not possible Detailed explanation of immutable data: from reference data, to deep copy, to immutable data. This is the progress of the call and the improvement of optimization. Generator function MDNfunction* helps asynchronous function MDNasyncfunction helps web page technology advance JSX Interface description language in React React official website - JSXJSX is a JavaScript syntax extension used in the React architecture. Its format is more like a template language, but in fact it is completely Is implemented inside JavaScript. Elements are the smallest unit that constitutes a React application. JSX is used to declare elements in React. React uses JSX to describe the user interface. TypeScript Chinese document, a superset of TypeScript's strict JS syntax, TypeScript is an open source, cross-platform programming language developed by Microsoft. It is a superset of JavaScript and will eventually be compiled into JavaScript code. TypeScript adds an optional static type system and many new ECMAScript features that have not yet been officially released. SASS/SCSS pre-processing CSS is a superset of SASS Chinese official website. SASS is a CSS pre-processing language written in buby language. It is an auxiliary tool to strengthen CSS and an extension of CSS. It adds on the basis of CSS syntax. With advanced functions such as variables, nestedrules, mixins, extend, and inlineimports, these extensions make CSS more powerful and elegant. SCSS is a new syntax introduced by Sass3. Its syntax is fully compatible with CSS3 and inherits the powerful functions of Sass. That is, any standard CSS3 stylesheet is a valid SCSS file with the same semantics. SCSS requires semicolons and braces instead of line breaks and indentation. SCSS is not sensitive to whitespace characters. In fact, the syntax is the same as css3, and its suffix is ??.scss.

The application framework NodeJs uses JS's cross-end engine nodejs Chinese network Node.js is a JavaScript runtime based on the ChromeV8 engine. Node.js uses an event-driven, non-blocking I/O model. Node is a development platform that allows JavaScript to run on the server side. Optimize some special use cases and provide alternative APIs to make V8 run better in non-browser environments. The V8 engine executes Javascript very quickly and has very good performance. Used to easily build network applications with fast response and easy expansion. Node uses an event-driven, non-blocking I/O model to be lightweight and efficient, making it ideal for running data-intensive real-time applications on distributed devices. nodejs official website##node#Global installation n$npminstall-gn#Upgrade to the latest stable version$nstable#Upgrade to the latest version$nlatest#Upgrade to the customized version$nv7.10.0#Switch to the version $n7.10.0(ENTER)$nrm7 .10.0#Delete the specified version $nrm7.10.0#Use the specified version to execute the script $nuse7.10.0some.js##npm#Upgrade npm$npminstall-gnpm#View npm version$npm-v#Upgrade cnpm$npm-gicnpm# View the cnpm version $cnpm-v# About the role of package.jsonpackage-lock.json React front-end framework React official website React originated from Facebook's internal project. It is a JavaScript library used to build user interfaces and is also the view layer of web applications. Flutter native mobile application UI framework Flutter official website Flutter is Google's mobile UI framework that can quickly build high-quality native user interfaces on iOS and Android. Flutter can work with existing code. Flutter is being used by more and more developers and organizations around the world, and Flutter is completely free and open source. Taro multi-terminal development front-end framework Taro official document Taro is a set of multi-terminal development solutions that follow React syntax specifications. You can only write a set of code, and then use Taro's compilation tool to compile the source code separately and compile it on different terminals (WeChat/Baidu/Alipay/ByteDance/QQ/JD Mini Programs, Quick Apps, H5, React-Native, etc. ) to run the code. Requires node environment (>=8.0.0) #Use npm to install CLI$npminstall-g@tarojs/cli#OR installed cnpm, use cnpm to install CLI$cnpminstall-g@tarojs/cliUse the command to create a template project $taroinitmyApp WeChat mini Program compilation and packaging #npmscript$npmrundev:weapp$npmrunbuild:weapp#Global installation only$tarobuild--typeweapp--watch$tarobuild--typeweappNote: Taro global version needs to be consistent with the version in the project#Update global version#taroupdateself[ version]$taroupdateself#Update project version#taroupdateproject[version]$taroupdateprojectError: UnhandledPromiseRejectionWarning:Error:Cannotfindmodule'autoprefixer'UnhandledPromiseRejectionWarning:Error:Cannotfindmodule'webpack-sources'Solution: Just install the above missing modules.

Asynchronous programming Taro asynchronous programming environment configuration $npmibabel-plugin-transform-runtime-D$npmibabel-runtime "Taro Framework: Creating WeChat Mini Programs" Taro1.x version installation @tarojs/async-await (not required for 2.0 and above): $npmi @tarojs/async-await--savecomponentWillMount(){Taro.request({url:'ponentWillMount(){constresponse=awaitTaro.request({url:'pilerOptions":{"paths":{"@/*":[ "./src/*"]}}} Debugging solution for too large packaged files webpack-bundle-analyzerTaroUI is a UI framework based on Taro. TaroUI official website has installed Taro. After creating the project, install taro- in the project root directory. ui: AntDesign's React-based UI component library AntDesignReactantd is a ReactUI component library based on the AntDesign design system. It is mainly used to develop enterprise-level middle and back-end products. Redux is based on the Reactr state management library Redux Chinese document Rematch: It is the best practice of Redux without boilerplate DvaJS. The redux-based data flow framework DvaJS official website dva is first a data flow solution based on redux and redux-saga. Then in order to simplify the development experience, dva also has built-in react-router and fetch, so it can also be understood as a lightweight Application framework. DVA manages the model of a domain through the concept of model: the reducers that handle the asynchronous logic. The subscription properties of the data source are namespace: the name of the entire application. , the state of multiple small Models is synthesized with namespace as the key: the current state of the Model is saved here, which directly determines the output reducers of the view layer: Action processor, which processes synchronization actions and is used to calculate the latest Stateeffects. : Action processor, handles asynchronous actions $npminstalldva-cli-g$npminstall--savedva-coredva-loading#Configuring Taro for use, you also need to install @tarojs/redux$npmi--saveredux@tarojs/redux@tarojs/redux-h5redux -thunkredux-loggerTaro+Dva reference: Taro+dva+Typescript builds WeChat applet architecture taro+dva applet - the process of building accessories taro+taro-ui+dva development tool ESLint plug-in JS code detection tool ESLint official website ESLint is a plug-in javascript code detection tool. The code inspection recipe of ESLint and typescript-eslint under VScode is inconvenient and should be closed.

Use eslint directly and configure in settings.json: "editor.formatOnType": true, // Whether to automatically format when editing " editor.formatOnSave": true, // Whether to automatically format when saving " javascript.validate.enable" :true,//The editor's code js check "typescript.validate.enable":true,//The editor's code ts check "typescript.tsdk":"node_modules/typescript/lib",//Manually configure the SDK "eslint .enable":true//To enable eslint code inspection, you need to execute the command to create the .eslintrc.js file $eslint--init. After creation, write the rules for this file: module.exports={"env":{"browser":true," es6":true},"extends":["eslint:recommended","plugin:react/recommended","plugin:@typescript-eslint/eslint-recommended","Taro",],"globals":{" wx":"readonly",//Mini program global variable declaration "Atomics":"readonly","SharedArrayBuffer":"readonly"},"parser":"@typescript-eslint/parser","parserOptions":{" ecmaVersion":2018,"sourceType":"module","ecmaFeatures":{"jsx":true},},"plugins":["react","@typescript-eslint"],"settings":{" react":{"createClass":"createReactClass","pragma":"React","version":"detect","flowVersion":"0.53"}},"rules":{"no-useless-return" :"error",//Do not use extra return"no-unused-vars":["error",{"varsIgnorePattern":"Config"}],"react/react-in-jsx-scope":false, //Avoid the error caused by using React in Taro and writing it as react "react/jsx-filename-extension":[1,{"extensions":[".js",".jsx",".tsx"]}]}} ; Reference help: Getting started with typescript-eslint Code inspection recipe with ESLint and typescript-eslint under VScode Jest testing framework jest Chinese official website The five most popular JavaScript automated testing frameworks in 2019 Git code version management tool Git official website Git is an open source distributed Version control system that can handle version management of projects from very small to very large efficiently and at high speed. github official website Git novice tutorial jsDoc annotation document generation tool generates development documents from annotation management jsDoc Chinese document platform framework wx WeChat applet WeChat applet official document WeChat developer tool download wxCloud WeChat cloud development cloud development document When imported using an existing project, You need to create the cloudfunctions directory and specify the cloud functions directory in project.config.json: {..."cloudfunctionRoot":"cloudfunctions/",...} Then, in the WeChat developer tools, you can right-click the cloudfunctions directory to synchronize or Create a cloud function. Cloud database automatic backup Cloud database automatic backup sample code Note: There are BUGs in the sample code provided by the WeChat community above and need to be modified. The solution is feasible.

Other tools Icon icon production management platform iconfonteasyiconColor color matching network color matching tool color matching advanced theory project development reference developer manual developer manual - cloud + community - Tencent Cloud unfinished to be updated ~