그동안 외출할 수 없고 앱을 써서 학생과 과정을 관리하려고 합니다. 며칠 동안의 기술 선별을 거쳐, 나는 학생들이 참고할 수 있도록 이 문서를 정리했다. 탄탄한 프로그램 기반+좋은 프로그래밍 아이디어+필요한 기술 파악+적용 가능한 프레임 워크+특정 그래픽 처리 능력+세밀한 기능 설계+인내심 있는 테스트 습관+자율적인 프로젝트 일정 관리+지속적인 고정 시간+감동적인 음악. 그래서 독립 앱 ~ (_ *) 기술 스택 HTML+CSS+JavaScript nodejs+react+redux taro+taroui+dvajs+typescript 를 만드는 것을 즐겁게 시작할 수 있습니다 VaScript 스크립팅 언어 JS 언어 및 표준 함수 프로그래밍 순수 함수 Currier 함수 불변데이터 생성기 함수 비동기 함수 웹 페이지 기술 고급 인터페이스 설명 언어 TypeScript in JsXReact 엄격한 js 구문 수퍼 세트 SASS/ SCSS 사전 처리 CSS 의 수퍼 세트 애플리케이션 프레임워크 NodeJs 는 JS 의 크로스 엔드 엔진 React 프런트 엔드 프레임 Flutter 기본 모바일 애플리케이션 UI 프레임 Taro 멀티 스레드 개발 프런트 엔드 프레임 Taro UI 프레임 AntDesign React 기반 UI 구성 요소 라이브러리 Redx React 기반 상태 관리 라이브러리 DvaJS Redux 기반 데이터 흐름 프레임 개발 도구 esLint 플러그인을 사용합니다. JS 코드 감지 도구 Jest 테스트 프레임워크 Git 코드 버전 관리 도구 jsDoc 주석 문서 생성 도구 플랫폼 프레임워크 wx 위챗 애플릿 wxCloud 위챗 클라우드 개발 기타 도구 아이콘 제작 관리 플랫폼 색상 배색 네트워크 서버 기술 Mongoose 분산 데이터베이스 프로젝트 개발 참조 개발자 설명서 웹 기본 기술 MDN 웹 개발 기술 HTML 하이퍼텍스트 마크 언어. MDNHTML 도움말 html (hypertextmarkuplanguage) 은 웹 페이지 컨텐츠를 설명하고 정의합니다. CSS CascadingStyleSheets MDNCSS 도움말 CSS (cascading stylesheet) 는 웹 내용의 모양과 표시를 설명합니다. JavaScript 스크립팅 언어 js 언어 및 표준 MDNJavaScript 도움말 JavaScript 는 브라우저에서 실행되는 프로그래밍 언어입니다. 웹 사이트 또는 응용 프로그램에 상호 작용 및 기타 동적 기능을 추가할 수 있습니다. Node.js 가 나타나면 서버에서 JavaScript 를 실행할 수도 있습니다. 함수형 프로그래밍 함수형 프로그래밍 입문-일봉 JS 함수형 프로그래밍 가이드 -PDF 다운로드 순수 함수란 무엇이며, 순수 함수란 무엇이며, 왜 순수 함수를 사용해야 합니까? 코스 기능 [번역] curringin] JavaScript immutable data 는 참조 데이터에서 깊이 복제, 불변 데이터에 이르기까지 자세히 설명합니다. 이것은 호출의 진보이자 최적화의 향상이다. 생성기 함수 MDNfunction* 도움말 비동기 함수 MDNasyncfunction 도움말 고급 웹 기술. JSXReact 의 인터페이스 설명 언어, React 공식 홈페이지 -JSXJSX 는 JavaScript 의 구문 확장입니다. REACT 스키마에서 사용할 경우 형식은 템플릿 언어와 더 비슷하지만 실제로는 JavaScript 내에서 완전히 구현됩니다. 요소는 React 응용 프로그램을 구성하는 최소 단위이며 JSX 는 React 의 요소를 선언하고 React 는 JSX 를 사용하여 사용자 인터페이스를 설명합니다. TypeScript 는 엄격한 JS 구문을 가진 수퍼 세트 TypeScript 중국어 문서입니다. TypeScript 는 Microsoft 에서 개발한 오픈 소스 크로스 플랫폼 프로그래밍 언어입니다. JavaScript 의 수퍼 세트이며 결국 JavaScript 코드로 컴파일됩니다. TypeScript 에는 선택적 정적 유형 시스템과 ECMAScript 의 많은 새로운 기능이 ga 되지 않았습니다. SASS/Scss 는 CSS 사전 처리의 상위 집합입니다. SASS 중국어 공식 홈페이지인 SASS 는 buby 언어로 작성된 CSS 전처리 언어입니다. CSS 를 강화하는 보조 도구이며 CSS 의 확장입니다. CSS 구문에 변수, 중첩 규칙, 혼합, 확장 및 inlineimports 와 같은 고급 기능을 추가합니다. SCSS 는 Sass3 에 도입된 새로운 구문으로 CSS3 과 완벽하게 호환되며 Sass 의 강력한 기능을 상속합니다. 즉, 모든 표준 CSS3 스타일시트는 동일한 의미를 갖는 유효한 SCSS 파일입니다. SCSS 에는 줄 바꿈과 들여쓰기 대신 세미콜론과 중괄호가 필요합니다. Scss 는 공백 기호를 구분하지 않습니다. 실제로 css3 구문과 마찬가지로 접미사는 입니다. SCSS 입니다. 응용 프로그램 프레임워크 nodejs 는 Js 를 사용하는 크로스 엔드 엔진인 NodeJs 중국어 네트워크인 Node.js 를 ChromeV8 엔진을 기반으로 하는 JavaScript 런타임입니다. Node.js 는 이벤트 중심 비차단 입출력 모델을 사용합니다. Node 는 JavaScript 가 서버에서 실행하는 개발 플랫폼입니다. 일부 특수 사용 사례를 최적화하고 대체 API 를 제공하여 비브라우저 환경에서 V8 을 더 잘 실행할 수 있도록 합니다. V8 엔진은 Javascript 를 매우 빠르게 실행하며, 성능이 매우 뛰어나다. 응답 속도가 빠르고 확장이 용이한 네트워크 애플리케이션을 쉽게 구축할 수 있도록 설계되었습니다. Node 는 이벤트 기반의 비차단 I/O 모델을 사용하여 가볍고 효율적이며 분산 장치에서 데이터 집약형 실시간 어플리케이션을 실행하는 데 적합합니다. Nodejs 공식 홈페이지 ##node# 글로벌 설치 n$npminstall-gn# 최신 안정 버전으로 업그레이드 $nstable# 최신 버전으로 업그레이드 $ NLEST # 맞춤형 버전 $ nv7./kloc-0 으로 업그레이드 공식 버전 삭제 $nrm7. 10.0# 스크립트 실행 $ nuse7.10.0some.js # # $npm-v# 업그레이드 NPM $ npminstinstitute Package.jsonpackage-lock.jsonReact 공식 홈페이지의 프런트 엔드 프레임 react 는 페이스북의 내부 프로젝트에서 유래한 것으로, 사용자 인터페이스를 구축하는 데 사용되는 JavaScript 라이브러리이자 웹 응용 프로그램의 보기 계층입니다. Flutter 기본 모바일 애플리케이션 UI 프레임워크 Flutter 공식 홈페이지인 Flutter 는 iOS 와 Android 에 고품질의 기본 사용자 인터페이스를 신속하게 구축할 수 있는 구글의 모바일 UI 프레임워크입니다. Flutter 는 기존 코드와 함께 작동합니다. 전 세계적으로 점점 더 많은 개발자와 조직이 Flutter 를 사용하고 있으며 Flutter 는 완전 무료 오픈 소스입니다. Taro 다중 터미널 개발 프런트 엔드 프레임워크 Taro 공식 문서인 Taro 는 React 구문 사양을 따르는 다중 터미널 개발 솔루션입니다. 코드 한 세트만 작성하고 소스 코드를 다른 터미널 (위챗/바이두/알리페이/바이트 런아웃 /QQ/JD.COM 애플릿, 빠른 응용 프로그램, H5, React-Native 등) 에서 실행할 수 있는 코드로 컴파일할 수 있습니다. 노드 환경 (> =8.0.0)# NPM 을 사용하여 CLI $ NPM install-g @ tarojs/CLI # 설치 또는 cnpm 설치 ， Cnpm 을 사용하여 CLI 설치 CLI$cnpminstall-g@tarojs/cli 템플릿 항목 만들기 $taroinitmyApp 위챗 애플릿 컴파일 및 패키지 # npmscript $ npmrundev: weapp $ npmrundev 전 세계적으로 $ Tarobuild-typewap-watch $ Tarobuild-typewap 만 설치 참고: taro 의 글로벌 버전에는 버전과 일치하는 비동기 프로그래밍 taro 비동기 프로그래밍 환경 구성 $ npmibabel-plugin-tranning 이 필요합니다 프레임워크: 위챗 애플릿 만들기 @ tarojs/async-await(2.0 이상 필요 없음): $ npmi @ tarojs/async-await-savecomponentwillmount {constresponse = awaittaro.request ({URL:' pileroptions': {"paths": {"@/*": ["" /Src/* "]}} 패키지 파일 오버디버그 시나리오 패키지 파일 오버디버그 시나리오 웹 팩-번들-분석기 타루 UI 프레임워크 타루 홈페이지는 타로를 설치하고, 프로젝트를 만든 후 타로-ui 를 프로젝트 루트 아래에 설치합니다. AntDesign 응답 React 상태 관리 라이브러리를 기반으로 한 Redox Redox 중국어 문서 재경기: 템플릿 없음은 Redox 의 모범 사례입니다. DvaJS 는 산화 복원을 기반으로 하는 데이터 흐름 프레임워크입니다. DvaJS 공식 홈페이지인 dva 는 우선 Redox 와 redux-saga 기반 데이터 흐름 체계로, 그런 다음 개발 경험을 단순화하기 위해 react-router 와 fetch 도 내장되어 있어 경량 애플리케이션 프레임워크로 이해할 수 있습니다. Dva 는 model:reducer 의 개념 관리 도메인 모델을 통해 상태 동기화 업데이트를 포함합니다. 비동기 논리의 영향을 처리합니다. 데이터 소스에 대한 가입에 가입합니다. 네임스페이스: 현재 모델의 이름입니다. 전체 응용프로그램의 상태는 이름 공간을 키로 사용하는 몇 가지 작은 모형 상태로 구성됩니다. 즉, 모형의 현재 상태입니다. 여기에 저장된 데이터는 뷰 레이어 reducers:Action processor 의 출력을 직접 결정하며 최신 Stateeffects:Action processor 를 계산하고 비동기 작업 $ npminstalldva-CLI-g $ 를 처리하는 데 사용됩니다 또한 @ tarojs/redux $ npmi-saveredux @ tarojs/redux @ tarojs/를 설치해야 합니다 Redox-H5 redox-thunk redox-logger taro+dva 참조: Taro+dva+Typescript 빌드 위챗 애플릿 아키텍처 taro+dva 애플릿-빌드 액세서리 프로세스 taro+taro 스크립트 코드 감지 도구, VScode 에 ESLint 및 typescript-eslint 가 있는 코드 검사 공식이 불편해서 닫힙니다. 직접 eslint 를 사용하여 구성: "편집기. 형식 유형: settings.json 의 true,//편집기 자동 서식 지정 여부. Formatonsave: 편집 시 true,//로 "JavaScript" 를 자동으로 포맷할지 여부. Validate.enable ":true,//편집기 코드 js 에 대해" typescript.validate.enable ":true,//편집기 코드 ts 에 대해" types "를 검사합니다 Eslintrc.js 파일 $ eslint-init 을 만든 후 이 파일 rule: module 을 작성합니다. Exports = {"env": {"browser": true, "es6": true}. Extends":["eslint:recommended ","plugin:react/recommended ","plugin: @ typescript-; //애플릿 글로벌 변수 선언 "atomics": "readonly", "sharedyabuffer ":" readonly"}, "parser": "@ ty "parser options": {"ECMA 버전": 20 18, "sourceType":"module", "ECM features ":{" modules 참조 도움말: vs code checking formula jest test framework with eslint 및 typescript-eslint 의 typescript 공식 홈페이지는 20 19 에서 가장 유행하는 다섯 가지 자바스크립트 자동 테스트 프레임워크인 Git 공식 홈페이지는 오픈 소스의 분산 버전 제어 시스템으로, 아주 작은 것부터 큰 프로젝트 버전까지 빠르고 효율적으로 처리할 수 있다. Github 공식 홈페이지 Git 초보 자습서 jsDoc 주석 문서 생성 도구 주석 관리 jsDoc 중국어 문서 플랫폼 프레임워크 wx 위챗 애플릿 공식 문서 위챗 개발자 도구 다운로드 WX 클라우드 위챗 클라우드 개발 클라우드 개발 문서. 기존 프로젝트 가져오기를 사용한 후 클라우드 functions 디렉토리를 만들어야 합니다. 그리고 project.config.json 에 클라우드 함수 디렉토리: {... "클라우드 기능 루트": "클라우드 기능/",...} 를 지정한 다음 위챗 개발자 도구에서 CD 를 마우스 오른쪽 버튼으로 클릭합니다 클라우드 데이터베이스 자동 백업 클라우드 데이터베이스 자동 백업 샘플 코드 참고: 위 위챗 커뮤니티에서 제공하는 샘플 코드는 버그가 있으며 수정해야 하며 시나리오가 가능합니다. 기타 도구 아이콘 제작 관리 플랫폼 iconfonteasyiconColor 채색 도구 고급 이론 프로젝트 개발 참조 개발자 설명서 개발자 설명서-클라우드+커뮤니티-정보 클라우드 업데이트 보류 중 ~