docs: 新增内容

前端培训资料-公众号.md

@@ -2,7 +2,7 @@
 
 ## 前期准备
 
-1.node 环境配置在 14 及以上，可以使用 nvm 进行 node 环境管理
+1.node 环境配置在 12 及以上，可以使用 nvm 进行 node 环境管理
 
 2.下载微信开发者工具
 
@@ -125,15 +125,22 @@ react 所有生命周期都适用，项目中最常用的有以下两种：
 
 ```js
 class App extends Component {
-  // 可以使用所有的 React 生命周期方法，一般在此阶段请求接口获取数据
-  componentDidMount() {}
-
-  // 页面状态或者变量更新时的生命周期
-  componentDidUpdate() {}
-
-  render() {
-    return <div></div>;
-  }
+	state = {
+		name: "",
+	};
+	// 可以使用所有的 React 生命周期方法，一般在此阶段请求接口获取数据
+	componentDidMount() {
+		this.setState({
+			name: "xxx",
+		});
+	}
+
+	// 页面状态或者变量更新时的生命周期
+	componentDidUpdate() {}
+
+	render() {
+		return <div></div>;
+	}
 }
 ```
 
@@ -153,20 +160,20 @@ class App extends Component {
 import { combineReducers } from "redux";
 
 const initState = {
-  name: ""
+	name: "",
 };
 
 function userInfo(state = initState, action) {
-  switch (action.type) {
-    case "SAVE":
-      return Object.assign({}, state, action.info.user);
-    default:
-      return state;
-  }
+	switch (action.type) {
+		case "SAVE":
+			return Object.assign({}, state, action.info.user);
+		default:
+			return state;
+	}
 }
 
 export default combineReducers({
-  userInfo
+	userInfo,
 });
 ```
 
@@ -180,8 +187,8 @@ import Api from "...";
 
 // worker Saga : 将在 INIT action 被 dispatch 时调用
 function* fetchUser(action) {
-  const user = yield call(Api.fetchUser);
-  yield put({ type: "SAVE", info: { user } });
+	const user = yield call(Api.fetchUser);
+	yield put({ type: "SAVE", info: { user } });
 }
 
 /*
@@ -189,7 +196,7 @@ function* fetchUser(action) {
   允许并发（译注：即同时处理多个相同的 action）
 */
 function* mySaga() {
-  yield takeEvery("INIT", fetchUser);
+	yield takeEvery("INIT", fetchUser);
 }
 
 /*
@@ -200,7 +207,7 @@ function* mySaga() {
   那么处理中的 action 会被取消，只会执行当前的
 */
 function* mySaga() {
-  yield takeLatest("INIT", fetchUser);
+	yield takeLatest("INIT", fetchUser);
 }
 
 export default mySaga;
@@ -236,55 +243,55 @@ import { withRouter } from "react-router-dom";
 import { connect } from "react-redux";
 
 class App extends Component {
-  state = {
-    nickName: ""
-  };
-
-  componentDidMount() {
-    this.props.onInitUserInfo(); // 调用 props 中的方法获取全局数据
-
-    this.getNickName(); // 直接调用接口获取数据
-  }
-
-  async getNickName() {
-    const result = await getNickNameApi();
-    this.setState({
-      nickName: result.nickName
-    });
-  }
-
-  render() {
-    const { userInfo } = this.props; // 从 props 中获取数据
-    return (
-      <div onClick={() => this.props.onChangeUserInfo({ name: "xxx" })}>
-        {userInfo.name}
-      </div>
-    );
-  }
+	state = {
+		nickName: "",
+	};
+
+	componentDidMount() {
+		this.props.onInitUserInfo(); // 调用 props 中的方法获取全局数据
+
+		this.getNickName(); // 直接调用接口获取数据
+	}
+
+	async getNickName() {
+		const result = await getNickNameApi();
+		this.setState({
+			nickName: result.nickName,
+		});
+	}
+
+	render() {
+		const { userInfo } = this.props; // 从 props 中获取数据
+		return (
+			<div onClick={() => this.props.onChangeUserInfo({ name: "xxx" })}>
+				{userInfo.name}
+			</div>
+		);
+	}
 }
 
-const mapStateToProps = state => {
-  // 设置所要监听/获取的数据
-  return {
-    userInfo: state.userInfo
-  };
+const mapStateToProps = (state) => {
+	// 设置所要监听/获取的数据
+	return {
+		userInfo: state.userInfo,
+	};
 };
 
-const mapDispatchToProps = dispatch => {
-  // 设置函数，触发 dispatch，获取/修改用户数据
-  return {
-    onInitUserInfo() {
-      // 初始化数据
-      dispatch({ type: "INIT" });
-    },
-    onChangeUserInfo(user) {
-      // 修改数据
-      dispatch({
-        type: "SAVE",
-        info: user
-      });
-    }
-  };
+const mapDispatchToProps = (dispatch) => {
+	// 设置函数，触发 dispatch，获取/修改用户数据
+	return {
+		onInitUserInfo() {
+			// 初始化数据
+			dispatch({ type: "INIT" });
+		},
+		onChangeUserInfo(user) {
+			// 修改数据
+			dispatch({
+				type: "SAVE",
+				info: user,
+			});
+		},
+	};
 };
 
 // 通过 redux 提供的 connect 方法，给 APP 组件的 props 中连接所需要的属性和方法

前端培训资料-小程序.md

@@ -68,30 +68,30 @@
 
 ```js
 class App extends Component {
-  // 可以使用所有的 React 生命周期方法
-  componentDidMount() {}
-
-  // 对应 onLaunch
-  // 在小程序环境中对应 app 的 onLaunch
-  // 在此生命周期中通过访问 options 参数或调用 getCurrentInstance().router，可以访问到程序初始化参数
-  onLaunch() {}
-
-  // 对应 onShow，程序启动，或切前台时触发。
-  componentDidShow() {}
-
-  // 对应 onHide
-  // 程序切后台时触发。
-  componentDidHide() {}
-
-  render() {
-    // 在入口组件不会渲染任何内容，但我们可以在这里做类似于状态管理的事情
-    return (
-      <Provider store={store}>
-        {/* this.props.children 是将要被渲染的页面 */}
-        {this.props.children}
-      </Provider>
-    );
-  }
+	// 对应 onLaunch
+	// 在小程序环境中对应 app 的 onLaunch
+	// 在此生命周期中通过访问 options 参数或调用 getCurrentInstance().router，可以访问到程序初始化参数
+	onLaunch() {}
+
+	// 可以使用所有的 React 生命周期方法
+	componentDidMount() {}
+
+	// 对应 onShow，程序启动，或切前台时触发。
+	componentDidShow() {}
+
+	// 对应 onHide
+	// 程序切后台时触发。
+	componentDidHide() {}
+
+	render() {
+		// 在入口组件不会渲染任何内容，但我们可以在这里做类似于状态管理的事情
+		return (
+			<Provider store={store}>
+				{/* this.props.children 是将要被渲染的页面 */}
+				{this.props.children}
+			</Provider>
+		);
+	}
 }
 ```
 
@@ -99,24 +99,24 @@ class App extends Component {
 
 ```js
 class Index extends Component {
-  // 可以使用所有的 React 生命周期方法
-  componentDidMount() {} // 一般接口请求会放在此阶段进行
+	// 可以使用所有的 React 生命周期方法
+	componentDidMount() {} // 一般接口请求会放在此阶段进行
 
-  // onLoad
-  onLoad() {}
+	// onLoad
+	onLoad() {}
 
-  // onReady
-  onReady() {}
+	// onReady
+	onReady() {}
 
-  // 对应 onShow
-  componentDidShow() {}
+	// 对应 onShow
+	componentDidShow() {}
 
-  // 对应 onHide
-  componentDidHide() {}
+	// 对应 onHide
+	componentDidHide() {}
 
-  render() {
-    return <View className="index" />;
-  }
+	render() {
+		return <View className="index" />;
+	}
 }
 ```
 
@@ -177,10 +177,10 @@ import { observer, inject } from "mobx-react";
 @inject("userInfo")
 @observer
 class ByUser extends Component {
-  render() {
-    const { nickname } = this.props.userInfo || {};
-    return <View>{nickname}</View>;
-  }
+	render() {
+		const { nickname } = this.props.userInfo || {};
+		return <View>{nickname}</View>;
+	}
 }
 ```
 
@@ -194,15 +194,15 @@ import { observer, inject } from "mobx-react";
 @inject("userInfo")
 @observer
 class ByUser extends Component {
-  handleChangeName = () => {
-    const userInfo = this.props.userInfo || {};
-    userInfo.bindUser({ nickname: "xxx" });
-  };
-
-  render() {
-    const { nickname } = this.props.userInfo || {};
-    return <View onClick={() => handleChangeName()}>{nickname}</View>;
-  }
+	handleChangeName = () => {
+		const userInfo = this.props.userInfo || {};
+		userInfo.bindUser({ nickname: "xxx" });
+	};
+
+	render() {
+		const { nickname } = this.props.userInfo || {};
+		return <View onClick={() => handleChangeName()}>{nickname}</View>;
+	}
 }
 ```
 
@@ -257,3 +257,23 @@ class ByUser extends Component {
   }
 }
 ```
+
+## 项目运行流程
+
+1. 入口文件 `src/app.js`，统一入口，注入全局状态 store
+
+2. `src/index/index`，微信小程序的唯一入口，在此获取 token/鉴权/路由判断/二维码判断，跳转到指定的路由
+
+- 2.1 通过 `handleToken` 获取 token 和个人信息
+
+- 2.2 通过判断路由参数 `q` 和 `pathname`，加上解析参数 `query`，跳转到具体业务页面，适用于固定链接(不需要关注或通过公众号)，如 `https://m-qa.ywtinfo.com/thnethospwe/prescriptionOrder?bizNo=P201811011958115320228626&orderId=20991`
+
+- 2.3 通过判断路由参数 `entry`，跳转到具体业务页面，使用于动态链接(从公众号通过链接跳转到小程序的某个页面)，如 `pages/index/index?entry=by/medical_record_mailing/newborn?mailingOrderId=mailingOrderId`
+
+- 2.4 跳转到默认首页 `/pages/index/home`
+
+3. 具体页面渲染
+
+- 3.1 生命周期，接口获取数据
+
+- 3.2 注入全局状态，获取全局状态数据