【这段时间不能出门,打算写个APP来管理学生和课程,经过几天的技术选型确定下来,整理了这份文档供学生学习和参考】扎实的程序基础+良好的编程思想+掌握必需的技术+熟悉适用的框架+一定的图文处理能力+细致的功能设计+耐心的测试习惯+自律的项目进度管理+连续固定的时间+动人的音乐,这样你就可以愉快的开始独立APP制作了~(^_*)技术栈html+css+javascriptNodeJs+React+ReduxTaro+TaroUI+DvaJS+TypeScript+ScssJest+ESLint+JSDoc+Gitwx+wxCloud开发工具vscode+微信开发者工具目录网页基础技术HTML超文本标记语言CSS层叠样式表JavaScript脚本语言js语言和标准函数式编程纯函数柯里化函数不可变数据生成器函数异步函数网页技术进阶JSXReact中的界面描述语言TypeScript严格JS语法的超集SASS/SCSS预处理CSS的超集应用框架NodeJs使用JS的跨端引擎React前端框架Flutter原生移动应用UI框架Taro多端开发前端框架TaroUI基于Taro的UI框架AntDesign基于React的UI组件库Redux基于Reactr状态管理库DvaJS基于redux的数据流框架开发工具ESLint插件化JS代码检测工具Jest测试框架Git代码版本管理工具jsDoc注释文档生成工具平台框架wx微信小程序wxCloud微信云开发其他工具Icon图标制作管理平台Color配色网服务端技术Mongoose分布式数据库项目开发参考开发者手册网页基础技术MDNWeb开发技术HTML超文本标记语言MDNHTML帮助超文本标记语言(HTML,HyperTextMarkupLanguage)用于描述、定义网页内容。CSS层叠样式表MDNCSS帮助层叠样式表(CSS,CascadingStyleSheets)用于描述网页内容的外观与展示。JavaScript脚本语言js语言和标准MDNJavaScript帮助JavaScript是在浏览器中运行的编程语言。它可以为你的网站或应用程序添加交互性和其他动态功能。随着Node.js的出现,你也可以在服务器上运行JavaScript。函数式编程函数式编程入门教程-阮一峰JS函数式编程指南-PDF下载纯函数什么是纯函数_以及为什么要用纯函数?柯里化函数[翻译]JavaScript中的柯里化(CurryinginJavaScript)不可变数据immutabledata详解从引用数据,到深拷贝,再到不可变数据。这是调用的进度,也是优化的提升。生成器函数MDNfunction*帮助异步函数MDNasyncfunction帮助网页技术进阶JSXReact中的界面描述语言React官网-JSXJSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位,JSX就是用来声明React当中的元素,React使用JSX来描述用户界面。TypeScript严格JS语法的超集TypeScript中文文档TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。TypeScript添加了可选的静态类型系统、很多尚未正式发布的ECMAScript新特性。SASS/SCSS预处理CSS的超集SASS中文官网SASS是由buby语言编写的一款css预处理语言,它是一款强化CSS的辅助工具,是对CSS的扩展,它在CSS语法的基础上增加了变量(variables)、嵌套(nestedrules)、混合(mixins)、继承(extend)、导入(inlineimports)等高级功能,这些拓展令CSS更加强大与优雅。SCSS是Sass3引入新的语法,其语法完全兼容CSS3,并且继承了Sass的强大功能。也就是说,任何标准的CSS3样式表都是具有相同语义的有效的SCSS文件。SCSS需要使用分号和花括号而不是换行和缩进。SCSS对空白符号不敏感,其实就和css3语法一样,其后缀名是分别为.scss。应用框架NodeJs使用JS的跨端引擎nodejs中文网Node.js是一个基于ChromeV8引擎的JavaScript运行时。Node.js使用了一个事件驱动、非阻塞式I/O的模型。Node是一个让JavaScript运行在服务端的开发平台。对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快,性能非常好。用于方便地搭建响应速度快、易于扩展的网络应用。Node使用事件驱动,非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。nodejs官网##node#全局安装n$npminstall-gn#升级到最新稳定版$nstable#升级到最新版$nlatest#升级到定制版$nv7.10.0#切换使用版本$n7.10.0(ENTER)$nrm7.10.0#删除制定版本$nrm7.10.0#用制定的版本执行脚本$nuse7.10.0some.js##npm#升级npm$npminstall-gnpm#查看npm版本$npm-v#升级cnpm$npm-gicnpm#查看cnpm版本$cnpm-v#关于package.jsonpackage-lock.json的作用React前端框架React官网React起源于Facebook的内部项目,是一个用于构建用户界面的JavaScript库,也是Web应用程序的视图层。Flutter原生移动应用UI框架Flutter官网Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。Taro多端开发前端框架Taro官方文档Taro是一套遵循React语法规范的多端开发解决方案。可以只书写一套代码,再通过Taro的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动/QQ/京东小程序、快应用、H5、React-Native等)运行的代码。需要node环境(>=8.0.0)#使用npm安装CLI$npminstall-g@tarojs/cli#OR安装了cnpm,使用cnpm安装CLI$cnpminstall-g@tarojs/cli使用命令创建模板项目$taroinitmyApp微信小程序编译打包#npmscript$npmrundev:weapp$npmrunbuild:weapp#仅限全局安装$tarobuild--typeweapp--watch$tarobuild--typeweapp注意:Taro全局版本需要和项目里的版本一致#更新全局版本#taroupdateself[version]$taroupdateself#更新项目版本#taroupdateproject[version]$taroupdateproject错误:UnhandledPromiseRejectionWarning:Error:Cannotfindmodule"autoprefixer"UnhandledPromiseRejectionWarning:Error:Cannotfindmodule"webpack-sources"解决:安装以上缺少模块即可。异步编程Taro异步编程环境配置$npmibabel-plugin-transform-runtime-D$npmibabel-runtime《Taro框架:创建微信小程序》Taro1.x版本安装@tarojs/async-await(2.0以上不需要):$npmi@tarojs/async-await--savecomponentWillMount(){Taro.request({url:"ponentWillMount(){constresponse=awaitTaro.request({url:"pilerOptions":{"paths":{"@/*":["./src/*"]}}}打包文件过大调试方案打包文件过大调试方案webpack-bundle-analyzerTaroUI基于Taro的UI框架TaroUI官网安装好Taro,创建项目后,在项目根目录安装taro-ui:AntDesign基于React的UI组件库AntDesignReactantd是基于AntDesign设计体系的ReactUI组件库,主要用于研发企业级中后台产品。Redux基于Reactr状态管理库Redux中文文档Rematch:是没有boilerplate的Redux最佳实践DvaJS基于redux的数据流框架DvaJS官网dva首先是一个基于redux和redux-saga的数据流方案,然后为了简化开发体验,dva还额外内置了react-router和fetch,所以也可以理解为一个轻量级的应用框架。dva通过model的概念把一个领域的模型管理起来:包含同步更新state的reducers。处理异步逻辑的effects。订阅数据源的subscriptions。Model对象的属性namespace:当前Model的名称。整个应用的State,由多个小的Model的State以namespace为key合成state:该Model当前的状态。数据保存在这里,直接决定了视图层的输出reducers:Action处理器,处理同步动作,用来算出最新的Stateeffects:Action处理器,处理异步动作$npminstalldva-cli-g$npminstall--savedva-coredva-loading#配置Taro使用,还需要安装@tarojs/redux$npmi--saveredux@tarojs/redux@tarojs/redux-h5redux-thunkredux-loggerTaro+Dva参考:Taro+dva+Typescript搭建微信小程序架构taro+dva小程序--搭建配件过程taro+taro-ui+dva开发工具ESLint插件化JS代码检测工具ESLint官网ESLint是一个插件化的javascript代码检测工具。VScode下搭配ESLint、typescript-eslint的代码检查配方vscode自带的代码检查不方便,关闭。直接使用eslint,在settings.json中配置:"editor.formatOnType":true,//编辑时是否自动格式化"editor.formatOnSave":true,//保存时是否自动格式化"javascript.validate.enable":true,//编辑器的代码js检查"typescript.validate.enable":true,//编辑器的代码ts检查"typescript.tsdk":"node_modules/typescript/lib",//手动配置SDK"eslint.enable":true//开启eslint代码检查需要执行命令创建.eslintrc.js文件$eslint--init创建后,编写此文件规则:module.exports={"env":{"browser":true,"es6":true},"extends":["eslint:recommended","plugin:react/recommended","plugin:@typescript-eslint/eslint-recommended","Taro",],"globals":{"wx":"readonly",//小程序全局变量声明"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",//不使用多余的return"no-unused-vars":["error",{"varsIgnorePattern":"Config"}],"react/react-in-jsx-scope":false,//避免Taro中使用React写成react产生的报错"react/jsx-filename-extension":[1,{"extensions":[".js",".jsx",".tsx"]}]}};参考帮助:typescript-eslint上手VScode下搭配ESLint、typescript-eslint的代码检查配方Jest测试框架jest中文官网2019年最流行的五大JavaScript自动化测试框架Git代码版本管理工具Git官网Git是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。github官网Git菜鸟教程jsDoc注释文档生成工具从注释管理生成开发文档jsDoc中文文档平台框架wx微信小程序微信小程序官方文档微信开发者工具下载wxCloud微信云开发云开发文档当使用现有项目导入后,需要创建cloudfunctions目录,并在project.config.json中指定云函数目录:{..."cloudfunctionRoot":"cloudfunctions/",...}然后,在微信开发者工具中可以右键cloudfunctions目录进行同步或创建云函数。云数据库自动备份云数据库自动备份示例代码注意:上面微信社区提供的示例代码中有BUG,需要改造,方案是可行的。其他工具Icon图标制作管理平台iconfonteasyiconColor配色网配色工具色彩搭配进阶理论项目开发参考开发者手册开发者手册-云+社区-腾讯云未完待更新~