开启全栈之路

经过一段时间的探索，也可以说是摸索，确定了两个副业方向。其中一个小程序需要全栈开发，虽然有十几年的互联网工作经验，但都集中在前端App开发上，期间有过机会，开始自己的 Side Project 转向全栈，都一直没有尝试。这个项目启动之后，发现多年的经验，再扩展向后端、运维的过程中，起到有很大的帮助作用。

产品设计工具选型

产品设计类工具比较多，重点对比了之前项目中使用过的 Figma，以及社群推荐的白板工具 Milanote。Milanote 的细节和交互完全占据上风，但是免费的限制也很多。

综合考虑钱包的厚度，还是选择了 Figma，Figma 免费的功能对于小团队来说完全够用。

即便是我工作中用过的 Figma，还需要花费一些时间学习设计产品原型，这应该是整个项目里个人能力最弱的领域。

前端小程序框架选型

微信小程序的技术栈没有什么选择。除了微信自己的工具，就是 uniapp，只是因为更熟悉 Vue，所以无脑 uniapp。

不过 uniapp 的 IDE 实在是不顺手，就调研了一波，发现可以通过 CLI 的方式使用 VSCode。

另外，无论如何都是需要安装 微信开发者工具 和 HBuildX。运行的时候需要在 3 个 IDE 之间切换，虽然比较麻烦，但是大部分写代码的时间都在 VSCode，还是可以忍受。

安装环境

通过 Vue CLI 创建项目，因为我使用 Vue3 + TypeScript，所以命令如下：

# 全局安装 vue-cli
npm install -g @vue/cli
# 创建基于ts的vue3项目
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

问题

如果像我一样使用 axios 调用接口，那么会有一些问题。

运行后报错 Adapter http is not available in the build。

这是由于axios底层使用xhr发起请求，不适用于各平台的小程序。通过修改 axios 的适配器，使用 uni.request 发起请求即可。一番搜索，发现了 uniapp-axios-adapter，专门解决这个问题。

npm i uniapp-axios-adapter

使用方法如下：

import axios from "axios";
import { UniAdapter } from "uniapp-axios-adapter";

const request = axios.create({
  baseURL: "https://example.com",
  adapter: UniAdapter, // 指定适配器
});

运行继续报错 wx.request: header must be an object。

这是因为 uniapp-axios-adapter 返回的 headers 类型不匹配，需要手动修改，话说这个库并没有一次性把问题全部解决。

到node_modules文件夹下，找到 lib/index.cjs.js 和 lib/index.esm.js 两个文件，修改如下：

header: headers
# 改为
header: JSON.parse(JSON.stringify(headers))

至此，终于可以正常运行小程序，成功调用接口了。

后端框架选型

后端开发毫无疑问选择了全栈支持更好的 Node.js 技术栈。只是框架实在是太多，有纯后端框架，也有流行的全栈框架。

刚开始没做调研，直接用了几年前玩过的 Koa.js 开发了几个接口，但是考虑没有后端实际项目经验，像 Koa.js 这种上手简单但又灵活的框架，可能无法快速满足最佳实践，比如数据验证、鉴权、安全和依赖管理，而且 Koa 没有太多的资料供参考。

然后，就做了一翻调研，发现了新世界， Next.js、 Nest.js、Nuxt.js 还有 Remix.js，前三个看名字是不是有点傻傻分不清楚。

Anyway，经过调研，由于我对 Vue 更熟悉，所以 React 相关的技术框架 Next.js 和 Remix.js 就排除了，虽然据说很好很强大，加上只是想选择一款纯后端框架，作为全栈技术框架的 Nuxt.js 也排除了。

最后就只剩下 Nest.js，瞬间治好了选择恐惧症。加上完善的文档和最佳实践的规范约束，几乎跟着文档就完成了项目框架的搭建。

云服务器选型

因为是微信小程序，服务器只能是国内的云平台选一个，备案当然也是逃不掉的。不过初始阶段，国外免费好用的平台其实就足够使用，另外海外域名也不需要备案，那么先开始速度就是一切。迅速选择了以下的云平台：

Vercel。用于 Nest.js 接口部署，方便快捷。
Cloudflare。域名解析和 HTTPs 支持。
Oracle Cloud。搭建了基于 Ubuntu 的环境部署 MySQL。

国内各类云平台没怎么用过，数据库貌似也是依赖云平台，运维这块还没完全搞清楚。后续正式上线云平台搞清楚了再补充。

这本来是运维的活。只能用这句来激励自己，我现在是全栈（全干）程序员了。

写在最后

以上是对最近做的事情的一个记录，想法开始落地，细节也会越来越清晰。

“世界会随时告诉你该向哪个方向前进，而你需要留意信号。你怎样让世界告诉你？把你的点子和概念展示出来，按照你的想法做出来，让它告诉你。用你的天才之笔涂抹这个世界，然后它会告诉你是对还是错。”

# 技术 # 全栈