【这段时间不能出门，打算写个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 注释文档生成工具
• 平台框架
• wx 微信小程序
• wxCloud 微信云开发
• 其他工具
• Icon 图标制作管理平台
• Color 配色网
• 服务端技术
• Mongoose 分布式数据库
• 项目开发参考
• 开发者手册

网页基础技术

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 的概念把一个领域的模型管理起来:

1. 包含同步更新 state 的 reducers。
2. 处理异步逻辑的 effects 。
3. 订阅数据源的 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-logger

Taro + 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 配色网

配色工具

色彩搭配进阶理论

项目开发参考

开发者手册

开发者手册 - 云+社区 - 腾讯云

未完待更新~