微信小程序开发前所必要的环境如何搭建？

搭建环境

本文介绍进行微信小程序开发前所必要的环境搭建工作。如果您已具备以下开发环境，可跳过本文。

 

前提条件

• 已了解 面板小程序是什么。
• 已了解面板小程序相关的 名词概念。
• 已了解 如何用 Ray 来开发微信小程序。

 

操作步骤

安装编辑器

小程序开发前，请您按需自行下载安装下列推荐的编辑器：

• Visual Studio Code：（推荐）自带格式化、代码跳转等常用功能，社区贡献与活跃度较高。
• WebStorm：集成度较高的 IDE。
• Sublime Text：小巧轻便。
• Atom：小巧轻便。

 

安装微信开发者工具

开发者工具可以帮助您创建、开发、调试、上传小程序项目。

请到微信小程序官方网站下载指定版本的开发者工具： 微信开发者工具 。

 

安装 NVM

NVM 可以帮助您管理多 Node 版本，注意首次安装，需要根据提示设置环境变量

1. 打开终端。

2. 安装 NVM。

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

3. 输入 nvm -v，确认 NVM 已正常安装，若输出版本号，则表明安装成功，若报错 nvm: command not found，您可参考文末常见问题的解决方法。

4. 输入nvm install 16.20.2 ，安装 Node.js 16.20.2 版本。

5. （可选）支持通过 nvm use 命令切换至指定 Node.js 版本。（建议安装 Node.js 16.20.2 及以上版本。）

   	nvm use 16.20.2

安装 Yarn

如果已安装过 yarn 或者已使用 npm、pnpm 等依赖管理工具，可忽略本内容

1. 打开终端。

2. 输入npm install -g yarn，安装 Yarn。

3. （可选）输入 yarn -v ，确认 Yarn 已正常安装。

👉 开发微信小程序。

 

常见问题

输入 nvm -v 时，为什么报错 nvm: command not found？

可能的原因是 NVM 所在的路径未设置为环境变量，您可以参照下述步骤设置环境变量：

1. 打开终端。

2. 输入cd ~ ，进入当前用户的 Home 目录。

3. 输入以下命令，打开配置文件。

   • Window 系统

     open .bash_profile

   • macOS 系统

     open .bashrc

4. 在配置文件中，复制以下代码后，保存文件。

   export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

5. 输入 source .bash_profile 或 source .bashrc，重新加载配置文件。

6. 输入 nvm -v，查看 NVM 版本，验证是否安装成功。