ARTICLE 02 / 实操教程

WSL + Ubuntu + Codex 微信小程序开发环境搭建指南

这篇文章是给 Windows 用户准备的实操版教程:让 Codex 在 WSL Ubuntu 中负责代码开发,让微信开发工具读取 Windows 本地目录负责预览,再用同步脚本把两边连接起来。

WSL 安装 Ubuntu 24.04 Node / Git Codex 安装 自动同步脚本
CONTENT MAP

一、先确定最终架构

这套环境不是为了把所有东西都塞进 WSL,而是让每个工具在最适合的位置工作。

Codex 在 WSL 里开发,微信开发工具在 Windows 里预览,中间用同步脚本自动连接。
WSL Ubuntu存放真实开发源码
Codex负责分析、修改、重构代码
同步脚本把 WSL 项目同步到 Windows 目录
微信开发工具打开 Windows 本地目录,自动刷新预览

二、安装 WSL 与 Ubuntu

在 Windows 11 中,推荐直接使用 WSL2。打开管理员 PowerShell,执行:

wsl --install

安装完成后重启电脑。然后查看 WSL 状态:

wsl -l -v

如果看到 Ubuntu 并且版本是 2,说明 WSL2 已经可用。

NAME STATE VERSION Ubuntu-24.04 Running 2

推荐系统版本

我更推荐使用 Ubuntu 24.04 LTS。它资料多、社区成熟,遇到 Node、Git、npm、Codex 相关问题时更容易查到解决办法。

进入 Ubuntu

wsl -d Ubuntu-24.04

三、安装基础开发工具

进入 Ubuntu 后,先更新软件源:

sudo apt update sudo apt upgrade -y

安装常用工具

sudo apt install -y git curl wget unzip jq build-essential ca-certificates

配置 Git

git config --global user.name "你的名字" git config --global user.email "你的邮箱"

如果后续需要连接 GitHub,建议继续配置 SSH Key。

ssh-keygen -t ed25519 -C "你的邮箱" cat ~/.ssh/id_ed25519.pub

四、安装 Node.js

微信小程序项目、npm 工具链、Codex CLI 都会用到 Node。推荐用 nvm 管理 Node 版本,后续升级和切换都更方便。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash

执行后重新打开 Ubuntu 终端,或者运行:

source ~/.bashrc

安装 Node LTS:

nvm install --lts nvm use --lts node -v npm -v
不建议一开始就在 Windows 和 WSL 中混装多个 Node 环境。Codex 使用的 Node 环境,尽量统一放在 WSL 内。

五、配置 VS Code

VS Code 建议安装在 Windows 端,然后安装 WSL 插件。这样可以直接进入 Linux 项目目录开发。

cd ~/work/你的项目 code .

推荐插件:

  • WSL:用于连接 Ubuntu 开发环境。
  • GitHub Pull Requests:方便查看仓库状态。
  • 微信小程序相关语法插件:用于辅助编辑 WXML、WXSS、JS。

六、安装 Codex

确认 Node 和 npm 正常后,在 WSL Ubuntu 中安装 Codex:

npm install -g @openai/codex

安装完成后验证:

codex --version codex

首次使用时,根据提示完成登录。

建议的使用方式

不要让 Codex 在 Windows 桌面目录、下载目录里长期操作项目。建议把项目放在 Linux 用户目录下,例如:

/home/min/work/bee-toolbox

这样 Codex 扫描、读取、修改文件的效率会更稳定。

七、项目目录规划

推荐统一建立 work 目录:

mkdir -p ~/work cd ~/work

项目可以这样组织:

~/work ├── bee-toolbox │ └── miniprogram ├── miniprogram-demo └── temp-test
核心原则:Codex 修改的主项目放在 WSL 的 /home 目录下,不要放在 /mnt/c 下面长期开发。

八、解决微信开发工具无法稳定监听 WSL 文件的问题

最开始我尝试让微信开发工具直接打开 WSL 路径:

\\wsl.localhost\Ubuntu-24.04\home\min\work\bee-toolbox\miniprogram

这个方式可以打开项目,但实际开发中会遇到一个关键问题:微信开发工具对 WSL 文件变化监听并不稳定。Codex 修改文件后,微信开发工具可能不会自动刷新,也不一定会自动编译。

最终方案:开发目录和预览目录分离

开发目录/home/min/work/bee-toolbox/miniprogram
预览目录D:\Projects\bee-toolbox\miniprogram
微信开发工具只打开 Windows 本地目录

同步脚本示例

可以在 WSL 中写一个简单脚本,把项目同步到 Windows 目录。下面是示例,实际路径按自己的项目调整:

#!/usr/bin/env bash set -e SRC="$HOME/work/bee-toolbox/miniprogram/" DEST="/mnt/d/Projects/bee-toolbox/miniprogram/" mkdir -p "$DEST" rsync -av --delete \ --exclude 'node_modules' \ --exclude '.git' \ --exclude 'miniprogram_npm' \ "$SRC" "$DEST" echo "同步完成:$SRC -> $DEST"

保存为:

~/work/sync-miniprogram.sh

添加执行权限:

chmod +x ~/work/sync-miniprogram.sh

每次 Codex 修改完成后执行:

~/work/sync-miniprogram.sh

九、推荐的日常开发流程

01在 WSL 项目目录中启动 Codex
02让 Codex 完成页面、组件、接口或样式修改
03执行同步脚本,把代码复制到 Windows 预览目录
04微信开发工具自动检测 Windows 文件变化并刷新预览
05真机测试,确认无误后提交 Git

这个流程看起来多了一步同步,但实际体验比直接让微信开发工具读取 WSL 路径更稳定。

十、常见问题

1. 微信开发工具能不能直接打开 WSL 项目?

可以打开,但不推荐作为长期方案。最大问题是文件变化监听不稳定,影响自动刷新和预览效率。

2. 项目到底应该放 WSL 还是 Windows?

真实开发源码放 WSL,微信开发工具预览目录放 Windows。两边通过同步脚本连接。

3. node_modules 要不要同步?

通常不建议同步。微信小程序项目真正需要同步的是页面、组件、工具函数、配置文件和静态资源。依赖目录根据项目情况单独处理。

4. 同步脚本会不会覆盖文件?

如果使用 --delete,会让 Windows 预览目录严格等于 WSL 源目录。这个方案适合“WSL 是唯一源码”的模式。不要在 Windows 预览目录里手工改代码。

总结

这套环境的核心不是复杂,而是分工清晰。

Codex:在 WSL 中高效开发
Ubuntu:提供稳定 Linux 工具链
同步脚本:连接 WSL 与 Windows
微信开发工具:负责自动刷新和真机调试
如果你正在 Windows 上长期使用 Codex 开发微信小程序,我更推荐直接采用 WSL + Ubuntu + 自动同步脚本的组合。

下一步:后续可以继续完善为自动监听同步版本:Codex 修改完成后,脚本自动检测文件变化并同步到 Windows 目录,让整个流程更接近实时热更新。