多终端APP开发技术

这段时间不能出门，打算写个APP管理学生和课程。经过几天的技术筛选，我整理了这个文档，供同学们学习参考。扎实的程序基础+良好的编程思路+掌握必要的技术+熟悉适用的框架+一定的图形处理能力+细致的功能设计+耐心的测试习惯+自律的项目进度管理+持续的固定时间+动人的音乐。所以可以愉快的开始制作独立app啦~ (_ *)技术栈HTML+CSS+JavaScript Nodejs+React+redux taro+Taroui+Dvajs+TypeScript+scsjsesst+ESLINT+JSDoc+git wx+wx cloud开发工具vscode+微信开发者工具目录Web基础技术HTML超文本标记语言CSS级联样式表Ja。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分布式数据库项目开发参考开发者手册网页基础技术MDNWeb开发技术HTML超文本标记语言。MDNHTML帮助HyperTextMarkupLanguage (HTML)描述和定义网页内容。CSS CascadingStyleSheets MDNCSS帮助级联样式表(CSS)描述web内容的外观和显示。JavaScript脚本语言js语言和标准MDNJavaScript帮助JavaScript是运行在浏览器中的编程语言。它可以为您的网站或应用程序添加交互性和其他动态功能。随着Node.js的出现，还可以在服务器上运行JavaScript。函数式编程函数式编程入门-阮一峰JS函数式编程指南-PDF下载纯函数什么是纯函数_以及为什么要用纯函数？课程功能[翻译]curring in]JavaScript immutable data详细解释从引用数据，到深度复制，再到不可变数据。这是调用的进步，也是优化的提升。生成器函数MDNfunction*帮助异步函数MDNasyncfunction帮助高级web技术。JSXReact中的接口描述语言，React官网-JSXJSX，是JavaScript的语法扩展。在REACT架构中使用时，其格式更像是一种模板语言，但实际上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX用于声明React中的元素，React使用JSX来描述用户界面。TypeScript是一个超集TypeScript中文文档，具有严格的JS语法。TypeScript是微软开发的开源跨平台编程语言。它是JavaScript的超集，最终会编译成JavaScript代码。TypeScript添加了一个可选的静态类型系统和ECMAScript的许多尚未正式发布的新功能。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使用事件驱动的非阻塞I/O模型。Node是JavaScript在服务器上运行的开发平台。优化一些特殊用例，提供替代API，使得V8在非浏览器环境下运行更好。V8引擎执行Javascript非常快，性能非常出色。它用于方便地构建响应速度快、易于扩展的网络应用程序。Node采用事件驱动、非阻塞的I/O模型，轻量高效，非常适合在分布式设备上运行数据密集型实时应用。Nodejs官网##node#全球安装n$npminstall-gn#升级到最新稳定版$nstable#升级到最新版本$ NLEST #升级到定制版$nv7.10.0#切换使用版本$ n 7.10.0(Enter)$ NRM 7.10.0。删除公式化版本$nrm7.10.0#执行脚本$nuse7.10.0some.js##npm#升级npm$npminstall-gnpm#查看npm版本$npm-v#升级cnpm$npm-gicnpm#查看cnpm版本$ CNPM。关于package . JSON package-lock . JSON React官网的前端框架React源于脸书的内部项目，是一个用于构建用户界面的JavaScript库，也是web应用的视图层。Flutter原生移动应用UI框架Flutter官网Flutter是Google的移动UI框架，可以在iOS和Android上快速构建高质量的原生用户界面。Flutter可以与现有代码一起工作。全世界越来越多的开发者和组织都在使用Flutter，而且Flutter是完全免费开源的。Taro多终端开发前端框架Taro官方文档Taro是遵循React语法规范的多终端开发解决方案。你只能写一套代码，然后把源代码编译成可以在不同终端(微信/百度/支付宝/字节跳动/QQ/JD.COM小程序、快应用、H5、React-Native等)上运行的代码)通过Taro的编译工具。节点环境(> =8.0.0)#使用npm安装CLI $ NPM install-g @ tarojs/CLI #或者要安装cnpm，使用cnpm安装CLI$cnpminstall-g@tarojs/cli创建模板项目$taroinitmyApp微信小程序编译和打包# NPM script $ npmrundev:weapp $ npmrunbuild:weapp #仅全球安装$ Taro build-type WAP-watch $ Taro build-type WAP注:Taro的全球版本需要与版本一致异步编程Taro异步编程环境配置$ npmibabel-plugin-transform-runtime-d $ npmibabel-runtime Taro框架:创建微信小程序@ tarojs/async-await(2.0以上不需要):$ npmi @ tarojs/async-await-savecomponentWillMount(){ Taro . request({ URL:' ponentWillMount(){ const response = awaittaro . request({ URL:' pilerOptions ':{ " paths ":{ " @/* ":["。/ Src/* "]}}打包文件过大调试方案打包文件过大调试方案Webpack-Bundle-Analyzer Tarou UI框架Tarou官网安装了Taro，项目创建后Taro-UI安装在项目根目录下:AntDesign反应式UI组件库AntDesignReactantd UI组件库基于Ant Design设计系统，主要用于开发企业级中后台产品。基于React状态管理库的Redox Redox中文文档复赛:无样板是Redox的最佳实践。DvaJS是一个基于氧化还原的数据流框架。DvaJS官网dva首先是基于Redox和redux-saga的数据流方案，然后为了简化开发体验，dva还内置了react-router和fetch，所以也可以理解为一个轻量级的应用框架。Dva通过model:reducer的概念管理域的模型，包括状态的同步更新。处理异步逻辑的影响。订阅数据源的订阅。命名空间:当前模型的名称。整个应用程序的状态由几个小的模型状态组成，以名称空间为键:模型的当前状态。这里存储的数据直接决定了视图层reducers:Action processor的输出，它用于计算最新的Stateeffects:Action processor，并处理异步操作$ npminstalldva-CLI-g $ npmininstall-savedva-coredva-loading #来配置Taro以供使用。还需要安装@ tarojs/redux $ npmi-save redux @ tarojs/redux @ tarojs/Redox-H5 Redox-thunk Redox-Logger Taro+dva参考:Taro+dva+Typescript构建微信小程序架构taro+dva小程序-构建配件流程taro+taro-ui+dva开发工具ESLint插件js代码检测工具ESLint官网ESLint是一款插件javascript代码检测工具，VScode下带ESLint和typescript-eslint的代码检查公式不方便，所以关闭。直接用eslint，配置:“编辑器。formaton type”:settings . JSON中的true，//是否自动格式化“编辑器。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之后，编写这个文件rule: module。exports = {"env": {"browser": true，" es6": true}。extends":["eslint:recommended "，" plugin:react/recommended "，" plugin:@ typescript-eslint/eslint-recommended "，" Taro "，]，" globals ":{ " readonly "，//applet全局变量声明" atomics": "readonly "，" sharedyabuffer ":" readonly " }，" parser ":" @ typescript-eslint/parser "，" parser options": {"ECMA版本":2018，" sourceType":"module "，" ECM features ":{ " modules参考帮助:vs code checking formula Jest test framework with ESLint和typescript-eslint中的typescript-eslint，官网2019最流行的五个JavaScript自动测试框架，Git官网Git，是一个开源的分布式版本控制系统，可以有效快速的处理从很小到很大的项目版本管理。Github官网Git菜鸟教程jsDoc批注文档生成工具从批注管理jsDoc中文文档平台框架wx微信小程序官方文档微信开发者工具下载wxCloud微信云开发云开发文档。使用现有项目导入后，需要创建一个cloudfunctions目录。并在project.config.json中指定云函数目录:{..." cloud functions root ":" cloud functions/"，...}然后在微信开发者工具中，右键点击CloudFunctions目录，即可同步或创建云函数。云数据库自动备份云数据库自动备份示例代码注意:上面微信社区提供的示例代码存在bug，需要修改，方案可行。其他工具图标图标制作管理平台iconfonteasyiconColor配色工具高级理论项目开发参考开发者手册开发者手册-云+社区-腾讯云待更新~