1. 虾扯蛋

大概是前年11月份左右结束6年多的“沪漂”生活，回到霸都合肥，入职了一家“大厂”成为了颗螺丝钉，以为可以有点自己的事业，哪成想领导有点pua，所做的项目的发展前景也不乐观。加上大环境不太好，上半年有10%的同学被毕业了，理想的“好日子”乌拉。开始规划未来的职业或者副业啥的了

2. 整个项目

没有干货，只有一堆鸡毛蒜皮的事情

2. 项目技术栈

taro（多端js库）
@antmjs/vantui（多端ui库）
midway（服务端）
mysql（数据存储）
redis（数据缓存）
node-schedule（定时任务）

3. 前端项目初始化(基于taro)

# 使用 npm 安装 CLI  
$ npm install -g @tarojs/cli  
  
# OR 使用 yarn 安装 CLI  
$ yarn global add @tarojs/cli  
  
# OR 安装了 cnpm，使用 cnpm 安装 CLI  
$ cnpm install -g @tarojs/cli

# npm>5.2(小于5.2 taro init myApp)
npx @tarojs/cli init myApp 

# 进入项目根目录  
$ cd myApp  

# 以下4选一
# 使用 yarn 安装依赖  
$ yarn  
  
# OR 使用 npm 安装依赖  
$ npm install  
  
# OR 使用 pnpm 安装依赖  
$ pnpm install  
  
# OR 使用 cnpm 安装依赖  
$ cnpm install

# 项目跑起来
npm run dev // 这里的dev取决于package.json中脚本配置
//{
// scripts: {
//     "dev": "npm run build:weapp -- --watch"
// ...

现在前端项目run起来了，如果是个微信小程序

先登录微信开发平台拿到小程序appid
项目中找到project.config.json，如下配置你的小程序appid

{
	"miniprogramRoot": "dist/",
	"projectname": "xx小程序",
	"description": "xxxx刷题小程序", 
	"appid": "wxxxxxxxxxx", // 看这里,需要修改
        xxx:xxx
}

打开微信开发者工具添加这个项目，项目目录选择 xxx/myApp/dist,因为上面配置了appid所以你不需要在开发工具中填写appid了

4. 如何登录

代码如下，通过wx.login跟服务端换得的数据存储到useContext（简单的数据状态管理适用） wx.login

4.1. 入口文件

// 入口的文件就请求就放在app.tsx中
import { useEffect, useState } from "react";
import Taro, { useDidShow, useDidHide, useLaunch, } from "@tarojs/taro";
import { StoreContext } from "./store/index";
import { getLogin } from "./http/user.api";
import "./app.less";

function App(props) {
  const [info, setInfo] = useState({});
  // 别用错钩子啦
  useLaunch(() => {
    init();
  });
  const init = async () => {
    try {
       // 获取code，然后跟node服务换得token和其他用户信息
      const res = await Taro.login();
      const share = Taro.getCurrentInstance()?.router?.params?.share || '';
      const msg = await getLogin({ code: res.code });
      setInfo(msg.data);
    } catch (error) { }
  };
  return (
   // 别忘了使用Provider包一层，value中传入你需要管理的数据
    <StoreContext.Provider value={{info,xxx,xxx}}>
      {props.children}
    </StoreContext.Provider>
  );
}

export default App;

4.2. 请求文件

包装下request方法，让请求头中自动带上Token

// 接口地址 http/user.api
import Taro from "@tarojs/taro";
// 包装下request方案
export const request = async function(options) {
	const info = JSON.parse(Taro.getStorageSync("userInfo") || "{}");
	return new Promise((resolve, reject) => {
		Taro.request({
			...options,
			header: {
				...(options.header || {}),
                                // 这里名字自取，大小写都无所谓，到达服务端全小写
				"YK-TOKEN": info?.token,
			},
		})
			.then((val) => {
				if (val.data.success) {
					resolve(val.data);
				} else {
					reject(val.data);
				}
				// resolve(val);
			})
			.catch((error) => {
				reject(error);
			});
	});
	return;
};
// 判断环境，生成环境使用域名，开发环境使用本地服务+端口号
const HOST =
	process.env.NODE_ENV === "development"
		? "http://127.0.0.1:7001"
		: "https://www.xxx.com/api";
// 获取用户登录信息
export const getLogin = async (params: any) => {
	const msg = await request({
		url:
			HOST +
			"/user/get_login?code=" +
			params.code
		method: "GET",
	});
	if (msg.success) {
		return msg;
	} else {
		return Promise.reject(msg.errMessage);
	}
};

然后基本都是业务代码，贴几张小程序效果图吧

4.3. 首页

4.4. 签到页

4.5. 刷题页

5. 服务端项目

midway

npm init midway
npm run dev
// 服务地址 http://localhost:7001，根据这个配置前端接口地址

5.1. 配置下mysql和redis

配置文件地址 src/config.default.ts

import { MidwayConfig } from "@midwayjs/core";

export default {
        // 后端服务配置，port端口号
	koa: {
		port: 7001,
	},
        // 数据库配置
	mysql: {
		host: "localhost",
		user: "root",
		password: "xxxx",
		database: "my_data_xxx",
	},
        // 请求body支持解析以下4种数据类型
	bodyParser: {
		enableTypes: ["json", "form", "text", "xml"],
	},
        // redis配置，基本不需要改，如果你多个redis。（http://www.midwayjs.org/docs/extensions/redis#%E9%85%8D%E7%BD%AE-redis）
	redis: {
		client: {
			port: 6379,
			host: "127.0.0.1",
			password: "auth",
			db: 0,
		},
	}
} as MidwayConfig;

5.2. 配置插件, 导入redis，执行定时任务

在文件 configuration.ts 代码如下

import { Configuration, App } from "@midwayjs/decorator";
import * as koa from "@midwayjs/koa";
import * as info from "@midwayjs/info";
import { join } from "path";
import * as redis from "@midwayjs/redis";
import { TokenMiddleware } from "./middleware/token.middleware";
import * as schedule from "node-schedule";
@Configuration({
	imports: [
		koa,
		redis,
		{
			component: info,
			enabledEnvironment: ["local"],
		},
	],
	importConfigs: [join(__dirname, "./config")],
})
export class ContainerLifeCycle {
	@App()
	app: koa.Application;
	async onReady() {
                // 注册中间件， 中间件校验每个接口token必须合法（除了一些特殊的接口，比如登录接口）
		this.app.useMiddleware([TokenMiddleware]);
                // 定时任务
		schedule.scheduleJob("0 59 23 * * *", async () => {
			console.log("每天23点59分执行定时任务");
		});
		// add filter
		// this.app.useFilter([NotFoundFilter, DefaultErrorFilter]);
	}
}

6. 你以为就完啦？

7. 怎么可能

云服务器购买，使用？
域名申请，解析？
https证书，安装？
node服务部署，pm2管理？
本地mysql安装（服务器）？
本地redis安装（服务器）？
sql语句学习（起码CRUD得会吧）
点赞多的话，出每个步骤的细节文章

全栈开发微信小程序（从零单排）第一集