|
|
【这段时间不能出门，打算写个APP来管理学生和课程，经过几天的技术选型确定下来，整理了这份文档供学生学习和参考】
扎实的程序基础 + 良好的编程思想 + 掌握必需的技术 + 熟悉适用的框架 + 一定的图文处理能力 + 细致的功能设计 + 耐心的测试习惯 + 自律的项目进度管理 + 连续固定的时间 + 动人的音乐，这样你就可以愉快的开始独立APP制作了~ （^_*)
技术栈 html + css + javascript
NodeJs + React + Redux
Taro + Taro UI + DvaJS + TypeScript + Scss
Jest + ESLint + JSDoc + Git
wx + wxCloud
开发工具 vscode + 微信开发者工具
目录
- 网页基础技术
- HTML 超文本标记语言
- CSS 层叠样式表
- JavaScript 脚本语言
- js语言和标准
- 函数式编程
- 纯函数
- 柯里化函数
- 不可变数据
- 生成器函数
- 异步函数
- 网页技术进阶
- JSX React中的界面描述语言
- TypeScript 严格JS语法的超集
- SASS/SCSS 预处理CSS的超集
- 应用框架
- NodeJs 使用JS的跨端引擎
- React 前端框架
- Flutter 原生移动应用UI框架
- Taro 多端开发前端框架
- Taro UI 基于Taro的UI框架
- Ant Design 基于React的UI组件库
- Redux 基于Reactr 状态管理库
- DvaJS 基于redux的数据流框架
- 开发工具
- ESLint 插件化JS代码检测工具
- Jest 测试框架
- Git 代码版本管理工具
- jsDoc 注释文档生成工具
- 平台框架
- 其他工具
- 服务端技术
- 项目开发参考
网页基础技术
MDN Web 开发技术
HTML 超文本标记语言
MDN HTML 帮助
超文本标记语言（HTML，HyperText Markup Language）用于描述、定义网页内容。
CSS 层叠样式表
MDN CSS 帮助
层叠样式表（CSS，Cascading Style Sheets）用于描述网页内容的外观与展示。
JavaScript 脚本语言
js语言和标准
MDN JavaScript 帮助
JavaScript 是在浏览器中运行的编程语言。它可以为你的网站或应用程序添加交互性和其他动态功能。随着 Node.js 的出现，你也可以在服务器上运行 JavaScript。
函数式编程
函数式编程入门教程 - 阮一峰
JS 函数式编程指南 - PDF 下载
纯函数
什么是纯函数_以及为什么要用纯函数?
柯里化函数
[翻译]JavaScript中的柯里化（Currying in JavaScript）
不可变数据
immutable data 详解
从引用数据，到深拷贝，再到不可变数据。这是调用的进度，也是优化的提升。
生成器函数
MDN function* 帮助
异步函数
MDN async function 帮助
网页技术进阶
JSX React中的界面描述语言
React 官网 - JSX
JSX是一种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)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。
SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感，其实就和css3语法一样，其后缀名是分别为 .scss。
应用框架
NodeJs 使用JS的跨端引擎
nodejs 中文网
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。
Node 是一个让 JavaScript 运行在服务端的开发平台。对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。
用于方便地搭建响应速度快、易于扩展的网络应用。Node 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。
nodejs 官网
## node
# 全局安装n
$ npm install -g n
# 升级到最新稳定版
$ n stable
# 升级到最新版
$ n latest
# 升级到定制版
$ n v7.10.0
# 切换使用版本
$ n 7.10.0 (ENTER)
$ n rm 7.10.0
# 删除制定版本
$ n rm 7.10.0
# 用制定的版本执行脚本
$ n use 7.10.0 some.js
## npm
# 升级npm
$ npm install -g npm
# 查看npm版本
$ npm -v
# 升级cnpm
$ npm -g i cnpm
# 查看cnpm版本
$ cnpm -v
# 关于 package.json
package-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
$ npm install -g @tarojs/cli
# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli使用命令创建模板项目
$ taro init myApp微信小程序编译打包
# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp注意：Taro全局版本需要和项目里的版本一致
# 更新全局版本
# taro update self [version]
$ taro update self
# 更新项目版本
# taro update project [version]
$ taro update project 错误： UnhandledPromiseRejectionWarning: Error: Cannot find module 'autoprefixer'
UnhandledPromiseRejectionWarning: Error: Cannot find module 'webpack-sources'
解决：安装以上缺少模块即可。
异步编程 Taro 异步编程环境配置
$ npm i babel-plugin-transform-runtime -D
$ npm i babel-runtime《 Taro 框架：创建微信小程序 》
Taro 1.x 版本安装 @tarojs/async-await（2.0以上不需要）：
$ npm i @tarojs/async-await --save
componentWillMount() {
Taro.request({
url: 'http://localhost:3000/posts'
})
.then(response => {
console.log(response.data);
})
}可以改写成：
async componentWillMount() {
const response = await Taro.request({
url: 'http://localhost:3000/posts'
})
console.log(response.data);
}
使用 improt '@/xxx' 路径
在 /config/index.js 加上配置：
Taro: alias 配置目录别名
const path = require('path')
const config = {
...
alias: {
// 设置 @ 代表为 src 目录
'@': path.resolve(__dirname, '..', 'src')
}
}
为了让 TypeScript 正确检查，需要在 tsconfig.json 加上下面配置：
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
}
} 打包文件过大调试方案 打包文件过大调试方案 webpack-bundle-analyzer
Taro UI 基于Taro的UI框架
Taro UI 官网
安装好 Taro，创建项目后，在项目根目录安装 taro-ui：
Ant Design 基于React的UI组件库
Ant Design React
antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
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 处理器，处理同步动作，用来算出最新的 State
- effects：Action 处理器，处理异步动作
$ npm install dva-cli -g
$ npm install --save dva-core dva-loading
# 配置 Taro 使用，还需要安装 @tarojs/redux
$ npm i --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-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 图标制作管理平台
iconfont
easyicon
Color 配色网
配色工具
色彩搭配进阶理论
项目开发参考
开发者手册
开发者手册 - 云+社区 - 腾讯云
未完待更新~ |
|
发表于 2022-12-17 19:42:02